Modern TypeScript

Modern TypeScript coding techniques and tips.

Transcript

1. Modern TypeScript
   

   View Slide

2. Name
   !CSO 5BLFUPTIJ"POP੨໺݈ར
   
   Occupation
   'SPOUFOE%FWFMPQFS1SPEVDU0XOFS
   Company
   $ZCFSBHFOU"EUFDI4UVEJP"*.FTTFOHFS
   OSS
   $POUSJCVUPSPG7
   About
   IUUQJOGPCODI
   

   View Slide

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

   View Slide

4. Null Coalescing
   

   View Slide

5. value ?? orValue
   

   View Slide

6. // ҎԼͷܗࣜͩͱ0΍ۭจࣈʹҾ͔͔ͬΔ
   value || orValue
   value? value: orValue
   // Null Coalescing͸ҎԼͷܗࣜͱಉ͡ޮՌ
   value != null? value: orValue
   

   View Slide

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

   View Slide

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

   View Slide

9. Optional Chaining
   

   View Slide

10. foo?.bar?.baz?.qux
    

    View Slide

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

    View Slide

12. // Null Coalescingͱ૊Έ߹ΘͤΔͱڧྗ
    return foo?.bar?.baz?.qux ?? value;
    // ؔ਺ݺͼग़͠͸޻෉͕ඞཁ
    const x = (...args: any): any => {}
    (foo?.bar?.baz ?? x)()
    

    View Slide

13. Top Level Await
    

    View Slide

14. await foo();
    

    View Slide

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

    View Slide

16. Recursive Type Alias
    

    View Slide

17. type ReadonlyDeep = {
    [P in keyof T]: ReadonlyDeep
    }
    

    View Slide

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

    View Slide

19. Tips
    

    View Slide

20. const assertion
    

    View Slide

21. const value = 'value' as const // value: 'value'
    

    View Slide

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

    View Slide

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 | ReturnType;
    // "FOO" | "BAR"
    const reducer = (state: State, action: ActionTypes) => {
    switch (action.type) {
    case "BAZ": // Error '"BAZ"' is not comparable to type '"FOO" | "BAR"'
    ...
    }
    }
    

    View Slide

24. String literal type
    

    View Slide

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

    View Slide

26. const foo = (type: 'foo' | 'bar' | 'baz' | 'qux') => {
    ...
    }
    foo('foo');
    foo('bar');
    

    View Slide

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

    View Slide

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

    View Slide