Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TypeScriptで型安全に入門したい

atsuco
January 15, 2020

 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

atsuco

January 15, 2020
Tweet

More Decks by atsuco

Other Decks in Programming

Transcript

  1. 5ZQF4DSJQUͰܕ҆શʹೖ໳͍ͨ͠
    ࢲͷ5ZQF4DSJQU͸ؒҧ͍ͬͯͨ
    .FSDBSJY.FSQBZ'SPOUFOE5FDI5BMLWPM
    [email protected]

    View Slide

  2. ΞαΦΧΞπί
    [email protected]
    ϑϦʔϥϯε

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

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

    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