TypeScriptで型安全に入門したい

2020/01/15 Mercari x Merpay Frontend Tech Talk vol.4 での資料です
https://mercari.connpass.com/event/83613/

途中にある参考資料はこちら
Programming TypeScript: Making Your JavaScript Applications Scale
https://www.amazon.co.jp/dp/1492037656

合法TypeScript
https://uncle-javascript.com/valid-typescript

実践TypeScript ~ BFFとNext.js&Nuxt.jsの型定義~
https://www.amazon.jp/dp/483996937X

Transcript

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

   View Slide

2. ΞαΦΧΞπί
   !BUTVDP@

   ϑϦʔϥϯε

   ϑϩϯτΤϯυσβΠϯΧϝϥ

   Ͷ͜ͱϥΠϒͱ؁͍΋ͷ͕͋Ε͹޾ͤ
   ΤϯδχΞͷϙʔτϨʔτΛࡱΓ͍ͨ
   

   View Slide

3. ӡӦ
   ΍ͬͯ·͢
   

   View Slide

4. View Slide

5. ࠓ೔࿩͢಺༰
   ܕ҆શΛ஌ΔͨΊʹ5ZQF4DSJQUʹखΛग़ͨ͠
   ීஈ7BOJMMB+4Ͱ7VFKTΛॻ͍ͯΔ

   5ZQF4DSJQUͷ஌ࣝ͸΄΅
   ͳΜͱͳ͘5ZQF4DSJQUʹख͕ग़ͤͳ͍ਓ΁

   ڧϚϯͷํ͸ɺॳֶऀ͕Ͳ͜ʹͭ·͔ͣ͘ͷࢀߟʹͯ͠΋Β͑Ε͹ʜ
   

   View Slide

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

   View Slide

7. Կ͕Ͱ͖ͨΒʮೖ໳ͨ͠ʯʁ
   ͩΒͩΒ΍ͬͯ΋࢓ํ͕ͳ͍ͷͰʜʜ

   ؀ڥߏஙͱ͔͸Ұ୴ஔ͍͓͍ͯͯɺ
   ܕ҆શͱ͸ͳʹ͔ʁʗ54Ͱ๷͛ΔΤϥʔͱ͸ͳʹ͔ʁ

   Λ஌Ζ͏ʗίʔυͰࣔͤΔΑ͏ʹͳΖ͏
   

   View Slide

8. Θͨ͠ͱ5ZQF4DSJQU
   w ڧϚϯ͕ΠϕϯτͰ࿩ͯ͠Δ
   w Ή͔͍ͣ͠ɺ؀ڥߏங͕໘౗ͦ͏
   w ੩తܕ෇͚ڧߗ೿͕ΦϥΦϥͯ͠Δ
   w ͿͬͪΌ͚੩తܕ෇͚ͬͯԿ͕͍͍ͷ͔Θ͔ͬͯͳ͍
   ͳΜ͔ͱ͖ͬͭʹͯ͘͘ා͍͠ɺ

   ࠓͷ··Ͱ΋։ൃͰ͖ͯΔ͔Β͍͍ͷͰ͸ʜʁͬͯࢥͬͯͨ
   ׬શʹ
   ภݟͷ΍ͭ
   

   View Slide

9. Ͳ͏΍ͬͯ࢝ΊΔʁ
   w DPEFTBOECPYɿ؀ڥߏஙཁΒͣ
   w 1SPHSBNNJOH5ZQF4DSJQU.BLJOH:PVS+BWB4DSJQU"QQMJDBUJPOT
   4DBMF

   ஶɿ#PSJT$IFSOZ
   w ˢͷ຋༁ɿ߹๏5ZQF4DSJQU

   ༁ɿ+BWB4DSJQU͓͡͞Μ

   IUUQTVODMFKBWBTDSJQUDPN7BMJE5ZQF4DSJQU
   w ࣮ફ5ZQF4DSJQUd#''ͱ/FYUKT/VYUKTͷܕఆٛd

   ஶɿ٢Ҫ݈จ
   

   View Slide

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

    View Slide

11. ͦ΋ͦ΋5ZQF4DSJQU͸Կऀͳͷ͔
    l5ZQF4DSJQU͸ɺϓϨʔϯ+BWB4DSJQUʹίϯύΠϧ͞ΕΔ+BWB4DSJQU
    ͷܕ෇͖εʔύʔηοτͰ͢ɻz

    ެࣜαΠτΑΓɹIUUQTXXXUZQFTDSJQUMBOHPSH
    5ZQF4DSJQU͸5ZQF4DSJQU$PNQJMFSʹΑͬͯ+BWB4DSJQUͷίʔυʹ
    ม׵͞ΕΔ
    ίϯύΠϧલʹUZQFDIFDLFSʹΑΔܕνΣοΫ͕ߦΘΕΔ
    

    View Slide

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

    View Slide

13. w ܕ UZQF
    ɿ஋ͱɺͦͷ஋ʹର࣮ͯ͠ߦͰ͖Δૢ࡞ͷू߹

    ஋ʹର࣮ͯ͠ߦͰ͖Δૢ࡞ʗ࣮ߦͰ͖ͳ͍ૢ࡞͕໌֬ʹܕ҆શ
    w ʮܕ͕͋Δݴޠ͍͍ͬͯΑͶʯʁ

    ʹܕ͕͋ΔͱՄೳͳૢ࡞͕ݶఆ͞ΕΔͷͰɺҙਤ͠ͳ͍஋ͷड෇͚ɾ
    ૢ࡞ͰͷΤϥʔΛ๷͛Δͷ͕͍͍ΑͶ
    ؔ਺Λ࡞ͬͨ࣌ʹҾ਺ͷܕෆҰக͕๷͛Δɺ

    ఔ౓ʹ͔͠ࢥͬͯͳ͔͚ͬͨͲ΋ͬͱࠜຊతͳ࿩ͬΆ͍ͳ
    

    View Slide

14. 
    ݴ͏ͯ+BWB4DSJQUʹ΋ܕͬͯ͋ΔΑͶʁʁ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. 54͸׬શͳ੩తܕ෇͚Ͱ͸ͳ͍ͷͰɺ

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

    View Slide

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

    View Slide

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

    View Slide

23. name: type
    

    View Slide

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

    View Slide

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

    View Slide

26. 
    Ҋ֎೉͘͠ͳ͍͔΋ʜʁ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

31. 5ZQF4DSJQUͰѻ͑Δܕͨͪ
    w BOZ
    ॻ͖ख͕ܕΛࢦఆͤͣɾUZQFDIFDLFS΋ܕΛਪଌͰ͖ͳ͔ͬͨ΋ͷ
    ͢΂ͯͷ஋Λड͚ೖΕΔ͠ɺ͢΂ͯͷૢ࡞Λड͚෇͚Δ

    खಈͰBOZܕΛ͚ͭΔࣄ΋Ͱ͖Δ͕ҰମԿͷҙຯ͕ʜʜ
    w VOLOPXO
    BOZͱಉ͘͡શͯͷ஋ΛͱΔ΋ͷͷɺ΄ͱΜͲͷૢ࡞Λड͚෇͚ͳ͍
    cc Ͱൺֱ͢ΔɺͰ஋Λ൓సͤ͞ΔɺUZQFPG
    JOTUBODFPGͰSFpOF͢Δ͜ͱ͕Ͱ͖Δ
    

    View Slide

32. 5ZQF4DSJQUͰѻ͑Δܕͨͪ
    w CPPMFBO
    ਅِ஋ɺUSVFGBMTFͷͲͪΒ͔ͷ஋ΛͱΔ

    cc Ͱൺֱ͢ΔɺͰ஋Λ൓సͤ͞Δ͜ͱ͕Ͱ͖Δ
    w OVNCFS
    ੔਺ɾුಈখ਺ɾਖ਼਺ɾෛ਺ʜͳͲશͯͷ਺஋ΛͱΔ

    ࢛ଇԋࢉͨ͠ΓൺֱԋࢉࢠͰൺֱͨ͠ΓͰ͖Δ
    w TUSJOH
    ͢΂ͯͷจࣈྻΛͱΔ

    ݁߹΍εϥΠε౳ͷॲཧ͕Ͱ͖Δ
    

    View Slide

33. 5ZQF4DSJQUͰPCKFDU
    PCKFDUܕΛࢦఆ͢ΔͷͰ͸ͳ͘ɺ

    PCKFDUͷTIBQFʢܗঢ়ʣΛࢦఆ͢Δ
    let user: {
    name: string;
    id: number;
    flag: boolean;
    };
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

37. 5ZQF4DSJQUͰBSSBZ
    ഑ྻͷதΛۉ࣭ʹ͠ͳ͍ͱɺܕ҆શΛ୲อ͠ʹ͍͘ʜ

    ਺஋͚ͩɺจࣈྻ͚ͩɺͷΑ͏ʹಉ͡ܕͷ஋͚ͩΛೖΕΔ΂͖
    let a: number[] = [1, 2, 3];
    let b: string[] = ['a', 'b', 'c'];
    

    View Slide

38. 
    ഑ྻ಺ʹෳ਺ͷܕΛڐՄ͢Δͱʜʁ
    

    View Slide

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

    View Slide

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

    View Slide

41. 
    ܕͰԿͰ΋͏·͍͘͘Θ͚͡Όͳ͍Μͩͳ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

45. ࠓ·ͰͷΘͨ͠ͱ5ZQF4DSJQU
    w ڧϚϯ͕ΠϕϯτͰ࿩ͯ͠Δ
    w Ή͔͍ͣ͠ɺ؀ڥߏங͕໘౗ͦ͏
    w ੩తܕ෇͚ڧߗ೿͕ΦϥΦϥͯ͠Δ
    w ͿͬͪΌ͚੩తܕ෇͚ͬͯԿ͕͍͍ͷ͔Θ͔ͬͯͳ͍
    ͳΜ͔ͱ͖ͬͭʹͯ͘͘ා͍͠ɺ

    ࠓͷ··Ͱ΋։ൃͰ͖ͯΔ͔Β͍͍ͷͰ͸ʜʁ

    ͬͯࢥͬͯͨ
    

    View Slide

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

    ଟ෼༨ܭͳίετ͕ൃੜͯ͠Δ
    

    View Slide

47. ʢΘͨ͠ʹʣԿ͕Ͱ͖ͨΒ5ZQF4DSJQU࢖͏ʁ
    w ৽نϓϩδΣΫτʹೖΕΔͷ͸؆୯͔΋

    7VFDMJ͸ϙνϙν͢Δ͚ͩ
    w طଘͷϓϩδΣΫτʹೖΕΔͷ͕ԯ߷

    ݱঢ়։ൃͰ͖ͯΔ͠ͳɺ؀ڥߏங໘౗͔ͳʜʁ
    w ϓϩδΣΫτن໛ʢਓ਺ʗίʔυʣ͕େ͖͘ͳ͍ɾֶश͕଍Γͯͳ͍
    ͔Βɺ໘౗ष͞ʼϝϦοτʹͳ͍ͬͯΔՄೳੑ͕͋Δ
    

    View Slide

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

    View Slide