$30 off During Our Annual Pro Sale. View Details »

Advanced built-in types / #kansaits 1

Advanced built-in types / #kansaits 1

kansai.ts #1 ( https://kansaits.connpass.com/event/130120/ ) でTypeScriptの便利なbuilt-in typesについて話をしました。
質問はTwitter( https://twitter.com/shisama_ )までお願いいたします。

Masashi Hirano

June 10, 2019
Tweet

More Decks by Masashi Hirano

Other Decks in Programming

Transcript

  1. Advanced
    built-in types
    you may not know
    Masashi Hirano @shisama
    kansai.ts #1

    View Slide

  2. ฏ໺ ণ࢜ / Masashi Hirano
    @shisama_
    @shisama
    Node.js Core Collaborator
    ؔ੢NodeֶԂOrganizer

    View Slide

  3. TypeScriptʹbuilt-in͞Ε͍ͯΔศརͳܕʹ
    ͍ͭͯ঺հ͠·͢ʂ

    View Slide

  4. https://www.typescriptlang.org/docs/handbook/advanced-types.html
    ެࣜͷAdvanced TypesಡΜͩ͜ͱ͋Δ?

    View Slide

  5. Advanced Types
    • Conditional Types΍Mapped TypesͳͲෳࡶͳܕ΍Union Types
    ͳͲศརͳه๏ͳͲΛ঺հ͍ͯ͠Δެࣜͷϖʔδ
    • ࠓճ͸ͦͷத͔Βbuilt-in͞Ε͍ͯΔศརͳܕΛ঺հ͠·͢

    ※ܕఆٛΛಡΉʹ͸Conditional Types΍Mapped Types͕ಡ
    ΊΔඞཁ͕͋Γ·͢ɻ

    View Slide

  6. https://github.com/microsoft/TypeScript/blob/master/src/lib/es5.d.ts
    5ZQF4DSJQUͷ(JU)VCϦϙδτϦͷ
    TSDMJCFTEUTʹఆ͕ٛ͋Δ

    View Slide

  7. type Partial = {
    [P in keyof T]?: T[P];
    };

    View Slide

  8. type Partial = {
    [P in keyof T]?: T[P];
    };
    LFZPG͸5 ΦϒδΣΫτ
    ͷϓϩύςΟ໊Λऔ͍ͬͯΔ
    ϓϩύςΟʹ Λ෇༩ͯ͠PQUJPOBMʹ͍ͯ͠Δ
    JO͸5ͷϓϩύςΟ໊Λ1ʹ֨ೲ͍ͯ͠Δɻ
    5<1>͸ࢦఆͨ͠ϓϩύςΟͷܕ

    View Slide

  9. Partial
    ͢΂ͯͷϓϩύςΟΛ0QUJPOBMʹ͢Δ

    View Slide

  10. Partial

    View Slide

  11. Partial
    6TFS͸JE͕ඞਢͳͷͰۭΦϒδΣΫτ͸ίϯ
    ύΠϧΤϥʔʹͳΔɻ

    1BSUJBM6TFS͸͢΂ͯͷϓϩύςΟ͕0QUJPOBMʹͳΔͨ
    ΊۭΦϒδΣΫτΛ୅ೖͰ͖Δ

    View Slide

  12. type Required = {
    [P in keyof T]-?: T[P];
    };

    View Slide

  13. type Required = {
    [P in keyof T]-?: T[P];
    };
    ͸PQUJPOBMͷϓϩύςΟΛOPOPQUJPOBMʹ͢Δ
    1BSUJBMͷٯͰ ΛऔΓআ͍͍ͯΔ

    View Slide

  14. Required
    ͢΂ͯͷϓϩύςΟΛOPOPQUJPOBMʹ͢Δ

    View Slide

  15. Required

    View Slide

  16. Required
    ͢΂ͯͷϓϩύςΟ͕OPOPQUJPOBMͳͷͰ
    JE͸লུͰ͖ͳ͍

    View Slide

  17. type Readonly = {
    readonly [P in keyof T]: T[P];
    };

    View Slide

  18. type Readonly = {
    readonly [P in keyof T]: T[P];
    };
    ϓϩύςΟͷલʹSFBEPOMZΛॻ͘ͱͦͷϓϩύςΟ͸ಡ
    ΈऔΓઐ༻ʹͳΔ

    View Slide

  19. Readonly
    ͢΂ͯͷϓϩύςΟΛSFBEPOMZʹ͢Δ

    View Slide

  20. Readonly

    View Slide

  21. Readonly
    ͢΂ͯͷϓϩύςΟΛSFBEPOMZͷͨΊ
    ୅ೖෆՄೳ

    View Slide

  22. type Pick = {
    [P in K]: T[P];
    };

    View Slide

  23. type Pick = {
    [P in K]: T[P];
    };
    ,ʹࢦఆͰ͖Δͷ͸5ͷϓϩύςΟ໊ͷΈɻ5ʹແ͍ϓϩ
    ύςΟ໊Λࢦఆ͢ΔͱΤϥʔʹͳΔ

    View Slide

  24. Pick
    ࢦఆͨ͠ϓϩύςΟͷΈ࢒͢

    View Slide

  25. Pick

    View Slide

  26. Pick
    ࢦఆͨ͠ϓϩύςΟҎ֎͸ΤϥʔʹͳΔ

    View Slide

  27. type Record = {
    [P in K]: T;
    };

    View Slide

  28. type Record = {
    [P in K]: T;
    };
    lLFZPGBOZzlTUSJOHcOVNCFScTZNCPMz

    View Slide

  29. Record
    LFZ໊ͱWBMVFͷܕΛࢦఆͨ͠ΦϒδΣΫτܕ
    Λ࡞Δ

    View Slide

  30. Record

    View Slide

  31. Record
    -BTUTBUPcUBOBLBͨΊɺ
    TV[VLJ͸ΤϥʔʹͳΔ

    View Slide

  32. Record

    View Slide

  33. Record
    -BTUTBUPcTV[VLJcUBOBLBͨΊɺ
    UBOBLB͕ແ͍ͱΤϥʔʹͳΔ

    View Slide

  34. type Exclude = T extends U ? never : T;

    View Slide

  35. type Exclude = T extends U ? never : T;
    ࡾ߲ԋࢉࢠͷΑ͏ʹ৚݅ʹΑͬͯܕ͕ܾ·Δ
    5͕6Λܧঝ͍ͯ͠Δ৔߹͸OFWFSɺͦ͏Ͱͳ͍৔߹͸5
    OFWFS͸஋Λฦ͞ͳ͍ܕɻ

    View Slide

  36. Exclude
    ྻڍ͔Βࢦఆͨ͠஋ΛऔΓআ͘

    View Slide

  37. Exclude

    View Slide

  38. Exclude
    औΓআ͍ͨ஋Λ୅ೖ͢ΔͱΤϥʔ

    View Slide

  39. type Extract = T extends U ? T : never;

    View Slide

  40. type Extract = T extends U ? T : never;
    5͕6Λܧঝ͍ͯ͠Δ৔߹͸5ɺ
    ͦ͏Ͱͳ͍৔߹͸OFWFSΛฦ͍ͯ͠Δɻ
    ฦ͢஋͕&YDMVEFͷٯʹͳ͍ͬͯΔ

    View Slide

  41. Extract
    ྻڍͷத͔Βࢦఆͨ͠஋Λநग़

    View Slide

  42. Extract

    View Slide

  43. Extract
    நग़ͨ͠஋Ҏ֎Λ୅ೖ͢ΔͱΤϥʔ

    View Slide

  44. type NonNullable
    = T extends null | undefined ? never : T;

    View Slide

  45. type NonNullable
    = T extends null | undefined ? never : T;
    OVMM·ͨ͸VOEFpOFEΛܧঝ͍ͯ͠ΔܕͰ͋
    Ε͹OFWFSɺͦ͏Ͱͳ͍৔߹͸5Λฦ͍ͯ͠Δ

    View Slide

  46. NonNullable
    OVMMͱVOEFpOFEΛऔΓআ͘

    View Slide

  47. NonNullable

    View Slide

  48. NonNullable
    OVMM΍VOEFpOFE͸୅ೖͰ͖ͳ͍

    View Slide

  49. type Parameters(...args: any) => any>
    = T extends (...args: infer P) => any ? P : never;

    View Slide

  50. type Parameters(...args: any) => any>
    = T extends (...args: infer P) => any ? P : never;
    JOGFS͸ܕਪ࿦ͨ݁͠ՌΛऔΔ͜ͱ͕Ͱ͖Δ
    ͜ͷ৔߹ؔ਺ͷҾ਺ͷܕΛਪ࿦͍ͯ͠Δɻ
    5͕ؔ਺ܕ ʜBSHTJOGFS1
    BOZͷܧঝͩͬͨ৔߹ɺ
    ਪ࿦ͨ͠Ҿ਺ͷܕΛฦ͍ͯ͠Δ
    5͸ؔ਺ܕͷΈࢦఆͰ͖Δ

    View Slide

  51. Parameters
    ؔ਺ͷҾ਺ͷܕΛλϓϧͰऔΔ

    View Slide

  52. Parameters

    View Slide

  53. Parameters
    ؔ਺ͷҾ਺ͷܕʹ߹Θͳ͍ͱΤϥʔ

    View Slide

  54. ·ͱΊ
    • ศརͳܕ͕TypeScriptຊମʹ૊Έࠐ·Ε͍ͯΔ
    • Conditional TypesͱMapped TypesΛ࢖ͬͯఆٛ͞Ε͍ͯΔ
    • ࠓ೔঺հ͖͠Εͳ͔ͬͨܕͷఆٛ͸src/lib/es5.d.tsʹ͋ΔͷͰڵ
    ຯ͕͋Ε͹ݟͯΈ͍ͯͩ͘͞

    View Slide

  55. Thanks.
    @shisama_
    @shisama

    View Slide