Zenn
🍑

[Vue3.x]createを使って既存projectにTypeScriptを足してみた

2021/03/20に公開
TypeScript
Vue.js
Vue 3
tech

abstract

Vue3.xに後からTypeScriptを付け足したい。できるだけ楽に。
-> vue createで付け足した。
-> 上書きされたくないファイルも上書きされる。
-> gitの履歴から差分と睨めっこしながら欲しいところは復元

前提として、筆者はそれほど手を加えていないので、手直しも面倒ではなかった。

したいこと

Vue3+JavaScriptのプロジェクトをVue3.x+TypeScriptにしたい。

手段

-1. 手動でTypeScriptをinstall

$ npm i -D typescript ts-loader

をして、

webpackなどを手動で記述していく方法。

面倒だからしたくない。

-2.もう一回vue createを実行する

同じプロジェクト名があるとき、オプションを後からマージできるらしい。
これでできたら簡単そう

手段-2でやってみる。

環境

$ vue --version
@vue/cli 4.5.11

$ node -v
v14.0.0

既存のプロジェクトは以下の通り。

./package.json
{
  // ...
  "dependencies": {
    "vue": "^3.0.0"
  },
  // ...
}

やり方

merge project

$ create vue my-pj

既存のプロジェクトと同じディレクトリ名前にする。
すると、マージするか上書きするか聞かれる。
ので、Mergeを選択。

? Target directory /Users/.../my-pj already exists. Pick an ac
tion: (Use arrow keys)
  Overwrite
❯ Merge
  Cancel

マニュアルで選ぶ

Manually select featuresを選択。

? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
❯ Manually select features

TypeScriptをチェックする

TypeScriptを追加する。

? Please pick a preset: Manually select features
? Check the features needed for your project:
 ◉ Choose Vue version
 ◉ Babel
 ◉ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
❯◯ E2E Testing

これでOK。
同じ要領で、他のfeatureも取り入れることができそう。
Routerなど、他のは結構難しそうでした😭

上書きされたファイルを修正

Mergeといってもコンフリクトを起こした場所は上書きされてしまっている。
欲しいコードはGitの履歴を見ながら追記する必要がある。

個人的に手直ししたファイルをあげる。

App.vue

下記の箇所が変わっていたりする。（TypeScriptを取り入れたので当たり前だけど）

App.vue
- <script>
+ <script lang="ts">
App.vue
- export default {
+ export default defineComponent({

main.ts

新しくmain.tsが作成されている。
main.jsをよしなにmain.tsに移植してくれるわけではないので自分で書き換える必要がある。

shims-vue.tsが作られていた

新たに追加されていた。

shims-vue.d.ts
/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  cons　　　　　　　t component: DefineComponent<{}, {}, any>
  export default component
}

その他ファイルも

configファイルなど、追加されていたり上書きされていたりしていた。
筆者はプロジェクトを作成してそれほどプラグインを使ったわけでもないので苦労しなかったが、大きくなった物を修正するのは骨が折れそう。

(差分として上がったファイルたち)

実行

$ yarn serve

問題なく実行できた。

まとめ

プロジェクトを作ったばかりであまり手を加えていないからそんなに難しいことをせずにTypeScriptを導入できた。
正攻法な感じはしない。
とはいえ、CLIによって何が記述されるか差分で見られるのは良かった。
（ここでは詳しく書いていないけど）

Discussion