Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Four steps from JavaScript to TypeScript

Four steps from JavaScript to TypeScript

You've got a JavaScript project and you're coming round to the idea of TypeScript. You like the idea of static typing and improved IDE experience. It is finally time to make the move, but how do you go about it? Is this going to be a big and inconvenient change to the codebase?

What if I said you could take it step by step? What If I said you could stop halfway and still gain a lot?

Over this talk we'll take an existing JavaScript project and move it to TypeScript, noting the new benefits we get at each step of the transition. By the end you'll have a blueprint for moving your project to TypeScript and be confident that you can go as far as you and your team needs to.

--

Links:

The demo repo: https://github.com/philnash/four-steps-from-javascript-to-typescript

Move your project to TypeScript at your own pace
Dominik Kundel — https://www.twilio.com/blog/move-to-typescript

TypeScript without TypeScript — JSDoc Superpowers
Stefan Baumgartner — https://fettblog.eu/typescript-jsdoc-superpowers/

Definitely Typed: The Movie
John Reilly — https://blog.johnnyreilly.com/2019/10/definitely-typed-movie.html

The TypeScript Tax
Eric Elliott — https://medium.com/javascript-scene/the-typescript-tax-132ff4cb175b

JS Projects Utilizing TypeScript
TypeScript docs — https://www.typescriptlang.org/docs/handbook/intro-to-js-ts.html

Phil Nash

July 29, 2021
Tweet

More Decks by Phil Nash

Other Decks in Programming

Transcript

  1. Reasons to move to TypeScript •  Type safety •  Tooling

    •  Refactoring •  Confidence @philnash
  2. Reasons not to move to TypeScript •  Learning curve •

     Overhead •  "You don't need tests" •  New JS features @philnash
  3. Downsides •  It's only in the editor •  Native in

    VSCode and Atom •  TypeScript comments in a JS codebase @philnash
  4. tsconfig.json { "compilerOptions": { "target": "es5", "module": "commonjs", "esModuleInterop": true,

    "skipLibCheck": true, "forceConsistentCasingInFileNames": true } } 01. 02. 03. 04. 05. 06. 07. 08. 09. @philnash
  5. tsconfig.json { "compilerOptions": { "target": "esnext", "module": "commonjs", "allowJS": true,

    "checkJS": false, "outDir": "./dist", "rootDir": "./src", "strict": false, ... } } 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. @philnash
  6. Update package.json { "main": "dist/index.js", "scripts": { "build": "tsc", "watch":

    "tsc --watch" } } 01. 02. 03. 04. 05. 06. 07. @philnash
  7. tsconfig.json { "compilerOptions": { "target": "esnext", "module": "commonjs", "allowJS": true,

    "checkJS": true, ... } } 01. 02. 03. 04. 05. 06. 07. 08. 09. @philnash
  8. Compiling JavaScript with TypeScript •  TypeScript is type checking the

    JavaScript •  You can add further type annotations with JSDoc •  You don't need to output anything @philnash
  9. JSDoc /** * @param {number} a * @param {number} b

    * @returns {number} */ function add(a, b) { return a + b; } 01. 02. 03. 04. 05. 06. @philnash
  10. Strict tsconfig options •  noImplicitAny •  noImplicitThis •  strictBindCallApply •

     strictNullChecks •  strictFunctionTypes •  strictPropertyInitialization •  alwaysStrict @philnash
  11. Resources Move your project to TypeScript at your own pace

    Dominik Kundel — https://www.twilio.com/blog/move-to-typescript TypeScript without TypeScript — JSDoc Superpowers Stefan Baumgartner — https://fettblog.eu/typescript-jsdoc-superpowers/ JS Projects Utilizing TypeScript TypeScript docs — https://www.typescriptlang.org/docs/handbook/intro-to-js-ts.html @philnash
  12. Other links Definitely Typed: The Movie John Reilly — https://blog.johnnyreilly.com/2019/10/definitely-typed-movie.html

    The TypeScript Tax Eric Elliott — https://medium.com/javascript-scene/the-typescript-tax-132ff4cb175b @philnash