How to Get Started with TypeScript

Sometimes it’s necessary to set up a development environment for writing TypeScript code. This article will show how it’s done.

I imagine that you already have Nodejs installed on your computer, if not, you need to visit the official site and download it. It would also be a good idea to install GIT. Don’t forget that we’ll perform all important actions using the command line.

Firstly you need to create a new nodejs project.

Let’s create a folder and call it ts-dev-env.

After that, navigate to the folder and initialize a new project.

$ mkdir ts-dev-env
$ cd ts-dev-env
$ npm init

With this, we’ve just created a new JavaScript project. There are no files, and we need to create an ‘src‘ folder with the index.ts file in it.

$ mkdir src
$ touch src/index.ts

Actually, we have everything we need to start the installation of necessary packages but first, we need to add typescript language.

Let’s use npm utility for it.

$ npm install –save typescript

Secondly, we need to create a tsconfig.json file with compiler options.

$ touch tsconfig.json

In this example, you can just create a tsconfig.json file in the root of the project and copy the information to the file.

{
   "compilerOptions": {
     "module": "commonjs",
     "esModuleInterop": true,
     "target": "es6",
     "moduleResolution": "node",
     "sourceMap": true,
     "outDir": "dist"
   },
   "include": [
     "./src/**/*"
   ],
   "lib": ["es2015"]
}

Now, we can start writing TypeScript code. Let’s open index.ts file. I would advise you to use VSCode as a text editor.

One of the most popular tasks for coders is implementing a palindrome checker algorithm. I would suggest leaving the description of the implementation out of this article and just copying this class to the index.ts file. The program code should be easier, but I specifically shaped it as a class for compiling demonstrations.

class Palindrome {
   private word = '';
   constructor(word: string) {
      this.word = word;
   }


   public check() {
       const arr = this.word.toLocaleLowerCase().split('').reverse();
       return (arr.join('') === this.word.toLocaleLowerCase());
   }


   public length() {
       return this.word.length;
   }
}

const palindrome = new Test("Anna");
const isPalindrome = palindrome.check();
console.log(isPalindrome);
const wordLength = palindrome.length();
console.log(wordLength);

Now we have everything for compilation and can do it. For this purpose let’s add the “build” command to package.json. This procedure removes the dist folder if it exists and runs the compilation process.

...
"scripts": {
    ...
    "build": "rm -rf ./dist && npx tsc",
    ...
}
...

Another important thing is the developing mode. Basically, it’s possible to compile and run code just after changing lines. For this purpose, you need to install a ts-node-dev utility that watches on your “src” folder and if you change something, please recompile and rerun the code.

$ npm install –save-dev ts-node-dev

After installation, you can add a dev command to the package.json file with the text

...
"scripts": {
    ...
    "build": "ts-node-dev --respawn -- src/index.ts",
    ...
}
...

That’s it!

Now you have a simple environment for writing and compiling TypeScript code.

All source codes for this article can be found here.

If this article was interesting and helpful to you, or if you saw any inaccuracies and would like to discuss them, please write your thoughts in the comments below. I’d be happy to chat with you.