プロダクト開発とTypeScript

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

Slide 1

Slide 1 text

Product development with 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

1SPEVDUEFWFMPQFEFGGFDUJWFMZ 5ZQF4DSJQUಋೖͯ͠ϓϩμΫτ։ൃͷੜ࢈ੑ͸্͕Γ·͔ͨ͠ʁ ಋೖ͚ͨͩ͠Ͱ͸ͳ͔ͳ͔೉͍͔͠΋͠Ε·ͤΜɻ ࠓ೔ͷτʔΫ͕ ੜ࢈ੑΛͰ͖Δ্͚ͩ͛ΔͨΊͷΨΠυͱͳΔ͜ͱΛئ͍·͢ɻ

Slide 4

Slide 4 text

*NQPSUBOUUIJOHTBCPVU5ZQF4DSJQU 5ZQF4DSJQUͷॏཁͳ఺Ͱ͢ KBWBTDSJQUͰ͸ͳ͍͕KBWBTDSJQUͰ΋͋Δ ܕ͸࣮ߦ࣌ʹ͸ফ͑Δ

Slide 5

Slide 5 text

ػೳ

Slide 6

Slide 6 text

#FGPSFBMM લఏͱͯ͠UTDPOpHKTPOͰҎԼͷػೳ͸ඞͣ0/ʹ͠·͠ΐ͏ OP*NQMJDJU"OZ TUSJDU

Slide 7

Slide 7 text

*NQPSUBOUUIJOHTBCPVU5ZQF4DSJQU KBWBTDSJQUͰ͸ͳ͍͕KBWBTDSJQUͰ΋͋Δ 5ZQF4DSJQU͸KBWBTDSJQUͷ4VQFS4FUΛᨳ͍ͬͯ·͢ ͦͷͨΊ࢓༷తʹ͸+BWBTDSJQUΛ౿ऻ͍ͯ͠·͕͢ ͋͘·Ͱผͷݴޠͱଊ͑ͨ΄͏͕ྑ͍Ͱ͢ ͦͷ্Ͱ͍͔ͭ͘ॏཁͳ఺ʹ͍͓ͭͯ࿩͠·͢

Slide 8

Slide 8 text

FOVN FOVN͸5ZQF4DSJQUͷಠࣗػೳͰ͢ KBWBTDSJQUʹ͸ແ͍ͱ͍͏ҙຯࠓޙ΋ಉ ͡ҙຯͰ࢖͍·͢

Slide 9

Slide 9 text

enum Card { SPADE, HEART, DIAMOND, CLUB } // ࿈൪ assert.equal(Card.SPADE, 0); assert.equal(Card.DIAMOND, 2); // ٯҾ͖ assert.equal(Card[Card.DIAMOND], 'DIAMOND');

Slide 10

Slide 10 text

enum Event { CLICK = 'CLICK', MOUSEOVER = 'MOUSEOVER'; }

Slide 11

Slide 11 text

FOVN FOVN͸͜ͷΑ͏ʹ஋Λ·ͱΊΔͷʹར༻͠·͕͢ FOVNࣗ਎͕ܕΛߏ੒͠ɺܕνΣοΫʹར༻Ͱ͖·͢ ͨͩ͠஫ҙ఺͕͋Γ·͢

Slide 12

Slide 12 text

enum Card { SPADE, HEART, DIAMOND, CLUB } const fn = (card: Card) => { return card; } fn(Card.SPADE); // OK fn(0); // OK fn(10); // OK

Slide 13

Slide 13 text

FOVN FOVNΛͦͷ··ར༻͢Δͱɺ୯७ͳOVNCFSܕͱͳΓ਺஋ͷൣғΛνΣο Ϋͯ͘͠Ε·ͤΜ ͦͷͨΊෆਖ਼ͳ஋Λ౉͢͜ͱ΋ՄೳʹͳΓ·͢

Slide 14

Slide 14 text

enum EventType { CLICK = 'CLICK', MOUSEOVER = 'MOUSEOVER'; } const fn2 = (event: EventType) => {return event;} fn2(EventType.CLICK); fn2(EventType.MOUSEOVER); fn2("MOUSEDOWN"); // NG

Slide 15

Slide 15 text

FOVN จࣈྻ஋Λ࢖ͬͨ৔߹ʹ͸ਖ਼͘͠FOVNʹఆٛ͞Ε͍ͯΔ஋ͷνΣοΫΛߦ ͍·͢ ·ͨ஋Λܕͱͯ͠࢖͏͜ͱͰ5BHHFE6OJPOͱͯ͠΋࢖͏͜ͱ͕Ͱ͖·͢

Slide 16

Slide 16 text

enum EventType { CLICK = 'CLICK', MOUSEOVER = 'MOUSEOVER'; } interface ClickEvent { type: EventType.CLICK; } interface MouseDownEvent { type: EventType.MOUSEOVER; } declare const clickEvent: ClickEvent; declare const mouseDownEvent: MouseDownEvent; const fn3 = (event: ClickEvent) => { return event; } fn3(clickEvent); // OK fn3(mouseDownEvent); // NG

Slide 17

Slide 17 text

FOVN FOVN͸ศརͰ͕͢ɺ਺஋ͷ৔߹͸ܕ͚ͩͰ͸੍ޚͰ͖ͳ͍ͷͰɺ ਺஋ͱͯ͠ར༻͢Δ৔߹͸ݺͼग़͞ΕΔଆͰൣғͷνΣοΫΛ͠·͠ΐ͏ɻ

Slide 18

Slide 18 text

/BNFTQBDF OBNFTQBDF΋5ZQF4DSJQUಠࣗػೳͰ͕͢ &4.PEVMFTͷ͓͔͛Ͱ༨Γ࢖͏ҙຯ͸ͳ͘ͳΓ·ͨ͠ ͜ͷػೳ͸એݴϑΝΠϧҎ֎Ͱ࢖͏ͷ͸ࠞཚͷݩͳͷͰ࢖͏ඞཁ͸ͳ͍Ͱ ͠ΐ͏

Slide 19

Slide 19 text

/VMMPSVOEFpOFE KBWBTDSJQUʹ͸ͭͷແޮͳ஋͕͋Γ·͢ OVMMͱVOEFpOFEͰ͢ VOEFpOFE͸஋͕ະఆٛͷ৔߹ʹར༻͞ΕɺOVMM͸݁Ռ͕ଘࡏ͠ͳ͍࣌ʹ࢖ ΘΕ·͢ ͕ͦͷ࢖͍෼͚ʹରͨ͠ҙຯ͸͋Γ·ͤΜ ࠞཚ͢Δ͚ͩͰ͢

Slide 20

Slide 20 text

*O5ZQF4DSJQU OVMM΍VOEFpOFE͸5ZQF4DSJQU্Ͱ΋΍΍໘౗Ͱ͢ TUJSDU/VMM$IFDLT͸0/ʹ͢΂͖Ͱ͕͢ɺVOEFpOFEͷνΣοΫ͸͞Ε·ͤΜ

Slide 21

Slide 21 text

.BZCFPS0QUJPOBM OVMMɺVOEFpOFE͸XSBQͯ͠͠·͍·͠ΐ͏ɹ

Slide 22

Slide 22 text

type Optional = T | undefined | null;

Slide 23

Slide 23 text

0QUJPOBM ຊདྷ0QUJPOBM͸Ϋϥεʹͯ͠͠·͍͍ͨͱ͜ΖͰ͕͢ 5ZQF4DSJQUͰ0QUJPOBM$IBJOJOH͕ೖΔͷͰ ΑΓ5ZQF4DSJQUωΠςΟϒͰऔΓѻ͑Δϑϥοτͳܕͷ΄͏͕ྑ͍Ͱ͠ΐ͏

Slide 24

Slide 24 text

type Optional = T | undefined | null; declare const obj: Optional<{value?: string}>; // ·ͩಈ͖·ͤΜ // or obj?.value || ‘’ // force obj!.value!

Slide 25

Slide 25 text

࣮૷

Slide 26

Slide 26 text

%FWFMPQXJUI5ZQF4DSJQU 5ZQF4DSJQUΛ࢖ͬͯ։ൃ͢Δ৔߹ͷ࣮૷खॱ͸KBWBTDSJQUͱ͸େ͖͘ม͑· ͠ΐ͏

Slide 27

Slide 27 text

*OUFSGBDF'JSTU ࠷΋େࣄͳ͜ͱ͸ந৅తͳ࣮૷Λ࠷ॳʹߦ͏͜ͱͰ͢ ͦΕ͸ͭ·Γ۩ମతͳϩδοΫ͔Β཭ΕΔ͜ͱͰ͢ 5ZQF4DSJQU͸JOUFSGBDFͱUZQFʹΑͬͯͦΕΛՄೳʹ͍ͯ͠·͢ ِ3FEVYΈ͍ͨͳྫΛ঺հ͠·͢

Slide 28

Slide 28 text

interface Todo { id: string; date: Date; title: string; done: boolean; } type Todos = Todo[]; interface State { todos: Todos; } type Payload = { type: "ADD", } | { type: "DELETE" payload: {id: string}; } const reducer = (payload: Payload, state: State): State => { return state; }

Slide 29

Slide 29 text

-PHJDJTMBUFS SFEVDFSͷ࣮૷Ҏ֎͸શͯܕͷΈͰ࣮૷͞Ε͍ͯ·͢ SFEVDFS΋த਎͸ۭͰ஋Λฦ͚ͩ͢Ͱ͢ ͔͜͠͠ΕͰϓϩάϥϜͷࠎ͸Ͱ͖͍ͯ·͢ ͋ͱ͸SFEVDFSͷ࣮૷ʹूத͢Δ͚ͩͰ͢

Slide 30

Slide 30 text

-PHJDJTMBUFS ۃ୺ͳ࿩۩ମతͳΞϧΰϦζϜ͸͋·ΓॏཁͰ͸͋Γ·ͤΜ σʔλߏ଄ɾܕ͕΋ͬͱ΋ॏཁͰ͢ ͕ܾ͜͜·Ε͹େ֓ΞϧΰϦζϜ͸ࣗવͱಋ͔Ε·͢

Slide 31

Slide 31 text

ڥք

Slide 32

Slide 32 text

7JSUVBMBOE3FBM ࠷ॳʹड़΂ͨΑ͏ʹ5ZQF4DSJQU͸͋͘·ͰԾ૝ͷܕΛ࣋ͭݴޠͰ͢ ͦͷͨΊɺ࣮ࡍʹ࣮ߦ͞ΕΔ৔߹ʹ͸஋ͱܕͷဃ཭͕ى͖ΔՄೳੑ͕͋Γ· ͢

Slide 33

Slide 33 text

4FQBSBUFE8PSME ಛʹဃ཭͕ى͖΍͍͢ͷ͕ɺ֎෦ͱͷڥքͱͳΔ෦෼Ͱ͢ "1*αʔόͱͷڥք ϒϥ΢βετϨʔδͱͷڥք

Slide 34

Slide 34 text

"EBQUFS ͨͩ͠ɺٯʹݴ͑͹͜ΕΒͷڥք͑͞཈͑ͯɺઌఔͷJOUFSGBDFઌߦͷ࣮૷ Λߦ͑͹ဃ཭Λ΁Β͢͜ͱ͕Ͱ͖ΔͷͰ͸ͳ͍Ͱ͠ΐ͏͔ʁ ·ͨ1SPUP#VGͷΑ͏ͳ54ࣗಈੜ੒ܥΛ࢖͏ͷ΋खͰ͢

Slide 35

Slide 35 text

1SPHSBN 1SPHSBN 1SPHSBN "EBQUFS &YUFSOBM*OUFSGBDF

Slide 36

Slide 36 text

$MFBO"SDIJUFDUVSF ·ΔͰ$MFBO"SDIJUFDUVSFͷϨΠϠʔਤͷΑ͏ʹͳΓ·ͨ͠ ͔͠͠ɺผʹ$MFBO"SDIJUFDUVSFΛར༻͠Ζͱݴ͍ͬͯΔΘ͚Ͱ͸ͳ͘ 5ZQF4DSJQUͷԾ૝ܕͱ͍͏࢓૊Έʹͱͬͯ΋"EBQUFS͸ඇৗʹॏཁͳҙຯΛ ࣋ͪ·͢ ͲΜͳΞʔΩςΫνϟΛ࠾༻͍ͯͯ͠΋֎෦γεςϜڥքΛਖ਼͘͠཈͑Δ͜ ͱͰɺ5ZQF4DSJQUͷܕ͸ΑΓҰ૚໾ཱͭͰ͠ΐ͏

Slide 37

Slide 37 text

5P5ZQFE ࠓ·Ͱͷ࿩͸࠷ॳ͔Β5ZQF4DSJQUͰ։ൃ͍ͯ͠ΔέʔεΛલఏͱ͍ͯ͠·͢ ͕ ΋͠طଘͷKBWBTDSJQU͔ΒҠߦ͢Δ৔߹΋֎෦ڥք͔ΒܕΛ෇͚͍ͯ͘ͱΑ ͍Ͱ͠ΐ͏ ·ͨɺਖ਼͍͔ͨ͠ͱਖ਼͘͠ͳ͍ܕΛڥքΛه࿥͓ͯ͘͜͠ͱ͕େࣄͰ͢

Slide 38

Slide 38 text

"OZBEBQUFS ܕ෇͚͞Ε͍ͯͳ͍ةݥͳྖҬ͸શͯɺਖ਼͍͠ܕ͔Βม׵ͨ͠ͱ͍͏໨ҹΛ ͚͓ͭͯ͘ͱϦϑΝΫλϦϯά͕͠΍͍͢Ͱ͢

Slide 39

Slide 39 text

type UncheckedFixme = any; interface Model {} const unTypedFn = (a: UncheckedFixme) { }

Slide 40

Slide 40 text

"OZBEBQUFS 6ODIFDLFE'JYNF5͕ͲΜͲΜίʔυͷίΞྖҬʹԡ͠ࠐ·ΕΔ·ͰϦ ϑΝΫλϦϯά͚ͭͮ͠·͠ΐ͏ ͦͯ͠࠷ޙʹ͸ίʔυத͔Βফͯ͠͠·͍·͠ΐ͏ ͜ͷΑ͏ͳ#PUUPN6Qతͳܕͷ෇͚ํΛ͢Δͱɺ֎෦ͷةݥͳྖҬ͔Β҆શ ͳ಺෦΁ഭ͍ͬͯ͘ͷͰܕͷϛε͕ى͖ͮΒ͍Ͱ͢ ͪͳΈʹ6ODIFDLFE'JYNF5͸-JOUΤϥʔग़ΔՄೳੑ͕͋ΔͷͰ௵͓ͯ͠ ͍͍ͯͩ͘͞

Slide 41

Slide 41 text

ίʔσΟϯά

Slide 42

Slide 42 text

5ZQFJTCPUIFS ܕ෇͚͸݁ߏ໘౗Ͱ͢ ࠷ॳʹJOUFSGBDFͰܕఆٛΛͪΌΜͱ͓ͯ͘͠ͱزจ͔ղফ͸͞Ε·͕͢ ຊ࣭తʹ෇Ճతͳ࡞ۀͳͷͰαϘΓ͕ͪͰ͢

Slide 43

Slide 43 text

.BZCFXSPOH ͨͩɺܕ෇͚ͷ໘౗͘͞͞͸ίʔυͷ·͔ͣ͞΋͠Ε·ͤΜ

Slide 44

Slide 44 text

class Test { private value: {[key: string]: string} | null; constructor() {} public setValue(value: {[key: string]: string}) { this.value = value; } public doSomething() { return this.value!['key'] // you need to through type check. } }

Slide 45

Slide 45 text

*OJUJBMJ[FMBUFS ͜ͷΑ͏ͳޙʹॳظԽ͞ΕΔϝϯόม਺౳͸ܕͰදݱ͢Δͷ͕ࠔ೉Ͱ͢ ͞Βʹ/VMMBCMF͔VOEFpOFEΛڐ༰͢Δܕʹͨ͠৔߹ʹ͍͍ͪͪ Λॻ͘ͷ΋ةݥ͔ͭ໘౗Ͱ͢ ͜ͷΑ͏ͳɺͦ΋ͦ΋ܕͰදݱ͢Δͷ͕೉͍͠ίʔυΛආ͚ΔΑ͏ʹ͢Δͷ ͕ྑ͍Ͱ͢ ࠓճͷέʔεͰݴ͑͹શͯDPOTUSVDUPSͰॳظԽ͢΂͖Ͱ͢

Slide 46

Slide 46 text

function getValue() { let value: {[key: string]: number} | null = null; if (x) { value = {key: 1}; } else { value = {value: 1}; } return value; }

Slide 47

Slide 47 text

*OJUJBMJ[FMBUFS JGจͷதͰม਺ΛॳظԽ͢ΔͷΛ͚ͯ͞ɺJGจΛؔ਺Խͯ͠͠·͍·͠ΐ͏

Slide 48

Slide 48 text

.PSFUZQBCMFDPEF ΑΓγϯϓϧʹܕ෇͚Ͱ͖Δίʔυ͸ ਓؒʹ΋ಡΈ΍͘͢ཧղ͠΍͍͢ίʔυͱͳΓ·͢ ΋ͪΖΜ͖Ε͍ʹॻ͍ͯ΋ෳࡶͳܕΛ࣋ͭέʔε͸͋Γ·͢͠ɺશ͕ͯͦͷ ͱ͓ΓͰ͸͋Γ·ͤΜ͕ ෳࡶͳܕػೳΛ࢖͏લʹίʔυͷߏ଄͕ਖ਼͍͔֬͠ೝͯ͠Έ·͠ΐ͏

Slide 49

Slide 49 text

·ͱΊ 5ZQF4DSJQUͰͷ։ൃʹ͍ͭͯͷτʔΫͰͨ͠ ͜ΕΒͷ5JQT͕͋ͳͨͷ։ൃͷखॿ͚ʹͳΔͱ޾͍Ͱ͢ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠