Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modern TypeScript

Modern TypeScript

Modern TypeScript coding techniques and tips.

More Decks by Taketoshi Aono(青野健利 a.k.a brn)

Other Decks in Programming

Transcript

  1. Modern TypeScript

    View full-size slide

  2. Name
    !CSO 5BLFUPTIJ"POP੨໺݈ར

    Occupation
    'SPOUFOE%FWFMPQFS1SPEVDU0XOFS
    Company
    $ZCFSBHFOU"EUFDI4UVEJP"*.FTTFOHFS
    OSS
    $POUSJCVUPSPG7
    About
    IUUQJOGPCODI

    View full-size slide

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

    View full-size slide

  4. Null Coalescing

    View full-size slide

  5. value ?? orValue

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. Optional Chaining

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. Top Level Await

    View full-size slide

  14. await foo();

    View full-size slide

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

    View full-size slide

  16. Recursive Type Alias

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. const assertion

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. 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 full-size slide

  23. String literal type

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide