Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Advanced Types • Conditional Types΍Mapped TypesͳͲෳࡶͳܕ΍Union Types ͳͲศརͳه๏ͳͲΛ঺հ͍ͯ͠Δެࣜͷϖʔδ • ࠓճ͸ͦͷத͔Βbuilt-in͞Ε͍ͯΔศརͳܕΛ঺հ͠·͢
 ※ܕఆٛΛಡΉʹ͸Conditional Types΍Mapped Types͕ಡ ΊΔඞཁ͕͋Γ·͢ɻ

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Partial

Slide 11

Slide 11 text

Partial 6TFS͸JE͕ඞਢͳͷͰۭΦϒδΣΫτ͸ίϯ ύΠϧΤϥʔʹͳΔɻ
 1BSUJBM6TFS͸͢΂ͯͷϓϩύςΟ͕0QUJPOBMʹͳΔͨ ΊۭΦϒδΣΫτΛ୅ೖͰ͖Δ

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Required

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Readonly

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Pick

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Record

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Record

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

type Exclude = T extends U ? never : T;

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Exclude

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

type Extract = T extends U ? T : never;

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Extract

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

NonNullable OVMMͱVOEFpOFEΛऔΓআ͘

Slide 47

Slide 47 text

NonNullable

Slide 48

Slide 48 text

NonNullable OVMM΍VOEFpOFE͸୅ೖͰ͖ͳ͍

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Parameters

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Thanks. @shisama_ @shisama