VueでTypeScriptを始める 3つのStyle/3 style to start vue with typescript

VueでTypeScriptを始めたくなった！
で、どうすればいいのか知りたいし比較したくなったんだよ

Transcript

1. VueでTypeScriptを始める ３つのStyle גࣜձࣾΏΊΈ Ռ෺Ϧϯ 2020/01/23 Yumemi.vue #5
2. 自己紹介 • Ռ෺Ϧϯ • גࣜձࣾΏΊΈ • ϑϩϯτΤϯυΤϯδχΞ • Vue͸͍͍ͧ
3. ຊ೔ͷηογϣϯͷॾ஫ҙ • ࢲ͸VueʹTypeScriptೖΕͨ͜ͱ͕͋Μ·Γͳ͍Ͱ͢ • ࠓ೔ͷͨΊʹ̏ύλʔϯશ෦ࢼͨ͠ • ϊ΢ϋ΢ͱ͔Yakͱ͔ڭ͑ͯԼ͍͞ • TypeScriptͦͷ΋ͷ΍ܕͷ࿩͸͠·ͤΜ • Vuexʹ͍ͭͯ͸৮Ε·ͤΜ • Vue CLI v3Ͱ࡞ͬͨϓϩδΣΫτͰࢼͯ͠·͢
4. VueにTypeScriptを導入する方法３つ • Class Style Component • Vue.extendʢಛʹ໊લ͕͋ΔΘ͚Ͱ͸ͳ͍ʁʣ • Composition API(RFC as of 2020/1/23)
5. ൺ΂ͯΈΑ͏ʂ
6. ຊ೔ͷαϯϓϧϓϩδΣΫτ • vue.js + typescript = vue.ts ͜ͱ͸͡Ί - Qiita
 https://qiita.com/nrslib/items/be90cc19fa3122266fd7
 ͜ͷهࣄͷίʔυΛશ໘తʹ࠾༻ • ࠓճͷίʔυ͸͜͜ͰݟΕ·͢ • Github fruitriin/vue-ts-test 
 https://github.com/fruitriin/vue-ts-test
8. 仕様 • ѫࡰͷϝοηʔδʮHelloʯͱΧ΢ϯτ਺͕දࣔ͞Ε͍ͯΔ • MyButtonΛԡͨ͢ͼʹΞϥʔτ͕දࣔ͞ΕΧ΢ϯτ͕૿͑Δ • ॳճMyButtonΛԡ͢ͱѫࡰϝοηʔδ͕ʮ͜ΜʹͪΘʯʹมΘΔ • Χ΢ϯτ͕̏ʹͳΔͱ͖ɺผ్Ξϥʔτ͕ͰΔ • Χ΢ϯτ͕̏Ҏ্ͷͱ͖ɺʮৗ࿈͞ΜͰ͢ʯͱදࣔ͞ΕΔ • ResetButtonΛԡ͢ͱѫࡰϝοηʔδ͕Helloʹ໭Δ
9. サンプルプロジェクト概説 • Home.vueʢ਌ίϯϙʔωϯτʣ • MyButtonʢࢠίϯϙʔωϯτ1ʣ • ResetButtonʢࢠίϯϙʔωϯτ2ʣ
10. Home.vue • dataʹgreatText = “Hello” ͱ count = 0 • methodsʹonMyButtonClicked(count) • this.greatText = ͜ΜʹͪΘ, 
 this.count = count • Computed ʹ isRegular = this.count >= 3 • Watch ʹ count === 3 ͳΒ alert()
11. MyButton.vue • data ʹ count: 0 • Props ʹ great :String • Methods ʹ onClcik() • this.great Λalert, this.countΛ +1
 click ΠϕϯτͰ this.count Λ emit up
12. Reset.vue • data ʹ initialValue • Props ʹ value: String • Created Ͱ this.initialValue = this.value • Methods Ͱ • input(value) ͕ inputΠϕϯτͰvalueΛemit up • onClick() Ͱ this.input(this.initialValue)
13. ·͊Vueͷओཁͳػೳ͸
 Χόʔͯ͠Δͬͯ͜ͱͩΑ
14. Class Style Component
15. TypeScriptの導入 • vue add typescript • ର࿩ܗࣜͰ࣭໰ʹ౴͑Δ • Use class-style component syntax ʹ “YES”
16. 増える依存関係 • dependencies • vue-class-component • vue-property-decorator • devDpendencies • @vue/cli-plugin-typescript • typescript
17. 自動生成されるファイル • tsconfig.json, shims-tsx.d.ts, 
 shims-vue.d.ts ͕ࣗಈੜ੒͞ΕΔ
18. Let’s TSԽʂ
19. lang=ts と型注釈import • <script lang=ts> • Import { ܕ஫ऍ } from “vue-property-decorator”
20. @ComponentデコレータとVue継承クラス • @Component σίϨʔλΛॻ͍ͯͦͷதʹ components Λॻ͘ • σίϨʔλ͸TypeScriptͷSyntax • export default class {ClassName} extends Vue ͱॻ͘
21. 参照Componentsがないとき • @Componet σίϨʔλͷҾ਺͸লུͰ͖Δ
22. クラスのプロパティとしてdataを定義 • ΫϥεͷϓϩύςΟ͸͢΂ͯϦΞΫςΟϒͳdataʹͳΔ
23. propsは@Props デコレータを使う • props͸ΫϥεͷϓϩύςΟʹ͢Δ • @Props() σίϨʔλΛ͚ͭΔͱPropsʹม׵͞ΕΔ • ෳ਺props͢Δ΋ͷ͕͋Ε͹౎౓ @PropsΛ͚ͭΔ
24. methodsをクラスのメソッドとして定義 • methods ΦϒδΣΫτ഑ԼͷVueͷϝιου͸
 Ϋϥεͷϝιουͱͯ͠֎ʹग़͢
25. this.$emit(event) を @Emit() に • this.$emit(“event”, hoge) Λ
 @Emit() σίϨʔλ෇͖ͷผϝιουʹ͢Δ • this.$emit()ͷୈ2Ҿ਺͸
 @Emit()σίϨʔλΛ͚ͭͨϝιουͷୈ1Ҿ਺ʹ͢Δ
26. Computed は getter メソッドにする • Computed ΦϒδΣΫτͷϝιου͔Β
 Ϋϥεͷgetter ϝιουͱͯ͠ఆٛ͢Δ • getter ϝιου͸computed ͱͯ͠ม׵͞ΕΔ
27. @Watchデコレータ付きメソッドにする • watch ΦϒδΣΫτ͸@Watch({؂ࢹର৅}) σίϨʔλ • ؂ࢹର৅ͱಉ໊ͷϝιου͡Όͳͯ͘Α͍ • ؂ࢹର৅΁ͷΞΫηε͸ thisܦ༝Ͱ΍ΔͬΆ͍ʁ
28. ͔ͳΓॻ͖ํ͕มΘΔ
29. Class Style Componentメリット • ֎෦͔Βܕ஫ऍΛ෇༩͢ΔελΠϧ • VuejsͷެࣜαϒϓϩδΣΫτ • ݁ߏμΠφϛοΫʹॻ͖׵͑Δඞཁ͕͋Δ • Vue v0.0.1͔Β͋ΔͷͰࢿྉ͕ͨ͘͞Μ͋Δ • උߟʣVue v3ͷRFCʹڍ͛ΒΕͯ٫Լ͞Ε͍ͯΔ
30. Vue.extend
31. TypeScriptの導入 • vue add typescript • ର࿩ܗࣜͰ࣭໰ʹ౴͑Δ • Use class-style component syntax ʹ “No”
32. 増える依存関係 • devDpendencies • @vue/cli-plugin-typescript • typescript
33. 自動生成されるファイル • tsconfig.json, shims-tsx.d.ts, 
 shims-vue.d.ts ͕ࣗಈੜ੒͞ΕΔ • ಺༰͸Class Style Componentͱಉ༷
34. Let’s TSԽʂ
35. lang=ts と import と Vue.extend • import ͢Δͷ͸vue͔Β • ExtendedVue ܕͷΦϒδΣΫτΛฦ͢ϝιουΛexport͢Δ
36. componentsはそのまま • ಛʹॻ͖׵͑Δඞཁͳ͠
37. dataに型を付ける • data͕ฦ͢ܕΛ·Δͬͱ෇͚Δ
38. methods, comupted, watch 等に型を付ける • Ҿ਺΍ฦΓ஋ʹܕΛ௥Ճ͢Δ
39. Ҏ্ʂ
40. Vue.extend メリット • Vue v2.4͔ΒVueຊମͷػೳͱͯ͠ొ৔ • ඞཁͳՕॴʹܕΛ௥Ճ͢Δ͚ͩͰ͓खܰಋೖ • ͓खܰ͗ͯ͢᠘͕ͳ͍͔ා͍Μ͚ͩͲ…
41. Composition API(RFC) in 2.x
42. TypeScriptの導入 • vue add typescript • ର࿩ܗࣜͰ࣭໰ʹ౴͑Δ • Use class-style component syntax ʹ “No” • yarn add @vue/composition-api
43. 依存関係、ファイルの自動生成 • ʢলུʣ
44. Let’s TSԽʂ
45. Vue.use(VueCompositionApi) • main.tsͰVue.use(VueCompositionApi)͢Δ
46. lang=tsとimportとcreateElement() • export default createComponent({}) ͰғΉ
47. setup() を生やす • createComponent({}) ͷதͰ setup() ϝιουΛੜ΍͢
48. • reactive()ͷฦΓ஋Λsetup() ͷฦΓ஋ʹؚΊΔͷ͕ϙΠϯτ • ίϯϙʔωϯτʹreturnͨ͠ϓϩύςΟ͕ੜ͑Δ data()をreactive()にする
49. templateの参照を変える • reactive ͷฦΓ஋Λreturn ͢ΔͱΦϒδΣΫτʹͳΔͷͰ஫ҙ {{count}} → {{state.count}}
50. data()はref()にもできる • refͰఆٛͨ͠஋ʹ͸ .value Λॻ͖׵͑Δ • refͰఆٛ͢ΔͱςϯϓϨʔτ͔ΒϑϥοτʹΞΫηεͰ͖Δ
51. propsはsetup()の第一引数 • props͸setup()ͷୈҰҾ਺ͱͯ͠౉͞ΕΔ • createComponentͷϓϩύςΟͷpropsΛࢀর͢Δ
52. methodsはsetupの中で定義してreturn • ؔ਺Λఆٛͯ͠setup()ͷreturnͷதʹؚΊΔ
53. Emitはsetup()の第2引数の中 • setup()ͷୈ2Ҿ਺ͷதʹemit() ͕͋ΔͷͰஔ͖׵͑Δ
54. Computed は computed()を使ってreturn • computed(callback) Λ࢖ͬͯcomputedΛఆٛ͢Δ • ඞͣreturnʹؚΊΔ
55. watchはsetup()の中でwatch()をコールする • ୈ1Ҿ਺͸reactiveͷ஋Λແ໊ؔ਺Ͱϥοϓͯ͠ฦ͢ • ୈ2Ҿ਺ʹϩδοΫΛॻ͘
56. setup() ͕ैདྷͷVueΠϯελϯεʹม׵
57. Composition APIメリット • ػೳ͝ͱʹίʔυΛ෼཭Ͱ͖ΔΑ͏ʹͳΔ • ίϯϙʔωϯτ͕ଟػೳԽ͍ͯ͘͠ͱ
 data, methods… ͳͲͰ۠੾ΒΕ͍ͯͯ
 ݟ௨͕͠ѱ͘ͳΔͷΛͳΜͱ͔͍ͨ͠ • “ίʔυͷ૊৫Խ” • ʢࠓճ͸ίʔυͷ෼཭Λαϯϓϧͯ͠ͳ͍ʣ
58. コードの機能ごとの組織化
59. 型インターフェースが良くなる • σίϨʔλ͸TC39ʹΑΔ࢓༷͕֬ఆͯ͠ͳ͍ • →Class Style Component͸RFC͔ΒഇҊ΁ • ैདྷͷํ๏Ͱ͸this͕ຐڥ • Composition APIͰ͸શ͘thisΛ࢖͍ͬͯͳ͍ • Pure JavaScriptͱͯ͠ਖ਼͘͠ॻ͍ͯػೳ͢Δ
60. easy͡Όͳ͍ʁ • ্ख͍ਓ͕ॻ͘ͱḿΔ͚Ͳ
 Լखͳਓ͕ॻ͘ͱࠞཚΛট͘͜ͱ͸RFCͰ΋ةዧ͞Ε͍ͯΔ • ্ख͍ਓ͕ॻ͍ͯḿΔέʔεͷϝϦοτ͕
 σϝϦοτΛ্ճΔͱ͍ͯ͠Δ • ެࣜυΩϡϝϯτͱ͔ӡ༻ͰΧόʔ
61. まとめ • Class Styled Component • ར༻ऀଟ͍ • Vue.extend() • ͓खܰͩ͠ݸਓతʹਪ͠ • Composition API • ෳࡶͳίϯϙʔωϯτͷݟ௨͠ΛΑ͘͢Δ
62. Let’͂ Vue.ts!