Migrate to typescript
Tags: javascript, typescript, vscode, serverless
Published: 2022-04-23 17:41:50

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] (https://www.serverless.com/plugins/serverless-plugin-typescript)

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