How To Set Up a New TypeScript Project

In today’s article we’ll see how to setup a new vanilla typescript project. This is a 3 step process

• get TypeScript into your system.
• creating a tsconfig.json file to manage our packages.
• to compile/transpile and check the output of it

Getting TypeScript into our system

For bringing Typescript into our system we require some things to be installed such as NODE and NPM. TypeScript can be bought into our system by multiple ways, but a preferred way would be to download it as a package from NPM.

npm install typescript --save-dev

make sure to run this command at the project-folder level, or if you want to install it globally we can run the following command

npm install -g typescript

with this we have successfully downloaded the TypeScript package into our system and next step would be initialise a project.

Create a tsconfig file.

To create this file we need to create a folder where we want project to be located. To create it we use “mkdir” cmd in our terminal

mkdir my-first-typescript-project

after creating this folder inside this folder we’ll execute

npx tsc --init

“npx” is a tool which comes with npm and it allows us to run, any package without installing it globally. “tsc” stands for typescript compiler which takes any typescript code and generates javascript at a specified location. “–init” this flag will initialise our project by creating a “tsconfig.json” this file is understood by typescript compiler and this file differs from project to project hence compilers can interact differently with different projects.

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */
    /* Projects */
    // "incremental": true,                              /* Enable incremental compilation */
    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
    // "tsBuildInfoFile": "./",                          /* Specify the folder for .tsbuildinfo incremental compilation files. */
    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects */
    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
    
    . . .
  }
}

this is default configuration provided to us. we can change the options in the above configuration. Also this default configuration works fine and now we can jump onto coding and check the output.

Writing and compiling the code.

class Person{
  private name:string; // in JS private fields are declared with # but in TS we have private keyword as well
  constructor( name:string){
    this.name=name;
  }
  private printName(){
    console.log(`name ${this.name}`)
  }
}

below is output in JS

"use strict";
class Person {
    constructor(name) {
        this.name = name;
    }
    printName() {
        console.log(`name ${this.name}`);
    }
}

with this we have successfully created a vanilla typescript project in our system.