TypeScriptで型安全に入門したい

4dde07a2b63c5173af76dd473bc52c00?s=47 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

4dde07a2b63c5173af76dd473bc52c00?s=128

atsuco

January 15, 2020
Tweet

Transcript

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

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

  3. ӡӦ ΍ͬͯ·͢

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

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

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

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


    ࠓͷ··Ͱ΋։ൃͰ͖ͯΔ͔Β͍͍ͷͰ͸ʜʁͬͯࢥͬͯͨ ׬શʹ ภݟͷ΍ͭ
  9. Ͳ͏΍ͬͯ࢝ΊΔʁ w DPEFTBOECPYɿ؀ڥߏஙཁΒͣ w 1SPHSBNNJOH5ZQF4DSJQU.BLJOH:PVS+BWB4DSJQU"QQMJDBUJPOT 4DBMF
 ஶɿ#PSJT$IFSOZ w ˢͷ຋༁ɿ߹๏5ZQF4DSJQU
 ༁ɿ+BWB4DSJQU͓͡͞Μ


    IUUQTVODMFKBWBTDSJQUDPN7BMJE5ZQF4DSJQU w ࣮ફ5ZQF4DSJQUd#''ͱ/FYUKT/VYUKTͷܕఆٛd
 ஶɿ٢Ҫ݈จ
  10. 5ZQF4DSJQUͬͯԿ͕Ͱ͖Δͷʁ Կͯ͘͠ΕΔͷʁ

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

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

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


    ఔ౓ʹ͔͠ࢥͬͯͳ͔͚ͬͨͲ΋ͬͱࠜຊతͳ࿩ͬΆ͍ͳ
  14. ݴ͏ͯ+BWB4DSJQUʹ΋ܕͬͯ͋ΔΑͶʁʁ

  15. +4ͱ54ͷܕͷҧ͍ +BWB4DSJQU 5ZQF4DSJQU ܕ෇͚ํ๏ ಈతܕ෇͚ ίʔυΛ࣮ߦͯ͠ܕΛ൑ผ͢Δ ੩తܕ෇͚ ܕΛίʔυ্Ͱࢦఆ͢Δ ܕͷࣗಈม׵ ͞ΕΔ

    ͞Εͳ͍ UZQFDIFDLFSͷ λΠϛϯά ࣮ߦ࣌ ίϯύΠϧ࣌ Τϥʔͷ ൃ֮λΠϛϯά ࣮ߦ࣌ ίϯύΠϧ࣌
  16. ܕͷࣗಈม׵ʁʁ ਺஋ͱ഑ྻͷ଍͠ࢉɺ࣮͸Ͱ͖ΔΑͶ 1 + [2]; // 12

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

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

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

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

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

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

  23. name: type

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

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

    n; } squareOf(10); // 100 squareOf('string'); // error
  26. Ҋ֎೉͘͠ͳ͍͔΋ʜʁ

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

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

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

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

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

    Ͱൺֱ͢ΔɺͰ஋Λ൓సͤ͞ΔɺUZQFPG JOTUBODFPGͰSFpOF͢Δ͜ͱ͕Ͱ͖Δ
  32. 5ZQF4DSJQUͰѻ͑Δܕͨͪ w CPPMFBO ਅِ஋ɺUSVFGBMTFͷͲͪΒ͔ͷ஋ΛͱΔ
 cc Ͱൺֱ͢ΔɺͰ஋Λ൓సͤ͞Δ͜ͱ͕Ͱ͖Δ w OVNCFS ੔਺ɾුಈখ਺ɾਖ਼਺ɾෛ਺ʜͳͲશͯͷ਺஋ΛͱΔ
 ࢛ଇԋࢉͨ͠ΓൺֱԋࢉࢠͰൺֱͨ͠ΓͰ͖Δ

    w TUSJOH ͢΂ͯͷจࣈྻΛͱΔ
 ݁߹΍εϥΠε౳ͷॲཧ͕Ͱ͖Δ
  33. 5ZQF4DSJQUͰPCKFDU PCKFDUܕΛࢦఆ͢ΔͷͰ͸ͳ͘ɺ
 PCKFDUͷTIBQFʢܗঢ়ʣΛࢦఆ͢Δ let user: { name: string; id: number;

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

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

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

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

    let b: string[] = ['a', 'b', 'c'];
  38. ഑ྻ಺ʹෳ਺ͷܕΛڐՄ͢Δͱʜʁ

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

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

    { return val * val; } else { return val.length; } });
  41. ܕͰԿͰ΋͏·͍͘͘Θ͚͡Όͳ͍Μͩͳ

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

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

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

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


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

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

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