Vue2 + vuetify + composition API に TypeScriptを導入する方法
Vue2 + vuetify + composition APIで作っているアプリにTypeScriptを導入しました。
Vue3で作っていればこんな手間は必要ないのですが💦
こういう仕事もありますよね>.<
TypeScriptを導入するにあたり、手こずった点がいくつかあったので、
今後スムーズに導入出来るように手順をまとめました！
1. TypeSciprt関連ライブラリをインストール
必要ライブライを探るために、vue-cliでvue2+typesciprtの新規プロジェクトを作成し、
package.jsonのライブラリの内、TypeScriptに関連ありそうなライブラリを追加します。
以下がvue2+typesciprtの新規プロジェクで追加されているTypeScript関連のライブラリです。
"@typescript-eslint/eslint-plugin": "^5.4.0"
"@typescript-eslint/parser": "^5.4.0"
"@vue/cli-plugin-typescript": "~5.0.0"
"@vue/eslint-config-typescript": "^9.1.0"
"typescript": "~4.5.5"
これをまとめてインストールします。
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript @vue/eslint-config-typescript typescript
以下warningが出ますが、インストールは完了します。
（警告内容と解決方法分かる方いましたら、教えて頂けたら嬉しいです！）
npmご利用の方向へ
npmで上記ライブラリをインストールしようとすると、依存エラーが出て失敗します。
失敗の原因は、以下２つのライブラリですが、根本原因もnpmでの解決方法が分りません。。
"@vue/cli-plugin-typescript"
"@vue/eslint-config-typescript"
yarnでは警告は出るもののインストール自体はできるので、yarnで進めることにしました。
以下yarnへの移行方法を簡単に紹介します！
yarnをインストールします。
npm install -g yarn
以下コマンドで、package-lock.jsonからyarn.lockに移行できます。
yarn import
yarn.lockファイルが作られたら移行完了なので、package-lock.jsonは削除しましょう。
以下、よく使うコマンド対応です。
- npm install -D ⇒ yarn add -D
- npm run serve => yarn serve
2. tsconfig.json作成
ルートディレクトリにtsconfig.jsonを作成します。
jsconfig.jsonは不要となるので削除します。
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"useDefineForClassFields": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env",
"vuetify" //vuetifyを入れいてる場合は追記
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
tsconfig.jsonを作成した際に、以下のエラーが出ることがあります。
構成ファイル '.../tsconfig.json' で入力が見つかりませんでした。指定された 'include' パスは '["src/**/*.ts","src/**/*.tsx","src/**/*.vue","tests/**/*.ts","tests/**/*.tsx"]' で、'exclude' パスは '["node_modules"]' でした。
これは、main.jsをmain.tsに変更することで解消されます。
3. eslint設定ファイルを修正する
.eslint.jsに3つ追加します。
ルールに追加しているものは、移行作業を徐々に行うためのもので、必須ではない ＆ 移行作業が終わったら削除するルールです。
module.exports = {
root: true,
env: {
node: true,
},
extends: [
"plugin:vue/essential",
"eslint:recommended",
"@vue/typescript/recommended", //追加
"plugin:prettier/recommended",
],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
//vueファイルのsetup関数が空だと怒られる。そのまま残しておきたいので、エラーをもみ消す。
"@typescript-eslint/no-empty-function": "off",
//以下追加。typescript導入初期は大量のエラーが出るため、全スクリプトにTS無視コマンドを入れる。
//それを許可するルール
"@typescript-eslint/ban-ts-comment":
process.env.NODE_ENV === "production" ? "warn" : "off",
},
}
4. vueの型ファイルを作成
srcディレクトリにshims-vue.d.tsファイルを作成します。
これはvueファイルを型を定義するもので、これを作成しないと、各コンポーネントでvueファイルをインポートする際に怒られます。
declare module "*.vue" {
import Vue from "vue"
export default Vue
}
5. 主要ファイル名を.jsから.tsに変更する
1) main.js をmain.tsに変更
.tsに変更すると、importしているファイルにエラーが表示されると思います。
それらをts化していきます。
2) router/index.js を router/index.tsに変更
importでエラーになっている箇所がある場合は、.vue拡張子をつけましょう！！
上でvueの型ファイルが作成されていれば、エラーは解消されるはずです。
↓
import VueRouter, { RouteConfig } from "vue-router"
(省略）
//型を追加
const routes: Array<RouteConfig> = [
{
path: "/",
name: "home",
component: HomeView,
}
]
3) vuetifyをTypeScript化する
src/plugins/vuetify.jsをvuetify.tsに変更します。
ファイル名を変更すると、以下importでエラーが出ると思います。
以下のように修正すれば、エラーは消えます。
import Vuetify from "vuetify/lib"
6. vueファイルをTypeScript化する
つづいて、vueファイルのscriptをTypeScriptに変更します。
1) scriptにlang="ts"を追記する
<script></script> //既存コード
<script lang="ts"></script> //このように変更する
vscodeの置換機能で一気に変更すると便利です。ただし、vueファイルとは関係ない<script>タグも存在するので、慎重に変更しましょう。
2) 全vueファイルに@ts-nocheckを入れる
vueファイルのscriptタグ直下に//@ts-nocheckを入れることで、TypeScriptチェックを無効にすることが出来ます。
<script lang="ts">
//@ts-nocheck
</script>
一旦チェックを無効にしておき、TS移行作業を行うファイルで//@ts-nocheckを削除することで、好きなタイミングでファイルのTS化を行うことが出来ます。これでTypeScript導入初期に発生する大量のエラーを一時的に回避できて移行しやすくなります。（気持ちが楽になります）！
vscodeの置換ツールで、このように変更すると楽です！
7. 変数や関数に型をつける
あとはTypeScriptのルールに沿って型付けをしていけばOKです！
１点、propsに型付けをするのが少し特殊なので、それだけ書いておきます。
propsに型をつけるのは、PropTypeを使って以下のように書きます。
<script lang="ts">
import { defineComponent, PropType } from "@vue/composition-api"
interface User {
id: string
name: string
}
export default defineComponent({
props: {
users: Array as PropType<Array<User>>,
user: Object as PropType<User>,
},
setup() {},
})
</script>
まとめ
今回はvue2プロジェクトにTypeScriptを導入する手順を書きました。
序盤は割と手こずったので、導入手順をまとめてみました。
vue3が登場したので、vue2のままTypeScriptに移行するケースは稀だと思いますが、
少しでもお役に立てたら幸いです！
Discussion