Migrate to typescript

To add typescript first you need to install the package

npm i typescript -g

Run tsc -v to see the typescript version

Add configuration file tsconfig.json to root folder of the project

{
    "compilerOptions": {
      "outDir": "./built",
      "allowJs": true,
      "target": "es5"
    },
    "include": ["./src/**/*", "./tests/**/*"]
}

In this example the build includes src & tests folder, support commonjs and allow js files

Run tsc from console, after few seconds you will see the output files under built folder

Remove this folder from git by adding built to .gitignore file.

The built folder also annoying you on search, navigation etc.
Its better to remove it from vs code by adding

 "files.exclude": {
        "built/": true
    }

to .vscode/settings.json file

Now, you can start convert your files gradually:

Take one js file from your project & change the extension to ts (or tsx for jsx).

Add ts syntax to the file to be sure you running right. For example:

const testFunc = async (name) => {

to:

const testFunc = async (name: string) => {

run tsc to see the output file

Under development its better to run watcher that convert the ts files on-the-fly.

In vs code press CTRL+SHIFT+B to choose one of the option:
tsc: build and tsc: watch

You can watch the code and run in under built folder.

For build/tests configuration change the path to built in package.json file.

Adding serverless support

If you are using sls to deploy the project Add this plugin to the project:

Serverless Typescripts plugin

Put - serverless-plugin-typescript at the top of plugins section: The order matter!

One disadvantage for putting rendered js files on aws lambda its that you cant edit the code on Lambda Code source section.

Converting Mocha framework to typescript

install npm i --save-dev @types/mocha

Add for each test file import 'mocha'; so typescript will know describe, it etc.

ESLint

You will have to run npm init @eslint/config again for supporting typescript

Example of config file .eslintrc.json:

{
    "env": {
        "es2021": true,
        "node": true
    },
    "extends": [
        "airbnb-base"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
        "linebreak-style": "off",
        "import/extensions": "off",
        "import/no-unresolved": "off",
        "comma-dangle": "off",
        "indent": ["error", 4],
        "no-plusplus": "off",
        "no-promise-executor-return": "off",
        "no-await-in-loop": "off",
        "import/prefer-default-export": "off",
        "lines-between-class-members": "off",
        "max-len": ["error", 150]
    }
}

And adding to package.json:

"scripts": {
    "lint": "eslint src/**/*.ts"
  }

Running npm run lint should execute the eslint with typescript support.

Debugging typescript

Very useful tool is ts-node

npm i -D ts-node

Running ts-node index.ts will compile it on the fly & debugging act like regular javaScript

Copy Non JS files

tsc will copy only js/ts files so if your project includes other files (xml, json etc.) you need to explicitly copy it:

you can use npm for copy files:

npm i -D copyfiles

and adding post build stage:

"scripts": {
    "build": "tsc",
    "copyNonJsFiles": "copyfiles --error ./src/**/*.xml ./dist",
    "postbuild": "npm run copyNonJsFiles",
  }

postbuild will run automatically after tsc