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

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