TypeScriptの型定義が JavaScriptのバグを駆逐する

TypeScriptの型定義が JavaScriptのバグを駆逐する

3d944ac176998af7e7b116993d06cdd1?s=128

Tetsuya Negishi

February 22, 2019
Tweet

Transcript

  1. TypeScriptͷܕఆ͕ٛ JavaScriptͷόάΛۦஞ͢Δ ࠜ؛ప໵

  2. ࣗݾ঺հ • ࠜ؛ప໵ • ϥϯαʔζגࣜձࣾ • ৽نࣄۀ • ओʹϑϩϯτ·ΘΓ୲౰ •

    ڵຯؔ৺ • React, Vue.js, TypeScript • αʔόʔϨε
  3. ࠓ೔࿩͢͜ͱ • ৽ϓϩμΫτʹTypeScriptΛಋೖͯ͠ΈͯͲ͏͔ͩͬͨ • TypeScript͸ͪΌΜͱܕఆٛ͢Ε͹࠷ߴ • ͋Γ͕ͱ͏TypeScript

  4. ϥϯαʔζͷϑϩϯτΤϯυٕज़ͷมભ 2008೥ ~ ݱࡏ 2015೥ ~ ݱࡏ 2018೥ ~ ݱࡏ

    2017೥ ~ 2018೥
  5. ϥϯαʔζͷϑϩϯτΤϯυٕज़ͷมભ 2008೥ ~ ݱࡏ 2015೥ ~ ݱࡏ 2018೥ ~ ݱࡏ

    2016೥ ~ 2018೥
  6. TypeScriptΛ࢖ͬͯΘ͔ͬͨ͜ͱ ܕఆٛʹΑͬͯόά͕ܹݮ ͪΌΜͱܕఆٛ͠ͳ͍ͱόάΔ

  7. None
  8. JavaScriptͰΑ͘ى͖Δόά

  9. JavaScriptͰΑ͘ى͖Δόά data ʹ͸ number ͷ഑ྻΛೖΕΔ → Ұ࣌తʹundefind͕ೖΔύλʔϯ͕͋ͬͨ → <Graph>͸undefindΛ૝ఆ͓ͯ͠ΒͣΤϥʔ ReactͰ͸΍Γ͕ͪ

    Τϥʔ
  10. JavaScriptͰΑ͘ى͖Δόά data ʹ͸ Object ΛೖΕΔ → Ұ࣌తʹundefind͕ೖΔύλʔϯ͕͋ͬͨ → <Graph>͸undefindΛ૝ఆ͓ͯ͠ΒͣΤϥʔ ReactͰͷΤϥʔ͸΄΅͜ͷύλʔϯͷؾ͕͢Δ

    Τϥʔ TypeScriptͰ͸ൃੜ͠ͳ͍
  11. TypeScriptͰܕఆٛͨ͠৔߹

  12. TypeScriptͰܕఆٛͨ͠৔߹ ? → undefinedΛڐ͢

  13. TypeScriptͰܕఆٛͨ͠৔߹ propsͷܕ͕ܾ·Δ

  14. TypeScriptͰܕఆٛͨ͠৔߹ data͸ number[] ͱఆٛ͞Ε͍ͯͨͱ͢Δ

  15. TypeScriptͰܕఆٛͨ͠৔߹ ͜ͷ࣌఺Ͱ͸·ͩΤϥʔ → <Graph>ʹ౉͢ data ͕ undefinedͰ͋ΔՄೳੑ͕͋Δ

  16. TypeScriptͰܕఆٛͨ͠৔߹ undefinedͷνΣοΫ Τϥʔ͕ग़ͳ͘ͳΔ

  17. TypeScriptͰܕఆٛͨ͠৔߹ undefinedͷνΣοΫ Τϥʔ͕ग़ͳ͘ͳΔ

  18. TypeScriptͰܕఆٛͨ͠৔߹ undefinedͷνΣοΫ Τϥʔ͕ग़ͳ͘ͳΔ όάΛະવʹ๷͛ͯ࠷ߴ

  19. • ͨͩ͜͠Ε͸ܕఆ͕͖ٛͪΜͱ͞Ε͍ͯΔ৔߹ • ϥΠϒϥϦͰରԠ͍ͯ͠ͳ͍৔߹΋ͨ·ʹ͋Δ
 → any Ͱܕఆٛͯ͠৐Γ੾Δ͔͠ͳ͍
 → ٯʹόάͷԹচʹͳΓ΍͍͢ Graph͕ܕఆٛ͞Ε͍ͯͳ͍ͱΤϥʔ͕ग़ͳ͍

  20. Enjoy TypeScript!