Sunday, January 20, 2019

Setting up basic typescript project

Typescript is getting popularity day by day, it is basically a different version of Javascript and has more features as well as more properties of a Typed Language as opposed to the default behavior of the Javascript.

Here is a basic example of a function in typescript:

1
const add = (a: number, b: number) => a + b;

As you can see, the part of the code where we have declared a: number and b: number is not a pure Javascript rather, its a feature provided by Typescript and is very useful in a real sense.

Today we are going to configure a normal typescript project and for that, you need the following prerequisites:
  1. npx module installed globally 
  2. typescript module installed globally
  3. tslint module installed globally
For all the above 3 just type: npm install -g npx typescript tslint and it will install all the 3 modules. 
typescript comes with 2 executables namely: tsc and tsserver

tsc  is the typescript compiler that compiles the .ts files and converts them to pure JS files.
tsserver is basically the typescript server.
  1. First, we will create a config file for the typescript project, for that we will use the command:
    tsc --init (- in the folder where we want to start our typescript project.)
  2. This will generate a tsconfig.json file with the following content:

    1
    2
    3
    4
    5
    6
    7
    {
      "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "strict": true
      }
    }

  3. We are going to add some more options in this configuration, So after that, the tsconfig.json will look like:

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    {
      "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "strict": true,
        "outDir": "dist",
        "sourceMap": true,
      },
      "include": [
        "src/**/*"
      ],
      "exclude": [
        "node_modules",
        "**/*.spec.ts"
      ]
    }
    

  4. Now we will create a script to compile the .ts files and convert them to .js files. For that, we will take npm's help.
  5. For that, we will initiate the npm and add the script for the conversion.
  6. npm init -y will generate the default package.json with the basic setup. Just add these 2 sections in package.json:

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    .......
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "compile": "rimraf dist/ & tsc"
      },
      "devDependencies": {
        "rimraf": "^2.6.3",
        "typescript": "^3.2.2"
      },
      .......
      .......
    

  7. Now let us create a typescript file with .ts extension and then we will compile the .ts into .js.
  8. Here is a basic .ts file: src/index.ts

    1
    2
    3
    4
    5
    function helloWorld(word: string = "Ankur"): string {
        return `Hello ${word}`;
    }
    
    console.log(helloWorld("World"));
    

  9. Here is the folder structure:

  10. If you have node_modules folder skip this otherwise run:  npm install 
  11. After all is set up, run the command npm run compile (we are using the part of point 6, at line number 4)
  12. After this command, a folder named dist will get generated and it will look like this:


  13. Now you can run the file using node dist/index.js command.
The main purpose of this project is that we are going to write the code in typescript and then we are going to compile the same in pure javascript so that it can be run using the node js framework since node js does not understand the typescript.

The above code is available here.

We have a shortcut way as well to do all the tiring work by itself, using a generator of the Typescript project namely gts, which can be found https://github.com/google/ts-style.

For the shortcut here are the commands:
  1. npx gts init
  2. It will ask you whether or not to generate the package.json, press (y) and enter.
  3. It will generate the project with the following structure (with node_modules/), (I deleted it intentionally, since showing the structure is not possible with that folder.):

  4. This project will have all the basic settings up and ready with typescript settings that are being used by Google Node Js team.
  5. Write your personal code inside src/ and the scripts are mentioned in package.json that are available like:
    1. npm run fix - Will fix the inconsistent & messy code 
    2. npm run check - Will check the code with the guidelines mentioned in tsconfig.json and outputs the problem
    3. npm run clean - Will cleans the code with respect to linting errors, and all possible fixes.
    4. npm run compile - Will take your .ts code and builds it to .js files under build/
Note:
  • In case you use console.log in your code (in the project created by gts), you might get the error like this:

  • In this case, go to node_modules/gts/tsconfig-google.json and add "dom" in lib key (which is an array of strings in nature), finally, the option will look like this:  "lib": ["es2016", "dom"],
  • Come back to the main file and compile the project, you will not see the error.

That's it for typescript basic demo, meet you all soon, thanks and

Happy Coding :)

No comments:

Post a Comment