How to setup a new Project in Typescript

📣 Sponsor

Javascript is a weakly typed language. That means we don't have to define types, and many people love the flexibility of that. Typescript is Javascript, only it is strongly typed. That means we need to define types. Typescript has been becoming very popular over the last few years.

Why is Typescript so popular?

Typescript follows all the same conventions of Javascript, except for how it defines types. If you've ever worked with Javascript before, you may have run into this kind of issue:


let i = "1";
let j = i + 10;
console.log(j); // Returns 110

Since we have given i as a string, when we try to add to it, we are adding strings together, not numbers. As you can see, this can become a problem.

By being strict about how we define types, typescript helps us to avoid bugs that would appear because of situations like this. This doesn't just apply to numbers and strings, but also objects, where we might expect a property. In typescript, we can force that object to always contain that property.

How to use Typescript

It should be noted at this point that typescript is a server side language, so it goes hand in hand with Node.JS. To install typescript, we use npm. Make sure you have NPM and Node.JS installed prior to this. To install typescript, run the following command:


npm i -g typescript

Now we have typescript installed, we can get to work. I've created a new folder, used cd in the command line to move into it, and initiated both git and npm with the following commands:


git init
npm init

Next, let's initate typescript for this project:


npx tsc --init

This will create a tsconfig.json file, which will hold all the information on your typescript configuration. You can edit this if you need to. I have created two folders as well - build, and dist, so my folder looks something like this:

What do these folders mean?

build - this is where all our typescript will go.
dist - when we build our typescript, it is compiled to Javascript. That will go into this folder.

Writing your first typescript

First off, to ensure we are writing to the right folder, update your tsconfig.json file to include the following two lines:


// ....
"outDir": "dist", 
"rootDir": "build",
// ....

This will ensure we write to the right folder, when we compile our typescript. Within build, create a new file called index.ts. Now you can start writing typescript. I have created a very basic example for index.ts:


let i:number = 1;
let j:number = 2;
let z:number = 3;

Now, when we want to compile our typescript, we just have to run the following command in our base directory:


tsc --build

Now our index.ts file will be compiled into index.js, which we'll be able to find in our dist folder.

Using Watchers

Since running the build command constantly can be quite annoying, we can set up a typescript watcher which will compile our typescript every time we save it. To do that, we just have to run the following command:


tsc -w

Now all your typescript will autocompile. Now that we've done all that, you have a fully fledged typescript project, which can easily be compiled into a distribution folder, for you to easily use.

Last Updated 1623785978537