TypeScriptで型安全に入門したい

by atsuco

Slide 1

Slide 1 text

5ZQF4DSJQUͰܕ҆શʹೖ໳͍ͨ͠ ࢲͷ5ZQF4DSJQU͸ؒҧ͍ͬͯͨ .FSDBSJY.FSQBZ'SPOUFOE5FDI5BMLWPM !BUTVDP@

Slide 2

Slide 2 text

ΞαΦΧΞπί !BUTVDP@  ϑϦʔϥϯε  ϑϩϯτΤϯυσβΠϯΧϝϥ  Ͷ͜ͱϥΠϒͱ؁͍΋ͷ͕͋Ε͹޾ͤ ΤϯδχΞͷϙʔτϨʔτΛࡱΓ͍ͨ

Slide 3

Slide 3 text

ӡӦ ΍ͬͯ·͢

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

ࠓ೔࿩͢಺༰ ܕ҆શΛ஌ΔͨΊʹ5ZQF4DSJQUʹखΛग़ͨ͠ ීஈ7BOJMMB+4Ͱ7VFKTΛॻ͍ͯΔ  5ZQF4DSJQUͷ஌ࣝ͸΄΅ ͳΜͱͳ͘5ZQF4DSJQUʹख͕ग़ͤͳ͍ਓ΁  ڧϚϯͷํ͸ɺॳֶऀ͕Ͳ͜ʹͭ·͔ͣ͘ͷࢀߟʹͯ͠΋Β͑Ε͹ʜ

Slide 6

Slide 6 text

΋͘͡ ಋೖ ܕͬͯͳʹ ܕ෇͚͢Δ ࠓޙͲ͏͢Δʁ

Slide 7

Slide 7 text

Կ͕Ͱ͖ͨΒʮೖ໳ͨ͠ʯʁ ͩΒͩΒ΍ͬͯ΋࢓ํ͕ͳ͍ͷͰʜʜ  ؀ڥߏஙͱ͔͸Ұ୴ஔ͍͓͍ͯͯɺ ܕ҆શͱ͸ͳʹ͔ʁʗ54Ͱ๷͛ΔΤϥʔͱ͸ͳʹ͔ʁ  Λ஌Ζ͏ʗίʔυͰࣔͤΔΑ͏ʹͳΖ͏

Slide 8

Slide 8 text

Θͨ͠ͱ5ZQF4DSJQU w ڧϚϯ͕ΠϕϯτͰ࿩ͯ͠Δ w Ή͔͍ͣ͠ɺ؀ڥߏங͕໘౗ͦ͏ w ੩తܕ෇͚ڧߗ೿͕ΦϥΦϥͯ͠Δ w ͿͬͪΌ͚੩తܕ෇͚ͬͯԿ͕͍͍ͷ͔Θ͔ͬͯͳ͍ ͳΜ͔ͱ͖ͬͭʹͯ͘͘ා͍͠ɺ  ࠓͷ··Ͱ΋։ൃͰ͖ͯΔ͔Β͍͍ͷͰ͸ʜʁͬͯࢥͬͯͨ ׬શʹ ภݟͷ΍ͭ

Slide 9

Slide 9 text

Ͳ͏΍ͬͯ࢝ΊΔʁ w DPEFTBOECPYɿ؀ڥߏஙཁΒͣ w 1SPHSBNNJOH5ZQF4DSJQU.BLJOH:PVS+BWB4DSJQU"QQMJDBUJPOT 4DBMF  ஶɿ#PSJT$IFSOZ w ˢͷ຋༁ɿ߹๏5ZQF4DSJQU  ༁ɿ+BWB4DSJQU͓͡͞Μ  IUUQTVODMFKBWBTDSJQUDPN7BMJE5ZQF4DSJQU w ࣮ફ5ZQF4DSJQUd#''ͱ/FYUKT/VYUKTͷܕఆٛd  ஶɿ٢Ҫ݈จ

Slide 10

Slide 10 text

5ZQF4DSJQUͬͯԿ͕Ͱ͖Δͷʁ Կͯ͘͠ΕΔͷʁ

Slide 11

Slide 11 text

ͦ΋ͦ΋5ZQF4DSJQU͸Կऀͳͷ͔ l5ZQF4DSJQU͸ɺϓϨʔϯ+BWB4DSJQUʹίϯύΠϧ͞ΕΔ+BWB4DSJQU ͷܕ෇͖εʔύʔηοτͰ͢ɻz  ެࣜαΠτΑΓɹIUUQTXXXUZQFTDSJQUMBOHPSH 5ZQF4DSJQU͸5ZQF4DSJQU$PNQJMFSʹΑͬͯ+BWB4DSJQUͷίʔυʹ ม׵͞ΕΔ ίϯύΠϧલʹUZQFDIFDLFSʹΑΔܕνΣοΫ͕ߦΘΕΔ

Slide 12

Slide 12 text

ͦ΋ͦ΋ܕͬͯͳΜͩʁʁ

Slide 13

Slide 13 text

w ܕ UZQF ɿ஋ͱɺͦͷ஋ʹର࣮ͯ͠ߦͰ͖Δૢ࡞ͷू߹  ஋ʹର࣮ͯ͠ߦͰ͖Δૢ࡞ʗ࣮ߦͰ͖ͳ͍ૢ࡞͕໌֬ʹܕ҆શ w ʮܕ͕͋Δݴޠ͍͍ͬͯΑͶʯʁ  ʹܕ͕͋ΔͱՄೳͳૢ࡞͕ݶఆ͞ΕΔͷͰɺҙਤ͠ͳ͍஋ͷड෇͚ɾ ૢ࡞ͰͷΤϥʔΛ๷͛Δͷ͕͍͍ΑͶ ؔ਺Λ࡞ͬͨ࣌ʹҾ਺ͷܕෆҰக͕๷͛Δɺ  ఔ౓ʹ͔͠ࢥͬͯͳ͔͚ͬͨͲ΋ͬͱࠜຊతͳ࿩ͬΆ͍ͳ

Slide 14

Slide 14 text

ݴ͏ͯ+BWB4DSJQUʹ΋ܕͬͯ͋ΔΑͶʁʁ

Slide 15

Slide 15 text

+4ͱ54ͷܕͷҧ͍ +BWB4DSJQU 5ZQF4DSJQU ܕ෇͚ํ๏ ಈతܕ෇͚ ίʔυΛ࣮ߦͯ͠ܕΛ൑ผ͢Δ ੩తܕ෇͚ ܕΛίʔυ্Ͱࢦఆ͢Δ ܕͷࣗಈม׵ ͞ΕΔ ͞Εͳ͍ UZQFDIFDLFSͷ λΠϛϯά ࣮ߦ࣌ ίϯύΠϧ࣌ Τϥʔͷ ൃ֮λΠϛϯά ࣮ߦ࣌ ίϯύΠϧ࣌

Slide 16

Slide 16 text

ܕͷࣗಈม׵ʁʁ ਺஋ͱ഑ྻͷ଍͠ࢉɺ࣮͸Ͱ͖ΔΑͶ 1 + [2]; // 12

Slide 17

Slide 17 text

w AA͸਺஋A<>A͸഑ྻͰ͋Δ w AAΛ࢖͍ͬͯΔͷͰޓ͍Λ࿈͍݁ͤͨ͞͸ͣ w ͦΕͧΕΛ҉໧తʹจࣈྻʹม׵͠࿈݁ɺAAΛಘΔ Α͠ͳʹ΍ͬͯ͘Ε͗͢ΔͷͰɺΤϥʔͷݪҼΛಛఆ͠ʹ͍͘ʜ

Slide 18

Slide 18 text

5ZQF4DSJQUͰ࣮ߦͯ͠ΈΔͱʜʁ

Slide 19

Slide 19 text

ʮ54ͷ੩తܕ෇͚͍͍ͬͯΑͶʯʁ w ܕΛ໌ࣔతʹࢦఆ͢ΔͷͰɺ஋ʹରͯ͠Մೳͳૢ࡞͕໌֬ʹͳΔ w ܕ͕҉໧తʹม׵͞Εͳ͍ͷͰɺ༧ظͤ͵஋ͷΤϥʔΛ౿Έʹ͍͘ɾݪ ҼΛಛఆ͠΍͍͢ w ίϯύΠϧ࣌ʹܕपΓͷνΣοΫΛ͢ΔͷͰɺ࣮ߦ͠ͳͯ͘΋ʢ͋Δఔ ౓ʣΤϥʔ͕Θ͔Δ +4ΑΓڧྗͳܕ෇͚ͰΤϥʔΛ๷͗΍͘͢ͳΔ

Slide 20

Slide 20 text

54͸׬શͳ੩తܕ෇͚Ͱ͸ͳ͍ͷͰɺ  ͢΂ͯͷܕ͕Θ͔͍ͬͯͳͯ͘΋ίϯύΠϧ࣌ʹΑ͠ͳʹ΍ͬͯ͘ΕΔ ʢHSBEVBMMZUZQFEʣ +BWB4DSJQU͔Β5ZQF4DSJQU΁ͷҠߦ࣌ͳͲ͸ศར ͨͩ͠࠷ऴతʹ͸͢΂ͯͷܕΛ໌֬ʹ͢Δ΂͖

Slide 21

Slide 21 text

ͳΔ΄ͲɺΑͦ͞͏ͩͳʜʁ

Slide 22

Slide 22 text

Ͱ΋ɺܕ෇͚ͬͯ೉͍͠ΜͰ͠ΐʁ

Slide 23

Slide 23 text

name: type

Slide 24

Slide 24 text

// Ҿ਺Λ΂͖৐ͯ͠ฦؔ͢਺ʹҾ਺͸਺஋ΛऔΔ΂͖ function squareOf (n) { return n * n; }

Slide 25

Slide 25 text

// Ҿ਺ͷܕΛnumberʹݻఆ͢Δ function squareOf (n: number) { return n * n; } squareOf(10); // 100 squareOf('string'); // error

Slide 26

Slide 26 text

Ҋ֎೉͘͠ͳ͍͔΋ʜʁ

Slide 27

Slide 27 text

ܕΛࢦఆ͠ͳ͕Β஋Λ୅ೖͨ͠Γʜ // name: type = value let text: string = 'sample text';

Slide 28

Slide 28 text

ܕͰ͸ͳ͘ɺ஋Λ௚઀ࢦఆͨ͠Γʜ let hoge: 123 = 123; let fuga: 456 = 0; // error

Slide 29

Slide 29 text

͍Ζ͍ΖͰ͖Δ͚Ͳɺ جຊͷܗ͸ҰॹͬΆ͍ͧ

Slide 30

Slide 30 text

ܕΛࢦఆ͠ͳ͍ͰDPOTUͰએݴ͢Δ const piyo = 789;

Slide 31

Slide 31 text

5ZQF4DSJQUͰѻ͑Δܕͨͪ w BOZ ॻ͖ख͕ܕΛࢦఆͤͣɾUZQFDIFDLFS΋ܕΛਪଌͰ͖ͳ͔ͬͨ΋ͷ ͢΂ͯͷ஋Λड͚ೖΕΔ͠ɺ͢΂ͯͷૢ࡞Λड͚෇͚Δ  खಈͰBOZܕΛ͚ͭΔࣄ΋Ͱ͖Δ͕ҰମԿͷҙຯ͕ʜʜ w VOLOPXO BOZͱಉ͘͡શͯͷ஋ΛͱΔ΋ͷͷɺ΄ͱΜͲͷૢ࡞Λड͚෇͚ͳ͍ cc Ͱൺֱ͢ΔɺͰ஋Λ൓సͤ͞ΔɺUZQFPG JOTUBODFPGͰSFpOF͢Δ͜ͱ͕Ͱ͖Δ

Slide 32

Slide 32 text

5ZQF4DSJQUͰѻ͑Δܕͨͪ w CPPMFBO ਅِ஋ɺUSVFGBMTFͷͲͪΒ͔ͷ஋ΛͱΔ  cc Ͱൺֱ͢ΔɺͰ஋Λ൓సͤ͞Δ͜ͱ͕Ͱ͖Δ w OVNCFS ੔਺ɾුಈখ਺ɾਖ਼਺ɾෛ਺ʜͳͲશͯͷ਺஋ΛͱΔ  ࢛ଇԋࢉͨ͠ΓൺֱԋࢉࢠͰൺֱͨ͠ΓͰ͖Δ w TUSJOH ͢΂ͯͷจࣈྻΛͱΔ  ݁߹΍εϥΠε౳ͷॲཧ͕Ͱ͖Δ

Slide 33

Slide 33 text

5ZQF4DSJQUͰPCKFDU PCKFDUܕΛࢦఆ͢ΔͷͰ͸ͳ͘ɺ  PCKFDUͷTIBQFʢܗঢ়ʣΛࢦఆ͢Δ let user: { name: string; id: number; flag: boolean; };

Slide 34

Slide 34 text

PCKFDUVTFS͸ w OBNFϓϩύςΟΛ࣋ͪɺ஋͸จࣈྻ w JEϓϩύςΟΛ࣋ͪɺ஋͸਺஋ w qBHϓϩύςΟΛ࣋ͪɺ஋͸ਅِ஋

Slide 35

Slide 35 text

qBHϓϩύςΟ͕ඞਢ͡Όͳ͔ͬͨΒʁ ଞʹ௥Ճ༧ఆͷϓϩύςΟ͕͋Δ৔߹͸ʁʁ

Slide 36

Slide 36 text

let user: { name: string; id: number; flag?: boolean; [key: number]: boolean; };

Slide 37

Slide 37 text

5ZQF4DSJQUͰBSSBZ ഑ྻͷதΛۉ࣭ʹ͠ͳ͍ͱɺܕ҆શΛ୲อ͠ʹ͍͘ʜ  ਺஋͚ͩɺจࣈྻ͚ͩɺͷΑ͏ʹಉ͡ܕͷ஋͚ͩΛೖΕΔ΂͖ let a: number[] = [1, 2, 3]; let b: string[] = ['a', 'b', 'c'];

Slide 38

Slide 38 text

഑ྻ಺ʹෳ਺ͷܕΛڐՄ͢Δͱʜʁ

Slide 39

Slide 39 text

let c: (number | string)[] = [10, 'string'];

Slide 40

Slide 40 text

ཁૉʹԿ͔͍ͨ͠৔߹ɺͦΕͧΕ͕Ͳͷܕ͔Λ൑ผͯ͠ૢ࡞͢Δඞཁ͕ ͋Δʜ user.map(val => { if (typeof val === "number") { return val * val; } else { return val.length; } });

Slide 41

Slide 41 text

ܕͰԿͰ΋͏·͍͘͘Θ͚͡Όͳ͍Μͩͳ

Slide 42

Slide 42 text

Ͱɺ݁ہܕ҆શͬͯͳʹʁ 5ZQF4DSJQUͰ๷͛ΔΤϥʔͬͯͳʹʁʁ

Slide 43

Slide 43 text

஋ʹର࣮ͯ͠ߦͰ͖Δૢ࡞ʗ࣮ߦͰ͖ͳ͍ૢ࡞͕໌֬ʹܕ҆શ 5ZQF4DSJQUͷܕ෇͚͸ɺ+BWB4DSJQUͷܕ෇͚ΑΓ΋ڧྗͳͷͰΑΓܕ ҆શΛ࣮ݱ͠΍͘͢ͳΔ

Slide 44

Slide 44 text

ศརͬΆͯ͘ɺͦ͜·Ͱා͘ͳ͍ͬΆ͍͚Ͳ ࣮ࡍΘͨ͠͸࢖͏Α͏ʹͳΔΜͩΖ͏͔ʁ

Slide 45

Slide 45 text

ࠓ·ͰͷΘͨ͠ͱ5ZQF4DSJQU w ڧϚϯ͕ΠϕϯτͰ࿩ͯ͠Δ w Ή͔͍ͣ͠ɺ؀ڥߏங͕໘౗ͦ͏ w ੩తܕ෇͚ڧߗ೿͕ΦϥΦϥͯ͠Δ w ͿͬͪΌ͚੩తܕ෇͚ͬͯԿ͕͍͍ͷ͔Θ͔ͬͯͳ͍ ͳΜ͔ͱ͖ͬͭʹͯ͘͘ා͍͠ɺ  ࠓͷ··Ͱ΋։ൃͰ͖ͯΔ͔Β͍͍ͷͰ͸ʜʁ  ͬͯࢥͬͯͨ

Slide 46

Slide 46 text

ଟ෼ຊ౰͸͜͏ w ΄΅+4ͷ··͔ͩΒɺಋೖͷϝϯλϧίετ͸Լ͕ͬͨ w 7VFDMJΛ࢖ͬͯΔͷͰ؀ڥ։ൃ͸؆୯ͦ͏ w ʮ࢖Θͳͯ͘΋։ൃͰ͖ͯΔʯ͸ͦ͏ݟ͑ͯΔ͚ͩͰɺ  ଟ෼༨ܭͳίετ͕ൃੜͯ͠Δ

Slide 47

Slide 47 text

ʢΘͨ͠ʹʣԿ͕Ͱ͖ͨΒ5ZQF4DSJQU࢖͏ʁ w ৽نϓϩδΣΫτʹೖΕΔͷ͸؆୯͔΋  7VFDMJ͸ϙνϙν͢Δ͚ͩ w طଘͷϓϩδΣΫτʹೖΕΔͷ͕ԯ߷  ݱঢ়։ൃͰ͖ͯΔ͠ͳɺ؀ڥߏங໘౗͔ͳʜʁ w ϓϩδΣΫτن໛ʢਓ਺ʗίʔυʣ͕େ͖͘ͳ͍ɾֶश͕଍Γͯͳ͍ ͔Βɺ໘౗ष͞ʼϝϦοτʹͳ͍ͬͯΔՄೳੑ͕͋Δ

Slide 48

Slide 48 text

5IBOLT ΋͏͠͹Β͘ೖ໳ͯ͠ΈΑ͏ͱࢥ͍·͢