Skip to main content

Setup from js to ts (no Babel)


1. Rename .js files to .ts​

You can rename the files one by one and resolve all the errors TypeScript gives you.

Or you can run this command in the src directory and all sub-directories.

for file in *.js; do mv "$file" "${file%.js}.ts"; done

install typescript

npm install --save-dev typescript

2. tsconfig.json​

This tsconfig file is configured for Node 12.

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "outDir": "./dist",
    "lib": ["es2019", "es2020.promise", "es2020.bigint", "es2020.string"],
    "forceConsistentCasingInFileNames": true,
    "module": "commonjs",
    "noImplicitAny": true,
    "strictNullChecks": true,
    "declaration": true,
    "target": "es2019",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "sourceMap": true
    // if you're using jsx:
    // "jsx": "react",
    // if importing Json via require, then to use import * config from "./config.json", add this:
    // "resolveJsonModule": true
  },
  "include": ["src/**/*", "declarations.d.ts"],
  "exclude": ["node_modules", "dist"]
}

If you are to use Node 14, please update these values:

{
  ...
"lib": ["es2020"],
"target": "es2020",
  ...
}

3. package.json scripts​

"scripts": {
    "clean": "rimraf dist",
    "test": "npm run build && . ./test/tdd-env-settings.sh && nyc mocha",
    "build": "rimraf dist && tsc",
    "prepare": "npm run build"
  ...
}

4. TS LINT​

We will use the tslint command line tool, in conjuction with the tslint-etc rules, to automatically detect and remove all unused imports in the directory, recursively. If you have a large project, the process can take some time to run. It is important to double-check all files for correctness once the fix process is complete.

Implementation​

  • Create tslint.json file on root folder and the below code.
{
  "extends": ["tslint-etc"],
  "rules": {
    "no-unused-declaration": true
  }
}

  • Run the code in terminal
npm install --save-dev tslint tslint-etc
  • Add lines in scripts in package.json
"lint": "npx tslint --project tsconfig.json",
"lint:fix": "npx tslint --fix --project tsconfig.json",
  • To find the lint error
npm run lint
  • To autofix the lint error
npm run lint:fix

Remove Babel​

Since we won't need babel anymore, make sure to remove the .babelrc, babel.config.json, and all babel depedencies in package.json.

Babel + TypeScript

1. Rename .js files to .ts​

Run this comman in the src directory and all sub-directories.

for file in *.js; do mv "$file" "${file%.js}.ts"; done

install typescript

npm install --save-dev typescript

2. Add typescript to Babel​

npm install --save-dev @babel/preset-typescript @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread

In your Babel config file (.babelrc or babel.config.js):

{
  "presets": ["@babel/typescript"],
  "plugins": ["@babel/proposal-class-properties", "@babel/proposal-object-rest-spread"]
}

Since Babel looks for .js files by default:

If you use Babel CLI, add --extensions '.ts' . So the build command in package.json becomes:

"scripts": {
  ...
  "build": "npm run clean && babel src --extensions '.ts' --out-dir dist "
}

If you use Webpack, add 'ts' to resolve.extensions array.

3. Add ‘check-types’ command​

In package.json:

"scripts": {
  ...
    "check-types": "tsc"
}

This command simply invokes the TypeScript compiler (tsc).

To configure TypeScript (and tsc), we need a tsconfig.json file in the root directory:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "lib": ["esnext", "es5", "es2015.promise"],
    "noImplicitAny": true,
    "strictNullChecks": true,
    "module": "commonjs",
    "declaration": true,
    "sourceMap": true,
    // Target latest version of ECMAScript.
    "target": "esnext",
    // Search under node_modules for non-relative imports.
    "moduleResolution": "node",
    // Process & infer types from .js files.
    "allowJs": true,
    // Don't emit; allow Babel to transform files.
    "noEmit": true,
    // Enable strictest settings like strictNullChecks & noImplicitAny.
    "strict": true,
    // Disallow features that require cross-file information for emit.
    "isolatedModules": true,
    // Import non-ES modules as default imports.
    "esModuleInterop": true
    // if you're using jsx:
    // "jsx": "react",
    // if importing Json via require, then to use import * config from "./config.json", add this:
    // "resolveJsonModule": true
  },
  "include": ["src/**/*", "declarations.d.ts"]
}

4. Change npm run test script to check types first​

"scripts": {
  "check-types": "tsc",
  "clean": "rimraf lib dist",
  "test": "npm run check-types && . ./test/tdd-env-settings.sh && nyc mocha",
  "build": "npm run clean && babel src --extensions '.ts' --out-dir dist "
  ...
}