Type Script Start Your First Project

For starting a TypeScript project we have to follow some certain steps. At first we have to install it locally or globally:

For global installation

$ npm i typescript -g
# or , using yarn
$ yarn global add typescript

For local installation

$ npm i typescript --save-dev
# or , using yarn
$ yarn add typescript --dev

At first Create a directory

$ mkdir type-script-first-project
$ cd type-script-first-project/

For initialize any TypeScript project we can simply use --init command:

$ tsc --init

And when we run above command it will create a simple tsconfig.json file with containing complierOptions where many options are commented out.
For demonstration purpose we will remove other comment out section.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true
  }
}

Let we add another two necessary base configuration:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "outDir": "dist",
    "sourceMap": true
  }
}

With this, the JavaScript files that the TypeScript compiler outputs will be in a distfolder and sourcemaps will be generated.

In project root let create a src folder & inside src folder we will create a file with ts extension src/index.ts

$ mkdir src
$ cd src
$ touch index.ts

Inside index.ts now we write very simple TypeScript code.

function welcomeMessage(person: string) {
    return "Hello, " + person;
}
let user = "Faysal Ahmed";
document.body.innerHTML = welcomeMessage(user);

Now, we can compile by simply running tse command

$ tsc

And after running above command, our JavaScript and sourcemap files are created! Here’s the content of the compiled JavaScript:

// #dist/index.js
"use strict";
function welcomeMessage(person) {
    return "Hello, " + person;
}
var user = "Faysal Ahmed";
document.body.innerHTML = welcomeMessage(user);
//# sourceMappingURL=index.js.map

And it also generate #dist/index.js.map file.
This is very beginning of the creating of a TypeScript Project. It has really very powerful feature.
Basically i try to introduce just a starting point of starting a TypeScript project.