Modern TypeScript

Transcript

1. 1.

   Modern TypeScript

2. 2.

   Name !CSO
   5BLFUPTIJ
   "POP੨໺݈ར
   Occupation 'SPOUFOE
   %FWFMPQFS
   
   1SPEVDU
   0XOFS
   Company $ZCFSBHFOU"EUFDI
   4UVEJP"*
   .FTTFOHFS
   OSS $POUSJCVUPS
   PG
   7
   

   About IUUQJOGPCODI
3. 3.

   ຊ೔ͷ಺༰ ࠷ۙͷTypeScript৽ػೳ Tips

4. 4.

   Null Coalescing

5. 5.

   value ?? orValue

6. 6.

   // ҎԼͷܗࣜͩͱ0΍ۭจࣈʹҾ͔͔ͬΔ value || orValue value? value: orValue // Null

   Coalescing͸ҎԼͷܗࣜͱಉ͡ޮՌ value != null? value: orValue
7. 7.

   Null Coalescing ஋͕null/undefinedͷ৔߹ʹ??Ҏ߱Λ࣮ߦ͢Δ ࿦ཧORͷԋࢉࢠ͸ࠓޙ΄ͱΜͲ࢖͏ඞཁ͸ͳ͍ ·ͨɺࠓ·ͰifจதͰऑ͍ൺֱΛ࢖͍ͬͯͨՕॴ΋ɺlintΛ཈੍ͤͣʹࡁ ΉΑ͏ʹॻ͖׵͑ΒΕΔ

8. 8.

   // ࠓ·Ͱͷnull/undefinedͷνΣοΫํ๏ if (value != null) { } // ࠓޙ͸lintʹ==ΛౖΒΕΔࣄͳ͘??Ͱஔ͖׵͑ΒΕΔ

   if (value ?? null) { }
9. 9.

   Optional Chaining

10. 10.

    foo?.bar?.baz?.qux

11. 11.

    Optional Chaining ΦϒδΣΫτ͕null/undefinedͩͬͨ৔߹ʹ͸ϓϩύςΟΞΫηεΛ࣮ ߦͤͣundefinedΛฦ͢ ஋͕ଘࡏ͢Δͱ͖͚ͩϓϩύςΟΞΫηεΛߦ͏ ࠓ·ͰࣗલͰMaybe/OptionalΫϥεΛ࣮૷͍ͯͨ͠έʔεΛஔ͖׵͑Β ΕΔ

12. 12.

    // Null Coalescingͱ૊Έ߹ΘͤΔͱڧྗ return foo?.bar?.baz?.qux ?? value; // ؔ਺ݺͼग़͠͸޻෉͕ඞཁ const

    x = (...args: any): any => {} (foo?.bar?.baz ?? x)()
13. 13.

    Top Level Await

14. 14.

    await foo();

15. 15.

    Top Level Await ࠓ·Ͱ͸await͸asyncؔ਺಺ͰͷΈॻ͚͕ͨɺ3.8ΑΓτοϓϨϕϧͰ΋ هड़Ͱ͖ΔΑ͏ʹͳͬͨ

16. 16.

    Recursive Type Alias

17. 17.

    type ReadonlyDeep<T> = { [P in keyof T]: ReadonlyDeep<T[P]> }

18. 18.

    Recursive Type Alias ࠶ؼతͳܕΛ୯७ͳType AliasͰදݱͰ͖ΔΑ͏ʹͳͬͨ Ҏલ͸interfaceͷextends͕ඞཁͩͬͨ

19. 19.

    Tips

20. 20.

    const assertion

21. 21.

    const value = 'value' as const // value: 'value'

22. 22.

    Const assertion ஋ͷ͋ͱʹas constͱ͚ͭΔ͜ͱͰ string/number/boolean/array/object ΛϦςϥϧλΠϓͱͯ͠ఆٛ͢Δ͜ͱ͕Ͱ͖Δ ※ϦςϥϧλΠϓͱ͸஋͕ͦͷ··ܕͱͯ͠ѻΘΕΔ΋ͷ ͦͷͨΊɺReduxͷܕఆٛ౳Λconst assertionΛ࢖ͬͯ ΑΓγϯϓϧʹఆٛ͢Δ͜ͱ͕Ͱ͖Δ

23. 23.

    const fooAction = (payload: {value: string}) => { return {

    type: "FOO" as const, payload } } const barAction = (payload: {value: string}) => { return { type: "BAR" as const, payload } } type ActionTypes = ReturnType<typeof fooAction> | ReturnType<typeof barAction>; // "FOO" | "BAR" const reducer = (state: State, action: ActionTypes) => { switch (action.type) { case "BAZ": // Error '"BAZ"' is not comparable to type '"FOO" | "BAR"' ... } }
24. 24.

    String literal type

25. 25.

    String literal type ݸਓతʹจࣈྻ͸શͯenum͔ΦϒδΣΫτʹೖΕ͍͕ͯͨɺ TypeScript͸શͯstring literal typeͱͯ͠ܕఆٛͯ͠ɺ஋͸Ϧς ϥϧϕλॻ͖͕Ұ൪γϯϓϧͳͷͰ͸ͳ͍͔ͱߟ͑ΔΑ͏ʹͳͬͨ

26. 26.

    const foo = (type: 'foo' | 'bar' | 'baz' |

    'qux') => { ... } foo('foo'); foo('bar');
27. 27.

    String literal type Θ͔Γ΍͘͢γϯϓϧͳͷͰɺจࣈྻenum͸શͯจࣈྻܕʹ͢Δͷ͕͓͢ ͢Ί จࣈྻఆ਺͸ͪΌΜͱม਺ʹೖΕ·͠ΐ͏

28. 28.

    ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠