Slide 1

Slide 1 text

Modern TypeScript

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Null Coalescing

Slide 5

Slide 5 text

value ?? orValue

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Optional Chaining

Slide 10

Slide 10 text

foo?.bar?.baz?.qux

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Top Level Await

Slide 14

Slide 14 text

await foo();

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Recursive Type Alias

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Tips

Slide 20

Slide 20 text

const assertion

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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"' ... } }

Slide 24

Slide 24 text

String literal type

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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