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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

自己紹介 • Ռ෺Ϧϯ@FruitRiin • ࣗশVue͸͍͍͓ͧͶʔ͞Μ • גࣜձࣾελσΟετॴଐ • ࠓ݄ೖࣾ͠·ͨ͠ʂ • TS ͻΑ͜੎Ͱ͢ɻ͓खॊΒ͔ʹɻ

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Vue.jsのProjectを徐々にTS化したい • طଘͷϓϩδΣΫτ͕͋Δ • Ұ౓ʹTSԽ͢Δͷ͸ݱ࣮తͰ͸ͳ͍ • allowJs ͱ͍͏ΦϓγϣϯͰࠞࡏͰ͖ΔΒ͍͠

Slide 5

Slide 5 text

allowJsͰ໰୊͸ى͖Δͷ͔ʁ

Slide 6

Slide 6 text

໨ඪ • αϯϓϧϓϩδΣΫτΛJSͰ࡞Δ • Vuex͸ʢ࿩͕΍΍͘͜͠ͳΔͷͰʣҰ୴์ஔ • Vue CLI4ܥΛ࢖͏ • TSԽͯ͠Կ͕ى͜Δͷ͔ɺԿ͕Ͱ͖ͳ͍ͷ͔Λௐ΂Δ

Slide 7

Slide 7 text

αϯϓϧϓϩδΣΫτͷલఏ • ࠷௿3૚ͷίϯϙʔωϯτʹωετ͍ͯ͠Δ • Prop Down, Event Up(Emit) ͢Δ • MixinΛ࢖ͬͯΈΔ • PluginΛࣗ࡞ͯ͠άϩʔόϧొ࿥͓ͯ͘͠

Slide 8

Slide 8 text

Let’s Try!

Slide 9

Slide 9 text

Project構成 • App.vue • TodoList.vue(Props Down) • TodoItem.vue(Props Down) • TodoForm.vue(Emit) • (mixin)MyMixin.vue • MyPluginΛGlobalʹ

Slide 10

Slide 10 text

とりあえず vue add typescript • Allow .js ﬁles to be compiled ͸ Yes!

Slide 11

Slide 11 text

͍͍ײ͡ʹϑΝΠϧੜ੒ ͯ͘͠ΕΔʂ ʢVue CLI Serviceʹ৐ͬͯͳ͍ͱ͜ͷล͕େมʣ

Slide 12

Slide 12 text

package.jsonのextendsを書き換え(ESLint) • ͋ͱ͔ΒtypescriptΛvue add ͢Δͱ @vue/typescript ͕ೖΔ • @vue/typescript/recommended ʹม͓͑ͯ͘

Slide 13

Slide 13 text

Class Style or Vue.extend()ʁ • ޷Έͷ໰୊ʁ • ͍ͯ͠ݴ͑͹ Class Style ͸v3Ͱ RFCඇ࠾୒ 7VFFYUFOE $MBTT4UZMF

Slide 14

Slide 14 text

VueͰTypeScriptΛ࢝ΊΔ 3ͭͷStyle https://speakerdeck.com/fruitriin/3-style-to-start-vue-with-typescript

Slide 15

Slide 15 text

ࠓճ͸Vue.extend()Ͱ͍͖·͢

Slide 16

Slide 16 text

TodoList.vueをTS化 • ͜ͷล͕جຊ

Slide 17

Slide 17 text

TodoItem.vueをTS化 • Computed ͸ ໭Γ஋ͷܕΛ͚ͭΔ

Slide 18

Slide 18 text

PropsのObjectに型をつける • itemͷܕ͕Objectʢ㲈Anyʣ • Object as PropType<ࣗݾఆٛͨ͠ܕ>ͰܕΛ͚ͭΕΔ

Slide 19

Slide 19 text

PropTypeでESLintがおこ？ • package.jsonͷextendsΛ ॻ͖׵͑๨Ε͍ͯΔͷͰલͷखॱʹ΋ͲΔ

Slide 20

Slide 20 text

Mixinするにはas InstanceType • Mixinʹੜ͍͑ͯΔ ϝιου౳͸ਪ࿦Ͱ͖ͳ͍ • InstanceTypeͰ ໌ࣔతʹthisʹܕ෇͚͢Δ

Slide 21

Slide 21 text

実は）Mixin元のメソッドがAnyなのでError • Mixinݩͷϝιουʹ ܕΛ෇͚Δͱ Τϥʔ͕ফ͑Δ

Slide 22

Slide 22 text

Pluginはinterfaceを定義する • ֎෦ʹܕఆ͕ٛ͋ΔϓϥάΠϯͷimportͱ͔͸͜ͷล(axios͕ྫ) https://www.mistergoodcat.com/post/vuejs-plugins-with-typescript

Slide 23

Slide 23 text

All JS components convert to TS! • JSίϯϙʔωϯτͷTSԽ͕׬ྃʂ • ్தͰΤϥʔʹ΋ͳͬͯͳ͔ͬͨͷͰ ࠞࡏͯͯ͠΋͍͚ΔͱΘ͔ͬͨ • Plugin, Mixin͸ઌʹܕ෇͚͕ඞཁ

Slide 24

Slide 24 text

得られるもの • Script಺Ͱܕਪ࿦ɺܕݕ͕ࠪ΄΅׬ᘳʹޮ͘͸ͣ • VSCodeͰͷίʔυิ׬΋όϦόϦʂ

Slide 25

Slide 25 text

ಘΒΕͳ͍΋ͷ • templateͷܕݕࠪ • ͦ΋ͦ΋ܕݕ͕ࠪߦΘΕ͍ͯͳ͍ • Propsͷܕݕࠪ • Emitͷܕݕࠪ • templateΛܦ༝͢ΔͷͰ੩తʹ͸ݕࠪͰ͖ͳ͍ɻ࣮ߦ͕ඞཁ • JSΛimportͨ͠ͱ͜ΖʹAny͕࢒Γ͕ͪ

Slide 26

Slide 26 text

Two more thing!

Slide 27

Slide 27 text

Vetur: Template Interpolation Service • Veturʹ࣮૷͞Ε͍ͯΔ࣮ݧతͳػೳ • ݱࡏͷͱ͜ΖσϑΥϧτΦϑ • template಺Ͱthis.ͰΞΫηεͰ͖Δ ϝιουɺϓϩύςΟetcͷଘࡏΛνΣοΫͰ͖Δ ˍܕ৘ใ͕πʔϧνοϓͰΘ͔Δ

Slide 28

Slide 28 text

VTI(Veture Terminal Interface) • npm Package • ͖ͬ͞ͷ΍͕ͭίϯιʔϧͰνΣοΫͰ͖Δ ͭ·ΓɺCIʹ૊ΈࠐΉ͜ͱ͕Ͱ͖Δʂ ʢͬͯͲͬͪ΋katashin͞Μ͕ݴͬͯͨʣ

Slide 29

Slide 29 text

ʢ·ͩʣͰ͖ͳ͍͜ͱ • templateͰ౉͢PropsͷܕɾଘࡏνΣοΫ • template͔Β໯͏EmitͷܕɾଘࡏνΣοΫ • jsͷίϯϙʔωϯτͷ׬શͳղੳ ʢॻ͖ํʁʹΑͬͯanyʹͳͬͯݕग़Ͱ͖ͳ͔ͬͨΓʁʣ Props, Emitͷѻ͍͸َ໳Β͍͠…ʁ

Slide 30

Slide 30 text

まとめ • ҙ֎ͱࠞࡏͤͯ͞΋͍͚Δ • allowJSͯ͠΋౜ಥʹany͕ग़ͯ͘Δ͚ͩͰ ͨͩͪʹ໰୊͸ͳ͍ʁ • Vue.extend() ͸ॻ͖׵͑΋ҧ࿨ײ΋গͳ͍ʢॴײ • Mixin, Plugin͔ΒखΛ͚ͭͨ΄͏͕Αͦ͞͏ʁ

Slide 31

Slide 31 text

Vue.ts Ͳ͏Ͱ͔͢ʁ

Slide 32

Slide 32 text

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