Slide 1
Slide 1 text
このタイミングで Vue.js に TypeScript
を導入するには？
2019/09/04
江口 徹
Slide 2
Slide 2 text
江口 徹 (@egurinko)
● ギフティ入社３ヶ月と２１日目
● 前職は、KDDI で
インフラ → ウェブ
● 大学の頃は、VR
自己紹介
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
お話しすること
03
04
01
02
自己紹介
きっかけ
今、最適な
Vue × TS のスタイル
TS 化の注意点
Slide 5
Slide 5 text
お話ししないこと
Vuex の型づけ
Express との型づけ GraphQL × TS
React × TS
筋トレメニュー
Slide 6
Slide 6 text
なぜ、今 Vue と TypeScript ?
オフィス環境を監視するIoT アプリに
TSを導入したかった
Slide 7
Slide 7 text
Vue × TypeScript に２つスタイル
があるらしいけど、、
Slide 8
Slide 8 text
Class Style or Object Style ?
decorator Vue.extend()
Slide 9
Slide 9 text
Vue 2.5 以前は、Class Style 一択
any
Slide 10
Slide 10 text
Object Style の改善（Vue 2.5 以降）
● this が推論される
● Props に型もつけられ
る
Slide 11
Slide 11 text
Vue3.0 RFCs の中での一コマ
● クラススタイルが
正式にドロップ通告
● しばらくして、方針転換
● 最新アップデートに
ついていけないかも
Slide 12
Slide 12 text
比較
読みやすさ
公式サポート
TSとの連携
圧倒的に Object Style
Class Style の扱いがいまいち
Vue2.5 以降、Class Style との
遜色がなくなってきた
Object Style を選択し、Vue3.0 に備えるべき
Slide 13
Slide 13 text
Object Style (Vue.extend)
の注意点
Slide 14
Slide 14 text
よくある投稿
Slide 15
Slide 15 text
原因１：“noImplicitThis”: true
false の状態では、
this = any
になってしまい推論効かず
Slide 16
Slide 16 text
原因２：computed の戻り値に型付いてない
annotation 必須
Slide 17
Slide 17 text
なんで computed の annotation が this に影響？
Slide 18
Slide 18 text
なんで computed の annotation が this に影響？
{ name: string }
Slide 19
Slide 19 text
なんで computed の annotation が this に影響？
{ greeting: string }
Slide 20
Slide 20 text
なんで computed の annotation が this に影響？
{ greet: void }
Slide 21
Slide 21 text
なんで computed の annotation が this に影響？
{ name: string }
{ greeting: string }
{ greet: void }
Vue
Slide 22
Slide 22 text
なんで computed の annotation が this に影響？
{ name: string }
{ greeting: string }
{ greet: void }
Vue
Slide 23
Slide 23 text
Vue.extend の注意点
noImplicitThis: true にしてね
01
computed には annotation をつけてね
02
Slide 24
Slide 24 text
ありがとうございます
TS 化後の IoT アプリは↓