It's time to migrate | JS () => TS

It's time to migrate | JS () => TS

TypeScript adoption it's been a reality in the last years. This presentation is going to be an explanation on how we can take advantage of TypeScript compiler to have a smooth migration from JavaScript to TypeScript.

1bbe893cbb494c230fe608b3783ac7bd?s=128

Marco Talento

February 02, 2019
Tweet

Transcript

  1. It's time to migrate! Marco Talento @Talento90

  2. TypeScript (JavaScript that scales)

  3. TypeScript • TypeScript is a typed superset of JavaScript that

    compiles to plain JavaScript. • Includes all features of ES6 and much more: types, interfaces, generics, etc... TypeScript ES6 ES5
  4. How to "TypeScript" 1. Install TypeScript and declarations (If necessary):

    ◦ npm install --save-dev typescript ◦ npm install --save-dev @types/node 2. Create file index.ts 3. Compile using the command line: node_modules/.bin/tsc index.ts --target es6 4. Run the result: node index.js
  5. TypeScript (index.ts)

  6. JavaScript (index.js)

  7. Declaration Files

  8. Declaration Files • Declaration files describe a library written in

    JavaScript (methods, properties) • Provides intellisense and module typification • Extra confidence when updating libraries • Declaration files are suffixed by “.d.ts” • Install external declaration files using npm: ◦ npm install @types/koa --save-dev
  9. None
  10. Developer Experience

  11. Types Prevent Bugs

  12. None
  13. None
  14. Refactor Code

  15. None
  16. IntelliSense

  17. None
  18. Migration Journey

  19. Migration Goal https://github.com/Talento90/js2ts-demo

  20. Migration Plan 1. Install TypeScript (npm i --save-dev) 2. Install

    declarations (npm i --save-dev @types/node @types/hapi) 3. Setup tsconfig.json (node_modules/.bin/tsc --init) ◦ allowJs - Allow javascript files to be compiled ◦ checkJs - Report errors in .js files (optional) 4. Start rename *.js file to *.ts 5. Fix errors and back to step 4
  21. Migration Time (DEMO)

  22. Recap

  23. Convert JS files to TS and enable AllowJS

  24. Enable CheckJS to report JavaScript Errors

  25. Enable Strict Type Checking Options

  26. Thank you! @Talento90 marcotalento90@gmail.com