DEV Community

Ronak Tanwar
Ronak Tanwar

Posted on

Typescript setup with Node.js

#typescript #javascript #node #typescriptsetup

Before setting up TypeScript, it's important to understand one key concept: TypeScript does not run directly. Instead, TypeScript code is first converted into JavaScript, and then the JavaScript code is executed.

And interestingly, browsers do not understand TypeScript natively. Browsers can only execute JavaScript, so the TypeScript compiler translates your .ts files into .js files that the browser can understand and run.

Now lets see how to setup the typescript with node :-

1. Initialize the node project using any package manager -->

npm init -y
Enter fullscreen mode Exit fullscreen mode

NOTE :- You can use any other package manger like bun, yarn etc.

2. Install the dev Dependencies -->

npm install -D typescript nodemon @types/node @types/express ts-node
Enter fullscreen mode Exit fullscreen mode

Now lets understand the above command:-
-D or --save-dev installs packages as development dependencies because hese packages are needed while developing the application but are not required when running the production build.
npm install -D typescript installs the typescript compiler that Converts TypeScript (.ts) files into JavaScript (.js) files and also Performs type checking to catch errors during development.
@types/node and @types/express are the type definitions for node and express framework. They provide type information for these built-in features, enabling:
Autocomplete
Type checking
Better editor support
ts-node Allows us to run TypeScript files directly without manually compiling them first.

3. Add a tsconfig.json file in your project -->

Either add it manually :-
create a file as tsconfig.json and paste the following code snippet.

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs",
        "outDir": "./dist",
        "rootDir": "./src",
        "strict": true,
        "esModuleInterop": true
    },
    "include": ["src/*"],
    "exclude": ["node_modules"] 
}
Enter fullscreen mode Exit fullscreen mode

Or run this command :-

tsc --init
Enter fullscreen mode Exit fullscreen mode

Now lets understand few things here :-
typescript explanation

outDirspecifies the folder where the compiled JavaScript files will be placed.
rootDir pecifies the root folder containing your TypeScript source code.
And no need to keep the same names of outDir and rootDir, these all settings can be changed according to developers thinking.

Note :- make sure you have created two folders same as you have given inside outDirand rootDir.

4. make few changes inside the package.json file -->

Change the value of main :-

"main":"dist/index.js"
Enter fullscreen mode Exit fullscreen mode

Your index.ts(the main entry file) will be compiled into index.js and placed in the outDirdirectory (./dist in this case).

update the script :-
paste the following scripts,

"scripts": {
    "start": "tsc && nodemon dist/index.js",
    "dev": "nodemon --exec \"npm run start\" --ext ts --watch src"
  }
Enter fullscreen mode Exit fullscreen mode

start is used for production. It compiles the TypeScript code and then executes the generated index.js file.

dev is used for development. It watches for changes to .ts files in the src directory and automatically reruns the application (via the start script) whenever changes are detected.

Finally

after doing all this stuff we are ready to start our project using typescript.

Top comments (0)