Vue.jsを漸進的にVue.tsへ変えていく/ Vue.js project progressive convert to TypeScript

私はVueが好きだ！そしてTSがいいのはわかった！
で、どうやったらTSにできそう？

Appendix:
fruitriin/VueTStest: Vue2.6 をコミット単位で徐々に TS化
https://github.com/fruitriin/VueTStest
VueでTypeScriptを始める 3つのStyle - Speaker Deck
https://speakerdeck.com/fruitriin/3-style-to-start-vue-with-typescript
[Vue+TypeScript] Vue.extend で Vue らしさを保ちつつ TypeScript で書くときの型宣言についてまとめた - Qiita 
https://qiita.com/is_ryo/items/6fc799ba4214db61d8ab
typescript+vueで独自プラグインを実装する方法 - Qiita 
https://qiita.com/gaku3601/items/86b5741eff83fa40ef5a
Vue.js-Plugins with TypeScript - Peter's（英語）
https://www.mistergoodcat.com/post/vuejs-plugins-with-typescript

Transcript

1. Vue.jsを漸進的に Vue.tsへ変えていく Ռ෺Ϧϯ גࣜձࣾελσΟετ Roppongi.ts #1 2020/03/23
2. 自己紹介 • Ռ෺Ϧϯ@FruitRiin • ࣗশVue͸͍͍͓ͧͶʔ͞Μ • גࣜձࣾελσΟετॴଐ • ࠓ݄ೖࣾ͠·ͨ͠ʂ • TS ͻΑ͜੎Ͱ͢ɻ͓खॊΒ͔ʹɻ
4. Vue.jsのProjectを徐々にTS化したい • طଘͷϓϩδΣΫτ͕͋Δ • Ұ౓ʹTSԽ͢Δͷ͸ݱ࣮తͰ͸ͳ͍ • allowJs ͱ͍͏ΦϓγϣϯͰࠞࡏͰ͖ΔΒ͍͠
5. allowJsͰ໰୊͸ى͖Δͷ͔ʁ
6. ໨ඪ • αϯϓϧϓϩδΣΫτΛJSͰ࡞Δ • Vuex͸ʢ࿩͕΍΍͘͜͠ͳΔͷͰʣҰ୴์ஔ • Vue CLI4ܥΛ࢖͏ • TSԽͯ͠Կ͕ى͜Δͷ͔ɺԿ͕Ͱ͖ͳ͍ͷ͔Λௐ΂Δ
7. αϯϓϧϓϩδΣΫτͷલఏ • ࠷௿3૚ͷίϯϙʔωϯτʹωετ͍ͯ͠Δ • Prop Down, Event Up(Emit) ͢Δ • MixinΛ࢖ͬͯΈΔ • PluginΛࣗ࡞ͯ͠άϩʔόϧొ࿥͓ͯ͘͠
8. Let’s Try!
9. Project構成 • App.vue • TodoList.vue(Props Down) • TodoItem.vue(Props Down) • TodoForm.vue(Emit) • (mixin)MyMixin.vue • MyPluginΛGlobalʹ
10. とりあえず vue add typescript • Allow .js files to be compiled ͸ Yes!
11. ͍͍ײ͡ʹϑΝΠϧੜ੒ ͯ͘͠ΕΔʂ ʢVue CLI Serviceʹ৐ͬͯͳ͍ͱ͜ͷล͕େมʣ
12. package.jsonのextendsを書き換え(ESLint) • ͋ͱ͔ΒtypescriptΛvue add ͢Δͱ @vue/typescript ͕ೖΔ • @vue/typescript/recommended ʹม͓͑ͯ͘
13. Class Style or Vue.extend()ʁ • ޷Έͷ໰୊ʁ • ͍ͯ͠ݴ͑͹ Class Style ͸v3Ͱ RFCඇ࠾୒ 7VFFYUFOE $MBTT
    4UZMF
14. VueͰTypeScriptΛ࢝ΊΔ 3ͭͷStyle https://speakerdeck.com/fruitriin/3-style-to-start-vue-with-typescript
15. ࠓճ͸Vue.extend()Ͱ͍͖·͢
16. TodoList.vueをTS化 • ͜ͷล͕جຊ
17. TodoItem.vueをTS化 • Computed ͸ ໭Γ஋ͷܕΛ͚ͭΔ
18. PropsのObjectに型をつける • itemͷܕ͕Objectʢ㲈Anyʣ • Object as PropType<ࣗݾఆٛͨ͠ܕ>ͰܕΛ͚ͭΕΔ
19. PropTypeでESLintがおこ？ • package.jsonͷextendsΛ ॻ͖׵͑๨Ε͍ͯΔͷͰલͷखॱʹ΋ͲΔ
20. Mixinするにはas InstanceType • Mixinʹੜ͍͑ͯΔ ϝιου౳͸ਪ࿦Ͱ͖ͳ͍ • InstanceTypeͰ ໌ࣔతʹthisʹܕ෇͚͢Δ
21. 実は）Mixin元のメソッドがAnyなのでError • Mixinݩͷϝιουʹ ܕΛ෇͚Δͱ Τϥʔ͕ফ͑Δ
22. Pluginはinterfaceを定義する • ֎෦ʹܕఆ͕ٛ͋ΔϓϥάΠϯͷimportͱ͔͸͜ͷล(axios͕ྫ) https://www.mistergoodcat.com/post/vuejs-plugins-with-typescript
23. All JS components convert to TS! • JSίϯϙʔωϯτͷTSԽ͕׬ྃʂ • ్தͰΤϥʔʹ΋ͳͬͯͳ͔ͬͨͷͰ ࠞࡏͯͯ͠΋͍͚ΔͱΘ͔ͬͨ • Plugin, Mixin͸ઌʹܕ෇͚͕ඞཁ
24. 得られるもの • Script಺Ͱܕਪ࿦ɺܕݕ͕ࠪ΄΅׬ᘳʹޮ͘͸ͣ • VSCodeͰͷίʔυิ׬΋όϦόϦʂ
25. ಘΒΕͳ͍΋ͷ • templateͷܕݕࠪ • ͦ΋ͦ΋ܕݕ͕ࠪߦΘΕ͍ͯͳ͍ • Propsͷܕݕࠪ • Emitͷܕݕࠪ • templateΛܦ༝͢ΔͷͰ੩తʹ͸ݕࠪͰ͖ͳ͍ɻ࣮ߦ͕ඞཁ • JSΛimportͨ͠ͱ͜ΖʹAny͕࢒Γ͕ͪ
26. Two more thing!
27. Vetur: Template Interpolation Service • Veturʹ࣮૷͞Ε͍ͯΔ࣮ݧతͳػೳ • ݱࡏͷͱ͜ΖσϑΥϧτΦϑ • template಺Ͱthis.ͰΞΫηεͰ͖Δ ϝιουɺϓϩύςΟetcͷଘࡏΛνΣοΫͰ͖Δ ˍܕ৘ใ͕πʔϧνοϓͰΘ͔Δ
28. VTI(Veture Terminal Interface) • npm Package • ͖ͬ͞ͷ΍͕ͭίϯιʔϧͰνΣοΫͰ͖Δ ͭ·ΓɺCIʹ૊ΈࠐΉ͜ͱ͕Ͱ͖Δʂ ʢͬͯͲͬͪ΋katashin͞Μ͕ݴͬͯͨʣ
29. ʢ·ͩʣͰ͖ͳ͍͜ͱ • templateͰ౉͢PropsͷܕɾଘࡏνΣοΫ • template͔Β໯͏EmitͷܕɾଘࡏνΣοΫ • jsͷίϯϙʔωϯτͷ׬શͳղੳ ʢॻ͖ํʁʹΑͬͯanyʹͳͬͯݕग़Ͱ͖ͳ͔ͬͨΓʁʣ Props, Emitͷѻ͍͸َ໳Β͍͠…ʁ
30. まとめ • ҙ֎ͱࠞࡏͤͯ͞΋͍͚Δ • allowJSͯ͠΋౜ಥʹany͕ग़ͯ͘Δ͚ͩͰ ͨͩͪʹ໰୊͸ͳ͍ʁ • Vue.extend() ͸ॻ͖׵͑΋ҧ࿨ײ΋গͳ͍ʢॴײ • Mixin, Plugin͔ΒखΛ͚ͭͨ΄͏͕Αͦ͞͏ʁ
31. Vue.ts Ͳ͏Ͱ͔͢ʁ
32. Appendix • fruitriin/VueTStest: Vue2.6 Λίϛοτ୯ҐͰঃʑʹ TSԽ https://github.com/fruitriin/VueTStest • VueͰTypeScriptΛ࢝ΊΔ 3ͭͷStyle - Speaker Deck https://speakerdeck.com/fruitriin/3-style-to-start-vue-with-typescript • [Vue+TypeScript] Vue.extend Ͱ Vue Β͠͞Λอͪͭͭ TypeScript Ͱॻ͘ͱ͖ͷܕએݴʹ͍ͭͯ·ͱ Ίͨ - Qiita https://qiita.com/is_ryo/items/6fc799ba4214db61d8ab • typescript+vueͰಠࣗϓϥάΠϯΛ࣮૷͢Δํ๏ - Qiita https://qiita.com/gaku3601/items/86b5741eff83fa40ef5a