DEV Community 👩‍💻👨‍💻

jo
jo

Posted on

Migrating a nodejs, webpack project from JavaScript to TypeScript

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"
    ]
}
Enter fullscreen mode Exit fullscreen mode

npm install awesome-typescript-loader.

npm i awesome-typescript-loader
Enter fullscreen mode Exit fullscreen mode

Add following to your webpack.config.js file

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

Enter fullscreen mode Exit fullscreen mode

and

 resolve: {
        extensions: ['.ts', '.js'],
    },
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (1)

Collapse
 
joelbonetr profile image
JoelBonetR

Glad you jumped to writting posts! It may help some people out there, thank you! 😀

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.