Why move to TypeScript?

Type Safety

Tooling

Confidence

Why not move to TypeScript?

It's up to you and your team

Let's move to TypeScript

Introducing the demo application

Step 1

Pair program with TypeScript

Demo

Recommendation

Turn on TypeScript checking globally

Step 2

Introduce the TypeScript compiler

tsconfig.json

{
  "target": "es2016",
  "module": "commonjs",
  "strict": true,
  "esModuleInterop": true,
  "skipLibCheck": true,
  "forceConsistentCasingInFileNames": true
}

Update tsconfig.json

  {
-   "target": "es2016",
+   "target": "esnext",
    "module": "commonjs",
-   "strict": true,
+   "strict": false,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
+   "allowJS": true,
+   "checkJS": false,
+   "outDir": "./dist",
+   "rootDir": "./src"
  }

Update package.json

  {
-   "main": "./src/cli.js",
+   "main": "./dist/cli.js",
    "scripts": {
+     "build": "tsc",
+     "watch": "tsc --watch"
    },
  }

Demo

Step 3

Check JavaScript with TypeScript

Update tsconfig.json again

  {
    "target": "esnext",
    "module": "commonjs",
    "strict": false,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "allowJS": true,
-   "checkJS": false,
+   "checkJS": true,
    "outDir": "./dist",
    "rootDir": "./src"
  }

Demo

Stop there?

Compiling JS with TS

• TypeScript is type checking the JavaScript
• You can add further type annotations with JSDoc
• You don't need TypeScript to output anything

Webpack and Svelte

TypeScript checks without output

  {
    "compilerOptions": {
+//   "outDir": "./dist",
+     "noEmit": true,
      ...
    }
  }

JSDoc

TypeScript without writing TypeScript

JSDoc

/**
 * @type string
 */
let searchTerm;
          

JSDoc

/**
 * @param {number} a
 * @param {number} b
 * @returns {number}
 */
function add(a, b) {
  return a + b;
}

Demo

Step 4

Move to TypeScript

Incrementally

Change .js to .ts

Change from require to import

Demo

Incrementally

Add types

Enable strict flags

We made it!

Resources

Resources