Start TypeScript Leaving JavaScript as JS

https://jsconf.jp/2019/talk/ginpei-takanashi

Transcript

1. Ginpei.dev By Ginpei Takanashi https://Ginpei.dev Start TypeScript . Leaving JavaScript as JS JSConf JP December 1st 2019
2. Ginpei.dev • This slide is designed for presentation. PDF would not make sence. • I’m preparing an article for it. Stay tuend! • このスライドはプレゼン用です。PDFだけだとわかりづらいと 思います。 • 記事用意してるのでお待ちくださいませ。 ⚠️ Caution ご注意 ⚠️
3. Ginpei.dev Target Individual Job AIに支配される人達のイラスト | かわいいフリー素材集 いらすとや https://www.irasutoya.com/2016/08/ai.html オフィスのイラスト | かわいいフリー素材集 いらすとや https://www.irasutoya.com/2014/05/blog-post_6681.html 不良集団のイラスト | かわいいフリー素材集 いらすとや https://www.irasutoya.com/2019/07/blog-post_37.html 通帳を見て青ざめる人のイラスト（男性） | かわいいフリー素材集 いらすとや https://www.irasutoya.com/2017/08/blog-post_880.html https://github.com/remojansen/logo.ts Target
4. Ginpei.dev /** * @param {Size} size */ function setSize(size) {} /** @type {string | null} */ let id = null; /** * @typedef {{ * height: number; * width: number; * }} Size */ Agenda • Add comments to declare types in JS files • TYPE IS AWESOME o Improves your coding speed o Supports your refactoring • Use `tsc` as a type linter o With `--checkJs` option • Less cost than converting JS to TS • Individual usage possible
5. Ginpei.dev I’m Ginpei / ギンペイです From Vancouver, Canada Love JavaScript & JapaneseSushi 世界地図のイラスト | かわいいフリー素材集 いらすとや https://www.irasutoya.com/2013/02/blog-post_8574.html
6. How TypeScript is AWESOME https://www.instagram.com/p/BK7xJ8Dhca-/
7. Ginpei.dev • TypeScript is superset of JavaScript • TypeScript has types How TypeScript is AWESOME
8. Ginpei.dev Syntax hierarchy TypeScript JavaScript JSON
9. Ginpei.dev function greeter(person) { return "Hello, " + person; } let user = "Jane User"; document.body.textContent = greeter(user); JavaScript is-a TypeScript Via TypeScript in 5 minutes · TypeScript https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
10. Ginpei.dev function greeter(person: string) { return "Hello, " + person; } let user = "Jane User"; document.body.textContent = greeter(user); Types Via TypeScript in 5 minutes · TypeScript https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
11. Ginpei.dev However…
12. When TypeScript does not work https://www.instagram.com/p/_QrC5oicoa/
13. Ginpei.dev In some cases, its tough to add TS step into the current bundler Traditional Long-life Build System tsc 本能寺のイラスト | かわいいフリー素材集 いらすとや https://www.irasutoya.com/2017/01/blog-post_0.html 鹿に鹿せんべいを上げる人のイラスト | かわいいフリー素材集 いらすとや https://www.irasutoya.com/2018/10/blog-post_31.html
14. Ginpei.dev In some cases, its tough to add TS step into the current bundler 本能寺の変のイラスト | かわいいフリー素材集 いらすとや https://www.irasutoya.com/2017/01/blog-post_16.html 鹿に襲われる人のイラスト | かわいいフリー素材集 いらすとや https://www.irasutoya.com/2018/10/blog-post_38.html
15. Ginpei.dev On the other hand, team may feel uncomfortable with TypeScript いらすとや https://www.irasutoya.com/2014/10/blog-post_89.html https://www.irasutoya.com/2014/10/blog-post_35.html https://www.irasutoya.com/2017/08/blog-post_915.html https://www.irasutoya.com/2018/06/crt.html https://www.irasutoya.com/2014/04/blog-post_7628.html remojansen/logo.ts https://github.com/remojansen/logo.ts
16. Ginpei.dev On the other hand, team may feel uncomfortable with TypeScript いらすとや https://www.irasutoya.com/2014/10/blog-post_89.html https://www.irasutoya.com/2014/10/blog-post_35.html https://www.irasutoya.com/2017/08/blog-post_915.html https://www.irasutoya.com/2018/06/crt.html https://www.irasutoya.com/2014/04/blog-post_7628.html remojansen/logo.ts https://github.com/remojansen/logo.ts
17. Ginpei.dev Even if there are no build steps FFFTP Project Top Page - OSDN https://osdn.net/projects/ffftp/ 田舎の村のイラスト（過疎） | かわいいフリー素材集 いらすとや https://www.irasutoya.com/2017/06/blog-post_392.html
18. Ginpei.dev OK no worries, Typed-JavaScript is here!!! /** * @param {Size} size */ function setSize(size) {} /** @type {string | null} */ let id = null; /** * @typedef {{ * height: number; * width: number; * }} Size */
19. Thank Buddha we have Typed- JavaScript https://www.instagram.com/p/BG8cTclick8/
20. Ginpei.dev • Typed-JavaScript is definitely JavaScript • Typed-JavaScript has types Typed-JavaScript is AWESOME
21. Ginpei.dev TypeScript vs Typed-JavaScript function setSize(size: Size) {} let id: string | null = null; let Size = { height: number; width: number; } /** * @param {Size} size */ function setSize(size) {} /** @type {string | null} */ let id = null; /** * @typedef {{ * height: number; * width: number; * }} Size */
22. Ginpei.dev You could start typing alone $ npm install typescript --global $ npx tsc
23. Ginpei.dev /** * @param {Size} size */ function setSize(size) {} /** @type {string | null} */ let id = null; /** * @typedef {{ * height: number; * width: number; * }} Size */ Typed-JavaScript is definitely JavaScript
24. Ginpei.dev Static validation
25. Ginpei.dev Compiler shows errors
26. Ginpei.dev setSize({ height: 123, width: 234, }); Guess parameter: number?
27. Ginpei.dev setSize({ height: 'auto', width: '234px', }); Guess parameter: CSS props?
28. Ginpei.dev setSize({ height: { value: 123, unit: 'px' }, width: { value: 234, unit: 'px' }, }); Guess parameter: complex object?
29. Ginpei.dev Static validation: in terminal
30. Ginpei.dev Static validation: in editor
31. Ginpei.dev Powerful suggestions within editor
32. Ginpei.dev Suggesting properties
33. Ginpei.dev Find correct props
34. Ginpei.dev Identifying arguments
35. Ginpei.dev Strong refactoring support
36. Ginpei.dev const book = { auther: 'Ginpei Takanashi', name: 'JavaScript for Adélie Penguins', publishedAt: new Date('2019/12/01'), }; Will you be satisfied by this code?
37. Ginpei.dev const book = { auther: 'Ginpei Takanashi', name: 'JavaScript for Adélie Penguins', publishedAt: new Date('2019/12/01'), }; Do you want to correct typo?
38. Ginpei.dev const book = { auther: 'Ginpei Takanashi', name: 'JavaScript for Adélie Penguins', publishedAt: new Date('2019/12/01'), }; Do you want to rename better?
39. Ginpei.dev const book = { auther: 'Ginpei Takanashi', name: 'JavaScript for Adélie Penguins', publishedAt: new Date('2019/12/01'), }; Do you want to alternate type?
40. Ginpei.dev You might overlook without compiler
41. Ginpei.dev You won’t with compiler
42. Ginpei.dev Refactoring: rename
43. Add types into your code https://en.wikipedia.org/wiki/File:McDonalds_Canada.svg https://www.instagram.com/p/BaDkpLAnedd/
44. Ginpei.dev Have a compiler read JS files
45. Ginpei.dev $ npm install typescript $ npx tsc --init message TS6071: Successfully created a tsconfig.json file. Install and set up
46. Ginpei.dev { "compilerOptions": { /* Basic Options */ // "incremental": true, /* Enable incremental compilation */ "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'E "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 's // "lib": [], /* Specify library files to be included in the compilation. */ // "allowJs": true, /* Allow javascript files to be compiled. */ // "checkJs": true, /* Report errors in .js files. */ // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react- // "declaration": true, /* Generates corresponding '.d.ts' file. */ // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ // "sourceMap": true, /* Generates corresponding '.map' file. */ // "outFile": "./", /* Concatenate and emit output to single file. */ … Generated `tsconfig.json` file
47. Ginpei.dev { "compilerOptions": { "allowJs": true, // read *.js "checkJs": true, // check types in JS "noEmit": true, // only type-checking "strict": true, // enable nice type-checking options }, "include": ["./js"], // target files "exclude": ["./js/lib"] // not-target files } Example `tsconfig.json`
48. Ginpei.dev // @ts-nocheck import { Book } from "./Book"; export default function MyComponent(props) { return ( <div> <h1>Hello World!</h1> </div> ); } Skip error report for a file
49. Ginpei.dev // @ts-nocheck import { Book } from "./Book"; export default function MyComponent(props) { return ( <div> <h1>Hello World!</h1> </div> ); } Skip error report for a file
50. Ginpei.dev { "compilerOptions": { "allowJs": true, // read *.js - "checkJs": true, // check types in JS + // "checkJs": true, // check types in JS "noEmit": true, // only type-checking "strict": true, // enable nice type-checking options }, } Check types in specific files
51. Ginpei.dev // @ts-check import { Book } from "./Book"; export default function MyComponent(props) { return ( <div> <h1>Hello World!</h1> </div> ); } Report error for each file
52. Ginpei.dev // @ts-check import { Book } from "./Book"; export default function MyComponent(props) { return ( <div> <h1>Hello World!</h1> </div> ); } Report error for each file
53. Ginpei.dev { "compilerOptions": { "allowJs": true, // read *.js "checkJs": true, // check types in JS - "noEmit": true, // only type-checking + "outDir": "./out", "strict": true, // enable nice type-checking options }, } Use TypeScript together * In default src/index.ts ↓ src/index.js
54. Ginpei.dev Add types in comments
55. Ginpei.dev // TypeScript function setSize(size: Size): boolean {} Functions // JavaScript /** * @param {Size} size * @returns {boolean} */ function setSize(size) {}
56. Ginpei.dev // TypeScript function isSize(size: any): size is Size {} Functions (type guard) // JavaScript /** * @param {any} size * @returns {size is Size} */ function isSize(size) {}
57. Ginpei.dev // TypeScript let id: string | null = null; Variables // JavaScript /** @type {string | null} */ let id = null;
58. Ginpei.dev // TypeScript const elInput = document.querySelector('#input') as HTMLInputElement; Expressions with cast // JavaScript /** @type {HTMLInputElement} */ const elInput = (document.querySelector('#input'));
59. Ginpei.dev // TypeScript const map = new Map<string, string>(); Variable with Generics // JavaScript /** @type {Map<string, string>} */ const map = new Map();
60. Ginpei.dev // TypeScript type ItemId = string | null; Types (simple) // JavaScript /** * @typedef {string | null} ItemId */
61. Ginpei.dev // TypeScript type Size = { height: number; width: number; } Types (complex) // JavaScript /** * @typedef {{ * height: number; * width: number; * }} Size */
62. Ginpei.dev // TypeScript import { Size } from './path/to'; Import types
63. Ginpei.dev // TypeScript type Size = import('./lib').Size; Import types // JavaScript /** * @typedef {import('./path/to').Size} Size */
64. Ginpei.dev // TypeScript function wrap<T>(item: T | T[]) { return item instanceof Array ? item : [item]; } Generics (template)
65. Ginpei.dev // JavaScript /** * @template T * @param {T | T[]} item * @returns {T[]} */ function wrap (item) { return item instanceof Array ? item : [item]; } Generics (template)
66. Ginpei.dev // TypeScript function findById<T extends { id: string }>(arr: T[], id: string) { return arr.find((v) => v.id === id); } Generics (template) (extends)
67. Ginpei.dev // JavaScript /** * @template {{ id: string }} T * @param {T[]} arr * @param {string} id */ function findById (arr, id) { return arr.find((v) => v.id === id); } Generics (template) (extends)
68. Ginpei.dev // TypeScript function foo<T = {}>() {} // JavaScript //
69. Ginpei.dev // @ts-ignore const $ = window.jQuery; Skip error report for line
70. Ginpei.dev // @ts-ignore const $ = window.jQuery; Skip error report for line
71. Ginpei.dev Add missing declarations
72. Ginpei.dev • `npm install @types/jquery` • Create own `./types/jquery.d.ts` Add missing declarations
73. Ginpei.dev Recap: Add types into your code • Functions o`@param` o`@returns` • Variables o`@type` o`(exp)` to cast • Types o`@typedef` o`import()` • Generics o`@template` • Skip error report o `// @ts-ignore`
74. Advanced typing https://www.instagram.com/p/Bdwn4-fnfhE/
75. Ginpei.dev // TypeScript const book = { author: 'Ginpei Takanashi', title: 'JavaScript for Adélie Penguins', publishedAt: new Date('2019/12/01'), }; type Book = typeof book; `typeof` type Book = { author: string; title: string; publishedAt: Date; }
76. Ginpei.dev // TypeScript const book = { author: 'Ginpei Takanashi', title: 'JavaScript for Adélie Penguins', publishedAt: new Date('2019/12/01'), }; /** * @typedef {typeof book} Book */ `typeof`
77. Ginpei.dev function buildLargeObject() { return { foo: { hoge: 123 }, bar: [true, false, true], run() { return true; }, /** * @param {string} destination */ walk(destination) {}, }; } /** * @typedef {ReturnType<buildLargeObject>} LargeObject */ Util: `ReturnType<fn>` type LargeObject = { foo: { hoge: number; }; bar: boolean[]; run(): boolean; walk(destination: string): void; }
78. Ginpei.dev /** @type {ReturnType<Window['setTimeout']>} */ let timer = 0; Util: `ReturnType<fn>`
79. Ginpei.dev /** * @param {FooOptions} options */ function foo(options) {} /** @type {Parameters<foo>[0]} */ const options = {}; foo(options); Util: `Paramerters<fn>[i]`
80. Ginpei.dev /** * Obtain the parameters of a constructor function type in a tuple */ type ConstructorParameters<T extends new (...args: any) => any> = T extends new (...args: infer P) => any ? P : never; Util: `ConstructorParameters<fn>`
81. Ginpei.dev type AnyObject<T = {}> = T & { [key: string]: any; } const book: AnyObject<Partial<Book>> = {}; book.author = getAuthor(); Any object
82. Ginpei.dev type PickAngularService<T extends any[]> = ReturnType<Exclude<T[0], string>>; namespace App { type MyService = PickAngularService<typeof import('path/to/lib')> } e.g. AngularJS Service Type
83. Downsides https://www.instagram.com/p/BZsJcFcHbFc/
84. Ginpei.dev Much code function setSize(size: Size) {} let id: string | null = null; let Size = { height: number; width: number; } /** * @param {Size} size */ function setSize(size) {} /** @type {string | null} */ let id = null; /** * @typedef {{ * height: number; * width: number; * }} Size */
85. Ginpei.dev // TypeScript const elInput = document.querySelector<HTMLInputEle ment>('#input'); const elementMap = new Map<string, HTMLElement>(); No runtime generics
86. Ginpei.dev // TypeScript if (map.has('xxx')) { return map.get('xxx')!; } No non-null assertion `!` operators
87. Ginpei.dev No default types in generics // JavaScript // // TypeScript function foo<T = {}>() {}
88. Conclusion https://www.instagram.com/p/53Ut_qCcja/
89. Ginpei.dev /** * @param {Size} size */ function setSize(size) {} /** @type {string | null} */ let id = null; /** * @typedef {{ * height: number; * width: number; * }} Size */ Recap • Add comments to declare types in JS files • TYPE IS AWESOME o Improves your coding speed o Supports your refactoring • Use `tsc` as a type linter o With `--checkJs` option • Easy to get started • Enjoy typing!
90. Ginpei.dev ご清聴ありがとうございました。 高梨ギンペイでした。 16日まで日本にいます。 https://Ginpei.dev @ginpei_en, @ginpei_jp @ginpei Thanks! Presented by Ginpei