Start TypeScript Leaving JavaScript as JS

Transcript

1. 1.

   Ginpei.dev By Ginpei Takanashi https://Ginpei.dev Start TypeScript . Leaving JavaScript

   as JS JSConf JP December 1st 2019
2. 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. 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. 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. 5.

   Ginpei.dev I’m Ginpei / ギンペイです From Vancouver, Canada Love JavaScript

   & JapaneseSushi 世界地図のイラスト | かわいいフリー素材集 いらすとや https://www.irasutoya.com/2013/02/blog-post_8574.html
6. 6.

   How TypeScript is AWESOME https://www.instagram.com/p/BK7xJ8Dhca-/

7. 7.

   Ginpei.dev • TypeScript is superset of JavaScript • TypeScript has

   types How TypeScript is AWESOME
8. 8.

   Ginpei.dev Syntax hierarchy TypeScript JavaScript JSON

9. 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. 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. 11.

    Ginpei.dev However…

12. 12.

    When TypeScript does not work https://www.instagram.com/p/_QrC5oicoa/

13. 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. 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. 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. 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. 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. 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. 19.

    Thank Buddha we have Typed- JavaScript https://www.instagram.com/p/BG8cTclick8/

20. 20.

    Ginpei.dev • Typed-JavaScript is definitely JavaScript • Typed-JavaScript has types

    Typed-JavaScript is AWESOME
21. 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. 22.

    Ginpei.dev You could start typing alone $ npm install typescript

    --global $ npx tsc
23. 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. 24.

    Ginpei.dev Static validation

25. 25.

    Ginpei.dev Compiler shows errors

26. 26.

    Ginpei.dev setSize({ height: 123, width: 234, }); Guess parameter: number?

27. 27.

    Ginpei.dev setSize({ height: 'auto', width: '234px', }); Guess parameter: CSS

    props?
28. 28.

    Ginpei.dev setSize({ height: { value: 123, unit: 'px' }, width:

    { value: 234, unit: 'px' }, }); Guess parameter: complex object?
29. 29.

    Ginpei.dev Static validation: in terminal

30. 30.

    Ginpei.dev Static validation: in editor

31. 31.

    Ginpei.dev Powerful suggestions within editor

32. 32.

    Ginpei.dev Suggesting properties

33. 33.

    Ginpei.dev Find correct props

34. 34.

    Ginpei.dev Identifying arguments

35. 35.

    Ginpei.dev Strong refactoring support

36. 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. 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. 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. 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. 40.

    Ginpei.dev You might overlook without compiler

41. 41.

    Ginpei.dev You won’t with compiler

42. 42.

    Ginpei.dev Refactoring: rename

43. 43.

    Add types into your code https://en.wikipedia.org/wiki/File:McDonalds_Canada.svg https://www.instagram.com/p/BaDkpLAnedd/

44. 44.

    Ginpei.dev Have a compiler read JS files

45. 45.

    Ginpei.dev $ npm install typescript $ npx tsc --init message

    TS6071: Successfully created a tsconfig.json file. Install and set up
46. 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. 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. 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. 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. 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. 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. 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. 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. 54.

    Ginpei.dev Add types in comments

55. 55.

    Ginpei.dev // TypeScript function setSize(size: Size): boolean {} Functions //

    JavaScript /** * @param {Size} size * @returns {boolean} */ function setSize(size) {}
56. 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. 57.

    Ginpei.dev // TypeScript let id: string | null = null;

    Variables // JavaScript /** @type {string | null} */ let id = null;
58. 58.

    Ginpei.dev // TypeScript const elInput = document.querySelector('#input') as HTMLInputElement; Expressions

    with cast // JavaScript /** @type {HTMLInputElement} */ const elInput = (document.querySelector('#input'));
59. 59.

    Ginpei.dev // TypeScript const map = new Map<string, string>(); Variable

    with Generics // JavaScript /** @type {Map<string, string>} */ const map = new Map();
60. 60.

    Ginpei.dev // TypeScript type ItemId = string | null; Types

    (simple) // JavaScript /** * @typedef {string | null} ItemId */
61. 61.

    Ginpei.dev // TypeScript type Size = { height: number; width:

    number; } Types (complex) // JavaScript /** * @typedef {{ * height: number; * width: number; * }} Size */
62. 62.

    Ginpei.dev // TypeScript import { Size } from './path/to'; Import

    types
63. 63.

    Ginpei.dev // TypeScript type Size = import('./lib').Size; Import types //

    JavaScript /** * @typedef {import('./path/to').Size} Size */
64. 64.

    Ginpei.dev // TypeScript function wrap<T>(item: T | T[]) { return

    item instanceof Array ? item : [item]; } Generics (template)
65. 65.

    Ginpei.dev // JavaScript /** * @template T * @param {T

    | T[]} item * @returns {T[]} */ function wrap (item) { return item instanceof Array ? item : [item]; } Generics (template)
66. 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. 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. 68.

    Ginpei.dev // TypeScript function foo<T = {}>() {} // JavaScript

    //
69. 69.

    Ginpei.dev // @ts-ignore const $ = window.jQuery; Skip error report

    for line
70. 70.

    Ginpei.dev // @ts-ignore const $ = window.jQuery; Skip error report

    for line
71. 71.

    Ginpei.dev Add missing declarations

72. 72.

    Ginpei.dev • `npm install @types/jquery` • Create own `./types/jquery.d.ts` Add

    missing declarations
73. 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. 74.

    Advanced typing https://www.instagram.com/p/Bdwn4-fnfhE/

75. 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. 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. 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. 78.

    Ginpei.dev /** @type {ReturnType<Window['setTimeout']>} */ let timer = 0; Util:

    `ReturnType<fn>`
79. 79.

    Ginpei.dev /** * @param {FooOptions} options */ function foo(options) {}

    /** @type {Parameters<foo>[0]} */ const options = {}; foo(options); Util: `Paramerters<fn>[i]`
80. 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. 81.

    Ginpei.dev type AnyObject<T = {}> = T & { [key:

    string]: any; } const book: AnyObject<Partial<Book>> = {}; book.author = getAuthor(); Any object
82. 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. 83.

    Downsides https://www.instagram.com/p/BZsJcFcHbFc/

84. 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. 85.

    Ginpei.dev // TypeScript const elInput = document.querySelector<HTMLInputEle ment>('#input'); const elementMap

    = new Map<string, HTMLElement>(); No runtime generics
86. 86.

    Ginpei.dev // TypeScript if (map.has('xxx')) { return map.get('xxx')!; } No

    non-null assertion `!` operators
87. 87.

    Ginpei.dev No default types in generics // JavaScript // //

    TypeScript function foo<T = {}>() {}
88. 88.

    Conclusion https://www.instagram.com/p/53Ut_qCcja/

89. 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. 90.

    Ginpei.dev ご清聴ありがとうございました。 高梨ギンペイでした。 16日まで日本にいます。 https://Ginpei.dev @ginpei_en, @ginpei_jp @ginpei Thanks! Presented

    by Ginpei