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

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