Typescript is a technology that grows every day. Companies like Slack, Airbnb, or Google are changing their javascript codebase to Typescript.
Frameworks like Vue, React and (Angular) are using Typescript for writing maintainable code.
These steps show how to start a project with Typescript and Parcel.
The full code is available in Github repo
Create a basic project structure
The app structure is a simple 2 typescript class (User.ts, App.ts) and index.html.
app/App.ts
app/User.ts
index.html
Setup Parcel and NPM Tasks
The parcel is a npm package for transform, compile and bundle assets. It also provides a development server with a hot-reload.
The first step is installing the packages dependencies.
npm install -D parcel parcel-bundler
Create dev and build script in package.json. These tasks allow build your code and run the dev server.
"scripts": {
"dev": "parcel index.html",
"build": "parcel build dist"
}
Ready to code?
The User.ts file is a class. The class has a constructor with 2 parameters, name and age.
The hello method returns a string with the name and age.
export class User {
constructor(public name: string = "no name", public age: Number = 35) { }
hello(): string {
return `Hi ${this.name} your age is ${this.age} `;
}
}
Import the User class into the App.ts. Add a function for window.onload event, the function set the title with the return of hello method.
import { User } from "./User";
window.onload = () => {
let title = document.querySelector("#title");
const tsUser = new User("Dany Paredes", 36);
if (title) title.innerHTML = tsUser.hello();
};
Edit index.html file and import App.ts
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello Typescript</title>
</head>
<body>
<div name="container">
<h2 id="title"></h2>
</div>
<script type="module" src="App.ts"></script>
</body>
</html>
Run the npm run dev command, to start the webserver at http://localhost:1234.
That's it!
That gives a head-start on Typescript and if you enjoyed please share.
Photo by Braden Collum on Unsplash
Top comments (11)
From my understanding, Parcel just strips typescript annotations and does not actually do any type checking, which kinda defeats the purpose of typescript.
v2.parceljs.org/languages/typescript
True
Hey I just want to follow up. I have been using Parcel for a TypeScript application for a few weeks now and I found your article while trying to figure it out. Like I mentioned before, Parcel does not actually compile the
.tsfiles. It just strips the annotations and bundles the regular JavaScript. But I have found that most of the functionality of TypeScript happens in the IDE. I use Sublime Text and there is an excellent TypeScript linter for it, so all the type-checking is done there while I code and that works great. It turns out I never actually use thetsccompiler anyway.Yes, mostly of typescript features are only in development and runs in the IDE.
I highly recommend give a try to VSCode but Sublime works fine.
Is there a downloadable example?
Hi @wcdeich4 , thanks for you feedback , I already update the github repo and a small change in the script import :D github.com/danywalls/parcel-typesc...
Thanks alot, I have a mini gaming engine i needed to write for Canvas and I used parcel, this really helped out alot
Good! Parcel is amazing!!!
Well done!
You helped me very much :)
Many thanks.
If you have an event handler in the HTML, how do you point it to a function defined in the App.ts?
Simply calling it results in a Reference error that the function is not defined.