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

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

Transcript

1. このタイミングで Vue.js に TypeScript を導入するには？ 2019/09/04 江口 徹
2. 江口　徹 (@egurinko) • ギフティ入社３ヶ月と２１日目 • 前職は、KDDI で インフラ　→　ウェブ • 大学の頃は、VR 自己紹介
4. お話しすること 03 04 01 02 自己紹介 きっかけ 今、最適な Vue × TS のスタイル TS 化の注意点
5. お話ししないこと Vuex の型づけ Express との型づけ GraphQL × TS React × TS 筋トレメニュー
6. なぜ、今 Vue と TypeScript ? オフィス環境を監視するIoT アプリに TSを導入したかった
7. Vue × TypeScript に２つスタイル があるらしいけど、、
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. 原因１：“noImplicitThis”: true false の状態では、 this = any になってしまい推論効かず
16. 原因２：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 アプリは↓