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:
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
Top comments (0)