DEV Community

Cover image for Get start with Typescript and Parcel
Dany Paredes
Dany Paredes

Posted on • Updated on

Get start with Typescript and Parcel

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 

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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"
    }

Enter fullscreen mode Exit fullscreen mode

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} `;
    }
}

Enter fullscreen mode Exit fullscreen mode

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();
};

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
bfef profile image
Efrem Rensi

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

Collapse
 
danywalls profile image
Dany Paredes

True

Collapse
 
bfef profile image
Efrem Rensi

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 .ts files. 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 the tsc compiler anyway.

Thread Thread
 
danywalls profile image
Dany Paredes

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.

Collapse
 
wcdeich4 profile image
William Deich

Is there a downloadable example?

Collapse
 
danywalls profile image
Dany Paredes • Edited

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...

Collapse
 
dojovader profile image
Okeowo Aderemi

Thanks alot, I have a mini gaming engine i needed to write for Canvas and I used parcel, this really helped out alot

Collapse
 
danywalls profile image
Dany Paredes

Good! Parcel is amazing!!!

Collapse
 
bezael profile image
Bezael Pérez

Well done!

Collapse
 
faridulhassan profile image
Md. Faridul Hassan

You helped me very much :)

Many thanks.

Collapse
 
dandv profile image
Dan Dascalescu • Edited

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.