Previously I use Babel Javascript to convert my javascript to ECMA2015. I like to program in object oriented because I learned my first programming language in C/C++ and Java.
Doing procedural language like C was much easier vs object oriented Java. But in the long run, I noticed that coding in object oriented is much easier to maintain.
Steps to Convert Javascript to TypeScript
Install TypeScript
1 |
npm install -g typescript |
-g to make it global so all your JavaScript programs can be migrated to TypeScript.
Create tsconfig.build.json, tsconfig.json and tslint.json
At your root project folder run the below command.
1 |
tsc --init |
I edited my tsconfig.json as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
{ "compilerOptions": { "target": "es2017", "module": "commonjs", "lib": [ "dom", "dom.iterable", "esnext"], "rootDir": ".", "moduleResolution": "node", "resolveJsonModule": true, "removeComments": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "allowSyntheticDefaultImports": true, "types": ["node", "mocha", "chai"], "typeRoots": ["node_modules/@types", "src/types"], "jsx": "react" }, "exclude": ["node_modules", "dist", "src/admin"], "include": [ "src/**/*.ts", "src/**/*.json"] } |
I added manually tsconfig.build.json and tslint.json
1 2 3 4 |
{ "extends": "./tsconfig.json", "exclude": ["node_modules", "test", "dist", "**/*spec.ts"] } |
tslint.json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
{ "defaultSeverity": "error", "extends": [ "tslint:recommended" ], "jsRules": { "no-unused-expression": true }, "rules": { "quotemark": [ true, "double" ], "member-access": [ false ], "ordered-imports": [ false ], "max-line-length": [ true, 150 ], "member-ordering": [ false ], "interface-name": [ false ], "arrow-parens": false, "object-literal-sort-keys": false }, "rulesDirectory": [] } |
Change Your Existing Files Extension from .js to .ts


Amend Coding T0 Follows TypeScript
Below are few examples TypeScript coding standard that you must follow.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
#1 - require to import const Humanoid = require("./humanoid/index.js"); //change require to import & remove file extension import {Humanoid} from "./humanoid/index"; #2 - add export in front of class and remove module.exports export class Humanoid extends HumanoidReqHandler //remove all line that have module.exports module.exports = Humanoid; //delete this line #3 - declare all global variables inside a class as class variables this.taskName = "something"; //then can call this.taskName inside your class after declare the variable name protected taskName: string; //#4 - declare abstract method by adding keyword abstract //example of javascript - abstract method if(this._execute === undefined){ throw new Error("Abstract method _execute()"); } //put abstract in front of class keyword abstract class Task{ constructor(){} abstract _execute() : any; } //#5 - use import * as something from 'somewhere' //if error class name .default is not a function decla //example import m from 'moment'; TypeError: moment_1.default is not a function //change to import * as m from 'moment'; |
If you Find below error, add return true at main async function.
1 2 3 4 5 |
(async function() { console.log('start program'); console.log('end program'); return true; //add return true to solve error }()); |
Besides, you can use TypeScript linter @ tslint (that was set up early) to fix any coding that doesn’t follow TypeScript standard. TypeScript standard is more strict vs JavaScript.
Example of tslint verbose message:

Run Unit Test
I use mocha to do unit test.
1 |
npm install --save-dev @types/mocha |
At package.json, add new script command
1 2 3 4 |
"scripts":{ ... //other commands "test-filename": "mocha -r ts-node/register" }, |
Example if you want to run one individual unit test.
1 |
npm run test-filename ./-- -g "./src/lib/utils/date-timestamp.test.ts" |
If you found Error Cannot find module ‘ts-node/register’
Solution: save ts-node locally as develepment dependency.
1 |
npm install ts-node --save-dev |
Run TypeScript Application
At the terminal or console, type
1 2 3 4 |
ts-node path-to-your-main-file //example ts-node ./src/main.ts |
Conclusion
Even though it takes time to convert from babel javascript into typescript but in the long run it is easier to understand the code and easier to maintain the code.
Besides, you just need to install ts-node and its linter is very good in displaying possible errors.
Benefits of using TypeScript
- Easy debugging – Typescript shows directly line that throws an error
- Strong type – any mismatch of variable will be highlighted by ts-lint
- Less transpilation time – no need to compile like babel. If you have lots of .js files, it takes time to transpile it
- Support better object oriented – it supports abstract, protected, private methods and variables.