The easiest way to install Typescript in any Javascript project

I've always avoided javascript mainly because it is loosely typed and that makes it harder for me. I heavily rely on return types, hovering mouse over functions to see arguments types etc.

But since the advent of Typescript things changed. This must be one of the Microsoft's best creation alongside with VSCode. Typescript has made it possible for me to finally get in the JS world and be a full stack dev working on 100% JS stack (NodeJS, ReactJS and React Native)

Here I want to show you how easy you can install Typescript in a node project or any Javascript project for that matter. You can even make a .sh script to execute all the steps for you.

First lets create a folder and initiate the project with yarn:

mkdir sampleproject
cd sampleproject
yarn init -y

Awesome! Now let's make a folder called src:

mkdir src

Now we are going to create the server.ts inside the src folder file:

touch src/server.ts

Cool! We have our basic structure. It's time to do some package adding. We are going to install express and Typescript:

yarn add express

Now the dev dependencies:

yarn add @types/express -D
yarn add typescript -D

Great! Up until now we have installed Express which is the framework for server/client architecture and the Typescript language. But we have a problem, NodeJS does not understand Typescript. We need to install a transpiler!

We are going to use ts-node-dev as a development dependency:

yarn add ts-node-dev -D

Some configs on our package.json file are necessary. Append this object to it:

"scripts": {
    "dev": "ts-node-dev --inspect --transpile-only --ignore-watch node_modules src/server.ts"
  },

So our final package.json should look like this:

{
  "name": "sample",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "@types/express": "^4.17.9",
    "ts-node-dev": "^1.0.0",
    "typescript": "^4.1.2"
  },
  "scripts": {
    "dev": "ts-node-dev --inspect --transpile-only --ignore-watch node_modules src/server.ts"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}

Before we write our server code we need to add the tsconfig.json file by typing:

yarn tsc --init

Make sure you are on the root of the project before running the above command.

Let's finally code our server.ts file. Open it on your favorite editor and paste this:

import express from 'express';

const app = express();

app.listen(3333, () => {
    console.log('🧨 Server started on port 3333');
});

That is it! We can now code using Typescript and the ts-node-dev dependency will transpile all the Typescript to Javascript so node can understand it.

Run this command

yarn dev

and you should get something similar to this on your terminal:

[INFO] 11:04:25 ts-node-dev ver. 1.0.0 (using ts-node ver. 9.0.0, typescript ver. 4.1.2)
Debugger listening on ws://127.0.0.1:9229/b3ea4474-08b5-491b-a57e-3528b3a6ca10
For help, see: https://nodejs.org/en/docs/inspector
🧨 Server started on port 3333

You can delight yourself with the cool features provided by Typescript.

I hope this tutorial suits you well and please don't forget to support it by slapping the like button now. 😀

See you on the next post.