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

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

69b4dadef85efe143ac825b62d36ed7c?s=128

果物リン

March 23, 2020
Tweet

Transcript

  1. Vue.jsを漸進的に Vue.tsへ変えていく Ռ෺Ϧϯ גࣜձࣾελσΟετ Roppongi.ts #1 2020/03/23

  2. 自己紹介 • Ռ෺Ϧϯ@FruitRiin • ࣗশVue͸͍͍͓ͧͶʔ͞Μ • גࣜձࣾελσΟετॴଐ • ࠓ݄ೖࣾ͠·ͨ͠ʂ •

    TS ͻΑ͜੎Ͱ͢ɻ͓खॊΒ͔ʹɻ
  3. None
  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 $MBTT4UZMF
  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