Migrating a nodejs, webpack project from JavaScript to TypeScript

jo — Thu, 11 Aug 2022 13:35:00 +0000

Hi, I'm not used to writing blog posts but recently I was looking for ways to migrate my nodeJs project from Javascript to typescript. I realised there are not many articles for projects that uses webpack.This is my attempt to share my learnings in this topic.

Here are few simple steps:

Add tsconf.js file in the root of your project. Add following configuration to this file

{
    "compilerOptions": {
        "outDir": "./dist",
        "allowJs": true,
        "target": "es5"
    },
    "include": [
        "./src/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

npm install awesome-typescript-loader.

npm i awesome-typescript-loader

Add following to your webpack.config.js file

module{
rules:[{ test: /\.(t|j)sx?$/, use: { loader: 'awesome-typescript-loader' } },]

and

 resolve: {
        extensions: ['.ts', '.js'],
    },

Change the source file name from .js to .ts

Changing the file extension to .ts will highlight some type errors in your file. I would recommend going through a basic tutorial for typescript to understand why you are getting those type errors. And how to fix them.

Once you have fixed the highlighted errors in your source files run your build tool as you normally do.

DEV Community: jo

Migrating a nodejs, webpack project from JavaScript to TypeScript