Four steps from JavaScript to TypeScript

8ec1383b240b5ba15ffb9743fceb3c0e?s=47 Phil Nash
October 01, 2020

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

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

October 01, 2020
Tweet

Transcript

  1. 4 STEPS FROM JAVASCRIPT TO TYPESCRIPT @philnash

  2. Phil Nash @philnash https://philna.sh philnash@twilio.com

  3. 4 STEPS FROM JAVASCRIPT TO TYPESCRIPT @philnash

  4. I JAVASCRIPT @philnash

  5. WHAT ABOUT TYPESCRIPT? @philnash

  6. Modern JavaScript development • Bigger projects • Bigger teams •

    More tools @philnash
  7. Reasons to move to TypeScript • Type safety • Tooling

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

    Overhead • "You don't need tests" • New JS features @philnash
  9. IT'S UP TO YOU AND YOUR TEAM @philnash

  10. MOVE TO TYPESCRIPT @philnash

  11. INTRODUCING THE DEMO APPLICATION @philnash

  12. STEP 1: PAIR PROGRAM WITH TYPESCRIPT @philnash

  13. I VSCODE @philnash

  14. TYPESCRIPT IS BUILT IN @philnash

  15. DEMO @philnash

  16. Downsides • It's only in the editor • Native in

    VSCode and Atom • TypeScript comments in a JS codebase @philnash
  17. RECOMMENDATION: TURN IT ON GLOBALLY IN YOUR EDITOR @philnash

  18. STEP 2: GET STARTED WITH THE TYPESCRIPT COMPILER @philnash

  19. Time to install TypeScript npm install typescript --save-dev @philnash

  20. Initialise the project npx tsc --init @philnash

  21. tsconfig.json { "compilerOptions": { "target": "es5", "module": "commonjs", "esModuleInterop": true,

    "skipLibCheck": true, "forceConsistentCasingInFileNames": true } } 01. 02. 03. 04. 05. 06. 07. 08. 09. @philnash
  22. 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
  23. Update package.json { "main": "dist/index.js", "scripts": { "build": "tsc", "watch":

    "tsc --watch" } } 01. 02. 03. 04. 05. 06. 07. @philnash
  24. DEMO @philnash

  25. STEP 3: CHECK JAVASCRIPT WITH TYPESCRIPT @philnash

  26. tsconfig.json { "compilerOptions": { "target": "esnext", "module": "commonjs", "allowJS": true,

    "checkJS": true, ... } } 01. 02. 03. 04. 05. 06. 07. 08. 09. @philnash
  27. Types for Node.js npm install @types/node --save-dev @philnash

  28. DEFINITELY TYPED @philnash

  29. DEMO @philnash

  30. STOP THERE? @philnash

  31. 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
  32. BE LIKE WEBPACK @philnash

  33. tsconfig.json { "compilerOptions": { // "outDir": "./dist", "noEmit": true, ...

    } } 01. 02. 03. 04. 05. 06. 07. @philnash
  34. JSDOC: TYPESCRIPT WITHOUT WRITING TYPESCRIPT @philnash

  35. JSDoc /** * @type string */ let foo; 01. 02.

    03. 04. @philnash
  36. JSDoc /** * @param {number} a * @param {number} b

    * @returns {number} */ function add(a, b) { return a + b; } 01. 02. 03. 04. 05. 06. @philnash
  37. DEMO @philnash

  38. STEP 4: MOVING TO TYPESCRIPT @philnash

  39. FINALLY @philnash

  40. .js => .ts @philnash

  41. DEMO @philnash

  42. STRICT @philnash

  43. Strict tsconfig options • noImplicitAny • noImplicitThis • strictBindCallApply •

    strictNullChecks • strictFunctionTypes • strictPropertyInitialization • alwaysStrict @philnash
  44. Strict tsconfig options • strict @philnash

  45. DEMO @philnash

  46. FULL STRICT MODE IS NOT REQUIRED @philnash

  47. BUT IT CAN BE A GOAL @philnash

  48. MORE TYPES @philnash

  49. DEMO @philnash

  50. LIBRARY DEVELOPMENT @philnash

  51. Library development { "compilerOptions": { "declaration": true, ... } }

    01. 02. 03. 04. 05. 06. @philnash
  52. WE MADE IT! @philnash

  53. STEP 1: PAIR PROGRAM WITH TYPESCRIPT @philnash

  54. STEP 2: GET STARTED WITH THE TYPESCRIPT COMPILER @philnash

  55. STEP 3: CHECK JAVASCRIPT WITH TYPESCRIPT @philnash

  56. STEP 4: MOVE TO TYPESCRIPT @philnash

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

  58. 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
  59. 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
  60. Thanks! @philnash https://philna.sh philnash@twilio.com