Pro Yearly is on sale from $80 to $50! »

JavaScriptで実装したVueJS プロジェクトをTypeScriptへ移行する話

44c8b22341e580eba01ac54024aed0c1?s=47 53
May 27, 2019

JavaScriptで実装したVueJS プロジェクトをTypeScriptへ移行する話

Vue CLI 3 + JavaScript で作った VueJSプロジェクトを TypeScript へ移行して、ついでに Vuex Module もクラススタイルにして、バインドをデコレータで行った話です。

44c8b22341e580eba01ac54024aed0c1?s=128

53

May 27, 2019
Tweet

Transcript

  1. +BWB4DSJQUͰ࣮૷ͨ͠ 7VF+4ϓϩδΣΫτΛ 5ZQF4DSJQU΁Ҡߦ͢Δ࿩ 
 3PQQPOHJWVF
 
 (P5BEBOP

  2. ࣗݾ঺հ w ୞໺߶ (JUIVCBCMF  w גࣜձࣾ(BNF8JUI
 αʔϏε։ൃ෦ w ϑϩϯτΤϯυΤϯδχΞ

    w 3PQQPOHJWVFӡӦϝϯόʔ w /VYUެࣜυΩϡϝϯτ຋༁
  3. ࠓ೔࿩͢͜ͱ w +BWB4DSJQU͔Β5ZQF4DSJQU΁Ҡߦ w 7VFίϯϙʔωϯτ w 7VFY4UPSF

  4. ର৅ऀ w +BWB4DSJQUͰ7VF+4ϓϩδΣΫτΛ࣮૷ͨ͜͠ͱ͋Δ w 7VFYΛ࢖ͬͨঢ়ଶ؅ཧΛཧղ͍ͯ͠Δ͜ͱ w 5ZQF4DSJQUͰ7VF+4ϓϩδΣΫτͷ࣮૷͸ɺ
 ͜Ε͔Βֶ΅͏ͱ͍ͯ͠Δ

  5. ͍ͭ΍Δ͔ ͳͥ΍Δͷ͔ ϓϩδΣΫτ͕ ༧૝ΑΓେ͖͘ͳͬͨ

  6. ͍ͭ΍Δ͔ ͳͥ΍Δͷ͔ ϦϑΝΫλϦϯάΛ ޮ཰Α͘ߦ͍͍ͨ

  7. ͍ͭ΍Δ͔ ͳͥ΍Δͷ͔ ෭࡞༻ʹک͑ͳ͍

  8. ͍ͭ΍Δ͔ ͳͥ΍Δͷ͔ 7VF+4/VYU+4͕ 5ZQF4DSJQU 54 Λެࣜαϙʔτ

  9. ͍ͭ΍Δ͔ ͳͥ΍Δͷ͔ ະͩ5ZQF4DSJQUͰ
 7VF+4ΞϓϦ࡞ͬͨ͜ͱͳ͍ʜ

  10. ಘΔֶͼ 7VF+4ϓϩδΣΫτ΁
 5ZQF4DSJQUͷΠϯετʔϧ

  11. ಘΔֶͼ 5ZQF4DSJQUΛ࢖༻ͨ͠
 7VFίϯϙʔωϯτͷ࣮૷

  12. ಘΔֶͼ 5ZQF4DSJQUͰ
 7VFY.PEVMFͷ࡞੒

  13. ಘΔֶͼ 7VFY.PEVMFΛ
 7VFίϯϙʔωϯτʹόΠϯυ

  14. ։ൃ؀ڥ w /PEF+4 w :BSO w 7VF$-*

  15. ϓϩδΣΫτߏ੒ w 7VF$-*͔Β࡞ΒΕͨ 7VF+4ϓϩδΣΫτ

  16. ϓϩδΣΫτߏ੒ TSD ᵓDPNQPOFOUT ᴹᵓ)FMMPWVF ᴹᵋ8PSMEKTY ᵓSPVUFS ᴹᵋJOEFYKT ᵓTUPSF ᴹᵓGPPKT ᴹᵋJOEFYKT

    ᵓWJFXT ᴹᵓ)PNFWVF ᴹᵋ4UPSFWVF ᵓ"QQWVF ᵋNBJOKT
  17. ϓϩδΣΫτߏ੒ w جຊతʹ͸ಉ͜͡ͱΛ͢Δ
 ͭͷίϯϙʔωϯτ w 4'$ 4JOHMF'JMF$PNQPOFOU  w +49

  18. ϓϩδΣΫτߏ੒ w جຊతʹ͸ಉ͜͡ͱΛ͢Δ
 ͭͷίϯϙʔωϯτ w 4'$ 4JOHMF'JMF$PNQPOFOU  w +49

  19. ϓϩδΣΫτߏ੒ w 7VFY.PEVMFͷTUBUFΛ
 7VFίϯϙʔωϯτʹόΠϯυ

  20. Ͱ͸ɺҠߦ?!!

  21. 7VF+4ϓϩδΣΫτ΁ 5ZQF4DSJQUͷΠϯετʔϧ

  22. WVFBEE!WVFUZQFTDSJQU

  23. 6TFDMBTTTUZMFDPNQPOFOUTZOUBY  :O  6TF#BCFMBMPOHTJEF5ZQF4DSJQUGPSBVUPEFUFDUFEQPMZpMMT  :O

  24. : 

  25. Changes not staged for commit: (use "git add/rm <file>..." to

    update what will be committed) (use "git checkout -- <file>..." to discard changes in working directory) modified: .eslintrc.js modified: package.json modified: src/App.vue deleted: src/main.js deleted: src/router/index.js deleted: src/store/foo.js deleted: src/store/index.js modified: src/views/Home.vue modified: yarn.lock Untracked files: (use "git add <file>..." to include in what will be committed) src/components/HelloWorld.vue src/main.ts src/router/index.ts src/shims-tsx.d.ts src/shims-vue.d.ts src/store/foo.ts src/store/index.ts tsconfig.json
  26. Changes not staged for commit: (use "git add/rm <file>..." to

    update what will be committed) (use "git checkout -- <file>..." to discard changes in working directory) modified: .eslintrc.js modified: package.json modified: src/App.vue deleted: src/main.js deleted: src/router/index.js deleted: src/store/foo.js deleted: src/store/index.js modified: src/views/Home.vue modified: yarn.lock Untracked files: (use "git add <file>..." to include in what will be committed) src/components/HelloWorld.vue src/main.ts src/router/index.ts src/shims-tsx.d.ts src/shims-vue.d.ts src/store/foo.ts src/store/index.ts tsconfig.json
  27. Changes not staged for commit: (use "git add/rm <file>..." to

    update what will be committed) (use "git checkout -- <file>..." to discard changes in working directory) modified: .eslintrc.js modified: package.json modified: src/App.vue deleted: src/main.js deleted: src/router/index.js deleted: src/store/foo.js deleted: src/store/index.js modified: src/views/Home.vue modified: yarn.lock Untracked files: (use "git add <file>..." to include in what will be committed) src/components/HelloWorld.vue src/main.ts src/router/index.ts src/shims-tsx.d.ts src/shims-vue.d.ts src/store/foo.ts src/store/index.ts tsconfig.json
  28. HJUDIFDLPVU)&"%TSD"QQWVFTSDWJFXT)PNFWVF

  29. SNTSDDPNQPOFOUT)FMMP8PSMEWVF

  30. 7VFY.PEVMF w 54ίϯύΠϥ͕ΤϥʔΛग़͍ͯ͠ΔͷͰղܾ͢Δ w ؔ਺Ҿ਺ʹܕΛఆٛ

  31. TSDTUPSFGPPUT FYQPSUEFGBVMU\ লུ NVUBUJPOT\ TFU5FYU TUBUFBOZ OFX5FYUTUSJOH \ TUBUFUFYUOFX5FYU ^

    ^  HFUUFST\ UFYU6QQFS TUBUFBOZ \ SFUVSOTUBUFUFYUUP6QQFS$BTF  ^ ^ ^
  32. 54ίϯύΠϧ੒ޭ

  33. 5ZQF4DSJQUΛ࢖༻ͨ͠ 7VFίϯϙʔωϯτͷ࣮૷

  34. 4'$ 4JOHMF'JMF$PNQPOFOU Λ
 ΫϥεελΠϧ7VFίϯϙʔωϯτԽ

  35. TDSJQUMBOHlUTz

  36. 5ZQF4DSJQUͷσίϨʔλΛ࢖͏ ΫϥεελΠϧ
 7VFίϯϙʔωϯτ

  37. WVFQSPQFSUZEFDPSBUPS wWVFBEE!WVFUZQFTDSJQU wґଘϞδϡʔϧ͕ΠϯετʔϧࡁΈ

  38. WVFQSPQFSUZEFDPSBUPS !$PNQPOFOUΛ࢖͏ͱɺ
 7VFίϯϙʔωϯτͷ
 ϝλσʔλ͕Ϋϥεʹ౉͞ΕΔ

  39. WVFQSPQFSUZEFDPSBUPS ϝλσʔλ  EBUB NFUIPET DPNQPOFOUT NJYJOͳͲ

  40. σίϨʔλ෇༩ TSDDPNQPOFOUT)FMMPWVF JNQPSU\$PNQPOFOU 7VF^GSPNWVFQSPQFSUZEFDPSBUPS !$PNQPOFOU FYQPSUEFGBVMUDMBTT)FMMPFYUFOET7VF\ QSJWBUFUFYUTUSJOH)FMMP HFUUFYU6QQFS TUSJOH\ SFUVSOUIJTUFYUUP6QQFS$BTF

     ^ ^
  41. 7VFΫϥεΛܧঝ TSDDPNQPOFOUT)FMMPWVF JNQPSU\$PNQPOFOU 7VF^GSPNWVFQSPQFSUZEFDPSBUPS !$PNQPOFOU FYQPSUEFGBVMUDMBTT)FMMPFYUFOET7VF\ QSJWBUFUFYUTUSJOH)FMMP HFUUFYU6QQFS TUSJOH\ SFUVSOUIJTUFYUUP6QQFS$BTF

     ^ ^
  42. EBUBΫϥεϓϩύςΟ TSDDPNQPOFOUT)FMMPWVF JNQPSU\$PNQPOFOU 7VF^GSPNWVFQSPQFSUZEFDPSBUPS !$PNQPOFOU FYQPSUEFGBVMUDMBTT)FMMPFYUFOET7VF\ QSJWBUFUFYUTUSJOH)FMMP HFUUFYU6QQFS TUSJOH\ SFUVSOUIJTUFYUUP6QQFS$BTF

     ^ ^
  43. DPNQVUFEΫϥεͷHFUUFS TSDDPNQPOFOUT)FMMPWVF JNQPSU\$PNQPOFOU 7VF^GSPNWVFQSPQFSUZEFDPSBUPS !$PNQPOFOU FYQPSUEFGBVMUDMBTT)FMMPFYUFOET7VF\ QSJWBUFUFYUTUSJOH)FMMP HFUUFYU6QQFS TUSJOH\ SFUVSOUIJTUFYUUP6QQFS$BTF

     ^ ^
  44. +49Λ549Խ

  45. ֦ுࢠΛUTYʹมߋ

  46. ͙͢ʹίϯύΠϧΤϥʔ

  47. 4'$ WVF ͱಉ༷ʹमਖ਼ TSDDPNQPOFOUT8PSMEUTY JNQPSU\$PNQPOFOU 7VF^GSPNWVFQSPQFSUZEFDPSBUPS !$PNQPOFOU FYQPSUEFGBVMUDMBTT8PSMEFYUFOET7VF\ QSJWBUFUFYUTUSJOH8PSME HFUUFYU6QQFS

    TUSJOH\ SFUVSOUIJTUFYUUP6QQFS$BTF  ^ লུ ^
  48. SFOEFSؔ਺

  49. Ҿ਺͸7VF$SFBUF&MFNFOUܕ TSDDPNQPOFOUT8PSMEUTY JNQPSU\$PNQPOFOU 7VF^GSPNWVFQSPQFSUZEFDPSBUPS !$PNQPOFOU FYQPSUEFGBVMUDMBTT8PSMEFYUFOET7VF\  লུ SFOEFS I7VF$SFBUF&MFNFOU

    7VF7/PEF\ SFUVSO  EJW    লུ EJW   ^ ^
  50. ໭Γ஋͸7VF7/PEFܕ TSDDPNQPOFOUT8PSMEUTY JNQPSU\$PNQPOFOU 7VF^GSPNWVFQSPQFSUZEFDPSBUPS !$PNQPOFOU FYQPSUEFGBVMUDMBTT8PSMEFYUFOET7VF\  লུ SFOEFS I7VF$SFBUF&MFNFOU

    7VF7/PEF\ SFUVSO  EJW    লུ EJW   ^ ^
  51. Πϕϯτϋϯυϥʔʹܕఆٛ TSDDPNQPOFOUT8PSMEUTY লུ DIBOHF5FYU OFX5FYUTUSJOH WPJE\ UIJTUFYUOFX5FYU ^ SFOEFS I7VF$SFBUF&MFNFOU

    7VF7/PEF\ SFUVSO  EJW লུ JOQVU POJOQVU\ FBOZ UIJTDIBOHF5FYU FUBSHFUWBMVF ^ লུ
  52. ίϯϙʔωϯτΛϩʔΧϧొ࿥

  53. DPNQPOFOUTΩʔ TSDWJFXT)PNFWVF TDSJQUMBOHUT JNQPSU\$PNQPOFOU 7VF^GSPNWVFQSPQFSUZEFDPSBUPS JNQPSU)FMMPGSPNDPNQPOFOUT)FMMPWVF JNQPSU8PSMEGSPNDPNQPOFOUT8PSME !$PNQPOFOU \ DPNQPOFOUT\

    )FMMP  8PSME ^ ^  FYQPSUEFGBVMUDMBTT)PNFFYUFOET7VF\^ TDSJQU
  54. 7VFY.PEVMFΛ54Խ

  55. 7VFY.PEVMFΛ
 ΫϥεϕʔεͰ࣮૷

  56. ZBSOBEEWVFYNPEVMFEFDPSBUPST

  57. WVFDPOpHKT USBOTQJMF%FQFOEFODJFT <bWVFYNPEVMFEFDPSBUPST>

  58. Ϋϥεϕʔεͷ7VFYNPEVMF TSDTUPSFGPPUT JNQPSU\7VFY.PEVMF .PEVMF .VUBUJPO^GSPNWVFYNPEVMFEFDPSBUPST FYQPSUEFGBVMUDMBTT'PPFYUFOET7VFY.PEVMF\ লུ ^

  59. ໊લۭؒ෇͖Ͱ͋Δ͜ͱΛ໌ࣔ TSDTUPSFGPPUT JNQPSU\7VFY.PEVMF .PEVMF .VUBUJPO^GSPNWVFYNPEVMFEFDPSBUPST !.PEVMF \ OBNFTQBDFEUSVF ^ 

    FYQPSUEFGBVMUDMBTT'PPFYUFOET7VFY.PEVMF\ লུ ^
  60. TUBUFQVCMJDΫϥεϓϩύςΟ TSDTUPSFGPPUT JNQPSU\7VFY.PEVMF .PEVMF .VUBUJPO^GSPNWVFYNPEVMFEFDPSBUPST লུ FYQPSUEFGBVMUDMBTT'PPFYUFOET7VFY.PEVMF\ QVCMJDUFYUTUSJOHJOTJEFNPEVMFTUPSF লུ ^

  61. NVUBUJPOT
 !.VUBUJPOΛ෇༩ͨ͠Ϋϥεϝιου TSDTUPSFGPPUT JNQPSU\7VFY.PEVMF .PEVMF .VUBUJPO^GSPNWVFYNPEVMFEFDPSBUPST লུ FYQPSUEFGBVMUDMBTT'PPFYUFOET7VFY.PEVMF\ লུ !.VUBUJPO

    TFU5FYU OFX5FYUTUSJOH \ UIJTUFYUOFX5FYU ^ লུ ^
  62. HFUUFSTΫϥεͷHFUUFS TSDTUPSFGPPUT JNQPSU\7VFY.PEVMF .PEVMF .VUBUJPO^GSPNWVFYNPEVMFEFDPSBUPST লུ FYQPSUEFGBVMUDMBTT'PPFYUFOET7VFY.PEVMF\ লུ HFUUFYU6QQFS TUSJOH\

    SFUVSOUIJTUFYUUP6QQFS$BTF  ^ ^
  63. 7VFYͱόΠϯυ͢Δ
 ίϯϙʔωϯτΛ54Խ

  64. WVFYDMBTT όΠϯυ͢ΔͨΊͷ
 σίϨʔλΛ࡞੒͢ΔϥΠϒϥϦ

  65. ZBSOBEEWVFYDMBTT

  66. 7VFYͷ֤ϓϩύςΟ͸ɺ
 ໊લۭؒ෇͖Ϟδϡʔϧ಺ʹ͋Δ

  67. ໊લۭؒͷσίϨʔλΛ࡞੒ TSDTUPSFGPPUT JNQPSU\$PNQPOFOU 7VF^GSPNWVFQSPQFSUZEFDPSBUPS JNQPSU\OBNFTQBDF^GSPNWVFYDMBTT DPOTUGPP.PEVMFOBNFTQBDF 'PP  !$PNQPOFOU FYQPSUEFGBVMUDMBTT4UPSFFYUFOET7VF\

    লུ ^
  68. ໊લۭؒ෇͖σίϨʔλΛ࢖ͬͯ
 7VFYϓϩύςΟͱόΠϯυ

  69. 7VFYTUBUFͱ
 ಉ͡ܕ໊લͷΫϥεϓϩύςΟ TSDWJFXT4UPSFWVF JNQPSU\$PNQPOFOU 7VF^GSPNWVFQSPQFSUZEFDPSBUPS JNQPSU\OBNFTQBDF^GSPNWVFYDMBTT DPOTUGPP.PEVMFOBNFTQBDF b'PP  !$PNQPOFOU

    FYQPSUEFGBVMUDMBTT4UPSFFYUFOET7VF\ !GPP.PEVMF4UBUF QSJWBUFUFYUTUSJOH লུ ^
  70. 7VFYHFUUFSTͱ
 ಉ͡ܕ໊લͷΫϥεϓϩύςΟ TSDWJFXT4UPSFWVF JNQPSU\$PNQPOFOU 7VF^GSPNWVFQSPQFSUZEFDPSBUPS JNQPSU\OBNFTQBDF^GSPNWVFYDMBTT DPOTUGPP.PEVMFOBNFTQBDF 'PP  !$PNQPOFOU

    FYQPSUEFGBVMUDMBTT4UPSFFYUFOET7VF\ লུ !GPP.PEVMF(FUUFS QSJWBUFUFYU6QQFSTUSJOH লུ ^
  71. 7VFYNVUBUJPOTͱ
 ಉ͡ܕ໊લͷΫϥεϓϩύςΟ TSDWJFXT4UPSFWVF JNQPSU\$PNQPOFOU 7VF^GSPNWVFQSPQFSUZEFDPSBUPS JNQPSU\OBNFTQBDF^GSPNWVFYDMBTT DPOTUGPP.PEVMFOBNFTQBDF 'PP  !$PNQPOFOU

    FYQPSUEFGBVMUDMBTT4UPSFFYUFOET7VF\ লུ !GPP.PEVMF.VUBUJPO QSJWBUFTFU5FYU OFX5FYUTUSJOH WPJE ^
  72. 7VFYNVUBUJPOT͸ؔ਺ܕ TSDWJFXT4UPSFWVF JNQPSU\$PNQPOFOU 7VF^GSPNWVFQSPQFSUZEFDPSBUPS JNQPSU\OBNFTQBDF^GSPNWVFYDMBTT DPOTUGPP.PEVMFOBNFTQBDF 'PP  !$PNQPOFOU FYQPSUEFGBVMUDMBTT4UPSFFYUFOET7VF\

    লུ !GPP.PEVMF.VUBUJPO QSJWBUFTFU5FYU OFX5FYUTUSJOH WPJE ^
  73. %FpOJUF"TTJHONFOU "TTFSUJPOԋࢉࢠ TSDWJFXT4UPSFWVF !GPP.PEVMF4UBUF QSJWBUFUFYUTUSJOH !GPP.PEVMF(FUUFS QSJWBUFUFYU6QQFSTUSJOH !GPP.PEVMF.VUBUJPO QSJWBUFTFU5FYU OFX5FYUTUSJOH

    WPJE
  74. ΫϥεϓϩύςΟͷܕνΣοΫ TSDWJFXT4UPSFWVF !GPP.PEVMF4UBUF QSJWBUFUFYUCPPMFBO !GPP.PEVMF(FUUFS QSJWBUFUFYU6QQFSCPPMFBO !GPP.PEVMF.VUBUJPO QSJWBUFTFU5FYU OFX5FYUCPPMFBO CPPMFBO

  75. Πϕϯτϋϯυϥʔͷܕఆٛ TSDWJFXT4UPSFWVF JNQPSU\$PNQPOFOU 7VF^GSPNWVFQSPQFSUZEFDPSBUPS JNQPSU\OBNFTQBDF^GSPNWVFYDMBTT DPOTUGPP.PEVMFOBNFTQBDF 'PP  !$PNQPOFOU FYQPSUEFGBVMUDMBTT4UPSFFYUFOET7VF\

    লུ DIBOHF5FYU FWFOUBOZ WPJE\ UIJTTFU5FYU FWFOUUBSHFUWBMVF  ^ ^
  76. ·ͱΊ w طଘͷ7VF+4ϓϩδΣΫτʹܕࢦఆ͕ग़དྷͨ w ͢΂ͯͷ7VFίϯϙʔωϯτ͕54ͷΫϥεϕʔεͷ࣮૷ʹ ͳͬͨ w 7VFY.PEVMF͕54ͷΫϥεϕʔεͷ࣮૷ʹͳͬͨ w ؔ਺ͷ໭Γ஋ܕΛఆٛ͠ͳͯ͘΋ίϯύΠϧΤϥʔʹͳΒͳ͍

    w 7VFY.PEVMFͱόΠϯυ͢ΔΫϥεϓϩύςΟͷܕνΣοΫ͕ ߦΘΕΔ͔͕՝୊
  77. 'JO