TypeScriptで型安全に入門したい

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

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

ӡӦ ΍ͬͯ·͢

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

name: type

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

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

Ҋ֎೉͘͠ͳ͍͔΋ʜʁ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

TypeScriptで型安全に入門したい

TypeScriptで型安全に入門したい

More Decks by atsuco

Other Decks in Programming

Featured

Transcript