Four steps from JavaScript to TypeScript

Transcript

1. 4 STEPS FROM
   JAVASCRIPT TO
   TYPESCRIPT
   @philnash
   

   View Slide

2. Phil Nash
   @philnash
   https://philna.sh
   [email protected]
   

   View Slide

3. 4 STEPS FROM
   JAVASCRIPT TO
   TYPESCRIPT
   @philnash
   

   View Slide

4. I
   💖 JAVASCRIPT
   @philnash
   

   View Slide

5. WHAT ABOUT
   TYPESCRIPT?
   @philnash
   

   View Slide

6. Modern JavaScript development
   •  Bigger projects
   •  Bigger teams
   •  More tools
   @philnash
   

   View Slide

7. Reasons to move to TypeScript
   •  Type safety
   •  Tooling
   •  Refactoring
   •  Confidence
   @philnash
   

   View Slide

8. Reasons not to move to TypeScript
   •  Learning curve
   •  Overhead
   •  "You don't need tests"
   •  New JS features
   @philnash
   

   View Slide

9. IT'S UP TO YOU AND
   YOUR TEAM
   @philnash
   

   View Slide

10. MOVE TO
    TYPESCRIPT
    @philnash
    

    View Slide

11. INTRODUCING THE
    DEMO APPLICATION
    @philnash
    

    View Slide

12. STEP 1:
    
    PAIR PROGRAM WITH
    TYPESCRIPT
    @philnash
    

    View Slide

13. I
    💖 VSCODE
    @philnash
    

    View Slide

14. TYPESCRIPT IS
    
    BUILT IN
    @philnash
    

    View Slide

15. DEMO
    @philnash
    

    View Slide

16. Downsides
    •  It's only in the editor
    •  Native in VSCode and Atom
    •  TypeScript comments in a JS codebase
    @philnash
    

    View Slide

17. RECOMMENDATION:
    TURN IT ON
    GLOBALLY IN YOUR
    EDITOR
    @philnash
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

23. Update package.json
    {
    "main": "dist/index.js",
    "scripts": {
    "build": "tsc",
    "watch": "tsc --watch"
    }
    }
    01.
    02.
    03.
    04.
    05.
    06.
    07.
    @philnash
    

    View Slide

24. DEMO
    @philnash
    

    View Slide

25. STEP 3: CHECK
    JAVASCRIPT WITH
    TYPESCRIPT
    @philnash
    

    View Slide

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

    View Slide

27. Types for Node.js
    npm install @types/node --save-dev
    @philnash
    

    View Slide

28. DEFINITELY TYPED
    @philnash
    

    View Slide

29. DEMO
    @philnash
    

    View Slide

30. STOP THERE?
    @philnash
    

    View Slide

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
    

    View Slide

32. BE LIKE WEBPACK
    @philnash
    

    View Slide

33. tsconfig.json
    {
    "compilerOptions": {
    // "outDir": "./dist",
    "noEmit": true,
    ...
    }
    }
    01.
    02.
    03.
    04.
    05.
    06.
    07.
    @philnash
    

    View Slide

34. JSDOC:
    
    TYPESCRIPT
    WITHOUT WRITING
    TYPESCRIPT
    @philnash
    

    View Slide

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

    View Slide

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

    View Slide

37. DEMO
    @philnash
    

    View Slide

38. STEP 4:
    
    MOVING TO
    TYPESCRIPT
    @philnash
    

    View Slide

39. 🎉 FINALLY
    🎉
    @philnash
    

    View Slide

40. .js => .ts
    @philnash
    

    View Slide

41. DEMO
    @philnash
    

    View Slide

42. STRICT
    @philnash
    

    View Slide

43. Strict tsconfig options
    •  noImplicitAny
    •  noImplicitThis
    •  strictBindCallApply
    •  strictNullChecks
    •  strictFunctionTypes
    •  strictPropertyInitialization
    •  alwaysStrict
    @philnash
    

    View Slide

44. Strict tsconfig options
    •  strict
    @philnash
    

    View Slide

45. DEMO
    @philnash
    

    View Slide

46. FULL STRICT MODE
    IS NOT REQUIRED
    @philnash
    

    View Slide

47. BUT IT CAN BE A
    GOAL
    @philnash
    

    View Slide

48. MORE TYPES
    @philnash
    

    View Slide

49. DEMO
    @philnash
    

    View Slide

50. LIBRARY
    DEVELOPMENT
    @philnash
    

    View Slide

51. Library development
    {
    "compilerOptions": {
    "declaration": true,
    ...
    }
    }
    01.
    02.
    03.
    04.
    05.
    06.
    @philnash
    

    View Slide

52. WE MADE IT!
    @philnash
    

    View Slide

53. STEP 1:
    
    PAIR PROGRAM WITH
    TYPESCRIPT
    @philnash
    

    View Slide

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

    View Slide

55. STEP 3:
    
    CHECK JAVASCRIPT
    WITH TYPESCRIPT
    @philnash
    

    View Slide

56. STEP 4:
    
    MOVE TO
    TYPESCRIPT
    @philnash
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

60. Thanks!
    @philnash
    https://philna.sh
    [email protected]
    

    View Slide