Setting up node project with TypeScript

Tram Ho

Introduction

  • As we all know JS is a type of [dynamic type](https://en.wikipedia.org/wiki/Programming_language#Static_versus_dynamic_typing) .
  • Typescript makes it possible to read and code JS as static type instead of dynamic type .
  • This article focuses on installing a project with typescript.

Let’s start

  1. Initializing an Npm project
  • Let’s quickly create the NodeJS project:
  1. Installing Dependencies
  • We have initialized the project. The next section needs to install the dependent packages to be able to run typescript
  • The -D option stands for: --save-dev .
  • Next install the express framework:
  • The second command is on Express Express settings. We need this package because TypeScript and Express are separate packages, so there’s no way for Typescript know the types of classs in Express.
  1. Configuring TypeScript
  • Typescript uses the tsconfig.json file to configure the compiler for the project. So we initialize the tsconfig.json file tsconfig.json same level as the package.json file with the following content:

  • Let’s take a look at some of these options and what they do:
    • module : Specifies the module initialization method. Node using commonjs .
    • target : Level of output (here is es6)
    • moduleResolution : helps the compiler figure out where the import will reference. The node value -> mimics the node ‘s module resolution mechanism.
    • outDir : Where to save the .js file after being compiled. We save in the dist folder.
  • Note : You can do this automatically with the command: tsc --init ?
  • Next we will configure Typescript linting for the project. Run the following command to initialize tslint.json file:

  • Open the tslint.json file and add the no-console as tslint.json :

  • By default, Typescript linter will block the console , we need to add the same rule as above.
  1. Updating the Package.json file
  • Let’s create the start script to help us compile the Typescript code Typescript a .js file and run them. Update package.json file as below:

  • We have updated the main path. And create a start script: start tsc first and then run the node command. This allows us to precompile and run the result after compiling with the node .
  1. Setting up the folder structure
  • We will create the src folder at the same level as the package.json file and create an app.ts file inside it as app.ts :

  • By this time you should have the following directory structure:

  1. Create and running a basic Express Server
  • We have configured Typescript and Typescript linter, next we will build Node Express Server. With the content in the app.ts file as below.

  • The code above creates a simple Node server listening on port 3000. Let’s run the application with the following command.

  • When the command completes, you should see the server message running on port 3000:

  • And the directory structure will look like this (the dist folder is “pretty” out with the files inside):

  • You can also access local with the link: localhost:3000 .

  • If you want, you can also open the dist/app.js file to see the translated version of Typescript code. ?
  • Nice So we have successfully setup the Node project using Typescript!

Conclusion

  • Thank you for watching here and wish you:

Happy coding with Typescript

Share the news now

Source : Viblo