このタイミングで Vue.js に TypeScript を導入するには?

651dbae5f19db82c6b89191a6c9dcd47?s=47 Toru Eguchi
September 04, 2019

このタイミングで Vue.js に TypeScript を導入するには?

2019年9月段階で、Vue.js に TypeScript を導入するなら、Class style か Object Style かについて考察しています。また、Object Style で導入する場合の注意点などを最後にまとめています。

651dbae5f19db82c6b89191a6c9dcd47?s=128

Toru Eguchi

September 04, 2019
Tweet

Transcript

  1. このタイミングで Vue.js に TypeScript を導入するには? 2019/09/04 江口 徹

  2. 江口 徹 (@egurinko) • ギフティ入社3ヶ月と21日目 • 前職は、KDDI で インフラ → ウェブ • 大学の頃は、VR

    自己紹介
  3. None
  4. お話しすること 03 04 01 02 自己紹介 きっかけ 今、最適な Vue ×

    TS のスタイル TS 化の注意点
  5. お話ししないこと Vuex の型づけ Express との型づけ GraphQL × TS React ×

    TS 筋トレメニュー
  6. なぜ、今 Vue と TypeScript ? オフィス環境を監視するIoT アプリに TSを導入したかった

  7. Vue × TypeScript に2つスタイル があるらしいけど、、

  8. Class Style or Object Style ? decorator Vue.extend()

  9. Vue 2.5 以前は、Class Style 一択 any

  10. Object Style の改善(Vue 2.5 以降) • this が推論される • Props

    に型もつけられ る
  11. Vue3.0 RFCs の中での一コマ • クラススタイルが 正式にドロップ通告 • しばらくして、方針転換 • 最新アップデートに

    ついていけないかも
  12. 比較 読みやすさ 公式サポート TSとの連携 圧倒的に Object Style Class Style の扱いがいまいち

    Vue2.5 以降、Class Style との 遜色がなくなってきた Object Style を選択し、Vue3.0 に備えるべき
  13. Object Style (Vue.extend) の注意点

  14. よくある投稿

  15. 原因1:“noImplicitThis”: true false の状態では、 this = any になってしまい推論効かず

  16. 原因2:computed の戻り値に型付いてない annotation 必須

  17. なんで computed の annotation が this に影響?

  18. なんで computed の annotation が this に影響? { name: string

    }
  19. なんで computed の annotation が this に影響? { greeting: string

    }
  20. なんで computed の annotation が this に影響? { greet: void

    }
  21. なんで computed の annotation が this に影響? { name: string

    } { greeting: string } { greet: void } Vue
  22. なんで computed の annotation が this に影響? { name: string

    } { greeting: string } { greet: void } Vue
  23. Vue.extend の注意点 noImplicitThis: true にしてね 01 computed には annotation をつけてね

    02
  24. ありがとうございます TS 化後の IoT アプリは↓