今回達成すること
nuxt-property-decoratorのインストールと、TypeScriptのセットアップを行います。
TypeScriptのセットアップは以下の3つです。
tsconfig.json にTypeScriptのルールを追加- ESLintコマンドの確認
- ランタイムLintの設定
nuxt-property-decoratorとは
Vueコンポーネント用のTypeScriptデコレーターです。
nuxt-property-decoratorを導入すると、Vueの書き方をクラス構文に書き換えることができ、Vueのルールの中でTypeScriptを簡単に扱えるようになります。
nuxt-property-decoratorをインストールする
ターミナルからインストールコマンドを実行します。
% yarn add nuxt-property-decorator
インストールを確認しましょう。
% yarn list --pattern nuxt-property-decorator
─ nuxt-property-decorator@2.9.1
TypeScriptルールを追加する
TypeScriptの基本ルールを管理するisolatedModulesルールを追加します。
isolatedModulesとは
- default:
false
TypeScript を TypeScript コードから JavaScript コードを生成する用途で利用可能な一方、Babelなどの他のトランスパイラの利用も一般的です。 しかし、他のトランスパイラは一度に１ファイルのみを扱うため、全体の型システムの知識に依存したコード変換はできません。 ビルドツールで用いられる TypeScript の
ts.transpileModuleAPI についても、この制約が課せられます。この制限は、TypeScript の
const enumやnamespaceのような機能を利用したときに実行時の問題を引き起こします。isolatedModulesフラグは、単一ファイルのトランスパイル処理で正しく解釈できないコードが書かれたときに、TypeScript が警告を与えるように設定します。
つまり、全体の型システムの知識に依存したコード変換は許容せず、1ファイルを1モジュールファイルとして扱う制限が追加されます。
ここで言うモジュールファイルとは、import/exportの形式を利用しているという意味となります。
export構文が無いファイルは下記エラーを吐きます。
/*
'index.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file.
Add an import, export, or an empty 'export {}' statement to make it a module.
*/
function fn() {}
この制約は.d.tsファイルには適用されません。
isolatedModulesをtrueにする
ルートディレクトリ直下のisolatedModulesをtrueにします。
tsconfig.json
{
"compilerOptions": {
"target": "ES2018",
"module": "ESNext",
"moduleResolution": "Node",
"lib": [
"ESNext",
"ESNext.AsyncIterable",
"DOM"
],
"esModuleInterop": true,
// 追加
"isolatedModules": true,
ESLintコマンドにTypeScriptが含まれているか確認する
ルートディレクトリ直下の
lint:jsスクリプトコマンドにts拡張子が含まれているか確認してください。
package.json
{
"scripts": {
// tsか拡張子が含まれているか確認する
"lint:js": "eslint --ext \".js,.ts,.vue\" --ignore-path .gitignore .",
},
}
初回でインストールしたcreate-nuxt-appモジュールのバージョンが古い場合、ts拡張子が追加されていないことがあります。
その場合は、上記コードをコピペし書き換えてください。
ファイル保存と同時にESLintのTypeチェックを実行する
ファイル保存と同時にESLintのチェックツール & Typeチェックを行うよう設定します。
これは、@nuxtjs/eslint-config-typescriptモジュールのオプション機能となります。
@nuxtjs/eslint-config-typescriptは、Nuxtプロジェクト作成時にTypeScript & ESLintを選択すると、自動でインストールされます。
nuxt.config.js
export default {
...
// 追加
typescript: {
// ファイル保存後にESLintを実行する
// Doc: https://typescript.nuxtjs.org/guide/lint/
typeCheck: {
eslint: {
files: './**/*.{ts,js,vue}'
}
}
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
}
}
上記の設定で.tsファイルもESLintがチェックしてくれます。
以上でNuxt × TypeScriptの初期セットアップは終了です。
Vueファイルをクラス構文に書き換えよう
nuxt-property-decoratorを導入したので、現在のVueファイルをクラス構文に書き換えます。
pagesファイルを書き換える
pages/index.vue
<template>
<div>
pages/index.vue
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
@Component
export default class IndexPage extends Vue {
}
</script>
nuxt-property-decoratorでは、class名 IndexPage がVueのnameプロパティと同等の扱いとなります。
従来の書き方
export const IndexPage = Vue.extend({
name: "IndexPage"
})
layoutsファイルを書き換える
layouts/default.vue
<template>
<div>
layouts/default.vue
<nuxt />
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
@Component
export default class DefaultLayout extends Vue {
}
</script>
ブラウザで確認してみよう
Nuxtを起動してブラウザで確認してみましょう。
寂しい感じのトップページになっていれば成功です。
ランタイムリントを確認する
先程設定した、ファイル保存と同時にESLintが走っているか確認します。
Vueファイルのスクリプトに、改行を2つ入れてエラーを出しましょう。
pages/index.vue
@Component
export default class IndexPage extends Vue {
}
ターミナルにエラーがでていれば
terminal
ERROR ERROR in pages/index.vue:13:1
no-multiple-empty-lines: More than 1 blank line not allowed.
11 | export default class IndexPage extends Vue {
12 |
> 13 |
| ^
> 14 | }
| ^
15 | </script>
確認ができればエラーコードは戻しておいてください。
不要なコンポーネントを削除する
Nuxtがデフォルトで用意しているコンポーネントファイルは不要なので削除します。
% rm components/{NuxtLogo.vue,Tutorial.vue}
これでcomponentsディレクトリは空っぽになりました。
% ls components
# 何も表示なし
Git commitで2行コメントを追加する
以上で作業終了です。
ここまでの変更をGitHubにPushしておきます。
% git add -A
% git commit -m "Add nuxt-property-decorator" -m "Setup TypeScript"
% git push
-m... messageオプションを2つ指定すると、2行のメッセージを追加することができます。
% git log
commit d3... (HEAD -> master, origin/master)
Add nuxt-property-decorator
Setup TypeScript
次回は?
UIフレームワークVuetifyのインストールとセットアップを行います。それでは！