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

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

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

69b4dadef85efe143ac825b62d36ed7c?s=128

果物リン

January 23, 2020
Tweet

Transcript

  1. VueでTypeScriptを始める 3つのStyle גࣜձࣾΏΊΈ Ռ෺Ϧϯ 2020/01/23 Yumemi.vue #5

  2. 自己紹介 • Ռ෺Ϧϯ • גࣜձࣾΏΊΈ • ϑϩϯτΤϯυΤϯδχΞ • Vue͸͍͍ͧ

  3. ຊ೔ͷηογϣϯͷॾ஫ҙ • ࢲ͸VueʹTypeScriptೖΕͨ͜ͱ͕͋Μ·Γͳ͍Ͱ͢ • ࠓ೔ͷͨΊʹ̏ύλʔϯશ෦ࢼͨ͠ • ϊ΢ϋ΢ͱ͔Yakͱ͔ڭ͑ͯԼ͍͞ • TypeScriptͦͷ΋ͷ΍ܕͷ࿩͸͠·ͤΜ •

    Vuexʹ͍ͭͯ͸৮Ε·ͤΜ • Vue CLI v3Ͱ࡞ͬͨϓϩδΣΫτͰࢼͯ͠·͢
  4. VueにTypeScriptを導入する方法3つ • 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
  7. None
  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!