Nuxt.jsが2.4にバージョンアップしてTypeScriptを公式にサポートしたので、NuxtでTypeScriptを使用する際の環境構築を書いていきます。
作業手順
まずはTypeScriptを導入するにあたり、全体の作業の流れを確認していきます。
以下の通りです。
- プロジェクト作成
- 必要なパッケージの導入
- 不要なパッケージの削除
- scriptsのコマンド修正
- パッケージ再インストール
- テスト起動(tsconfig.json作成)
- tslint.json作成
- nuxt.config.jsのTypeScript化
- index.d.ts(型定義ファイル)の作成
- vueファイルのTypeScript化
「nuxt-ts」がいろいろやってくれているおかげで、以前のようにwebpackを頑張って書いたりなどしなくても大丈夫になりました。
実際にTypeScriptをNuxtへ導入する
では実際にTypeScriptをNuxtのプロジェクトへ導入をしていきましょう。
基本的には、NuxtのGithubのTypeScriptのexampleを参考(https://github.com/nuxt/nuxt.js/tree/dev/examples/typescript)に作成しています。
プロジェクト作成
まずはプロジェクトを作成します。
すでにプロジェクトがある場合は「必要なパッケージ導入」から作業をすれば問題ないはずです。
「create-nuxt-app」を使用して作成していきます。
npx create-nuxt-app <プロジェクト名>
今回は、プロジェクト名「nuxt-typescript」で作成しました。
いくつか質問されるので、答えていけばプロジェクトが作成されます。
※今回はテストやデザインフレームワークは必要ないので全て「none」で作成しています。
必要なパッケージの導入
TypeScriptを使用するにあたり必要なパッケージは以下です。
- nuxt-ts
- vue-property-decorator
- @types/webpack
- tslint-config-standard
これらをインストールしていきます。
プロジェクトフォルダに移動して以下のコマンドを実行します。
npm install nuxt-ts vue-property-decorator @types/webpack --save npm install tslint-config-standard --save-dev
不要なパッケージの削除
「nuxt-ts」を導入したことにより不要となるパッケージを削除します。
「package.json」の中から、「nuxt」と「nodemon」を削除しましょう。
scriptsのコマンド修正
「package.json」のscriptコマンドも変更する必要があるので以下のように変更します。
"scripts": {
"dev": "nuxt-ts",
"build": "nuxt-ts build",
"start": "nuxt-ts start",
"generate": "nuxt-ts generate",
"lint": "tslint --project"
},
このコマンドはNuxtのTypeScriptのexampleのまんまです。
パッケージ再インストール
「package.json」を変更したので、「node_modules」フォルダを削除して、以下のコマンドを実行します。
npm install
テスト起動(tsconfig.json作成)
以下のコマンドを実行し、テスト起動します。
npm run dev
このコマンドを叩くと「tsconfig.json」がないので作成するかと聞かれるので「yes」で作成します。
作成された「tsconfig.json」を編集します。
「compilerOptions」の中に「"experimentalDecorators": true,」を追記します。
{
"extends": "@nuxt/typescript",
"compilerOptions": {
"baseUrl": ".",
"experimentalDecorators": true,
"types": [
"@types/node",
"@nuxt/vue-app"
]
}
}
tslint.json作成
「tslint.json」がないので、プロジェクトフォルダ直下に「tslint.json」を作成します。
{
"defaultSeverity": "error",
"extends": [
"tslint-config-standard"
],
"rules": {
"prefer-const": true
}
}
nuxt.config.jsのTypeScript化
「nuxt.config.js」を「nuxt.config.ts」に変更します。
そして、ファイル内容を変更します。
変更箇所は、「build」の内容をTypeScriptへ変更します(54〜58行目)。
それに伴い、そこで使用する型をimportします(1、2行目)。
import { Configuration } from 'webpack'
import { Context } from '@nuxt/vue-app'
const pkg = require('./package')
module.exports = {
mode: 'universal',
/*
** Headers of the page
*/
head: {
title: pkg.name,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: [
],
/*
** Plugins to load before mounting the App
*/
plugins: [
],
/*
** Nuxt.js modules
*/
modules: [
],
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend (config: Configuration, { isClient, isDev }: Context) {
if (isClient && isDev) {
config.devtool = 'source-map'
}
}
}
}
index.d.ts(型定義ファイル)作成
プロジェクト直下にvue様に型定義ファイルを作成します。
declare module "*.vue" {
import Vue from "vue"
export default Vue
}
vueファイルのTypeScript化
「script」に「lang="ts"」を追記します。
中身はTypeScriptへ変更します。
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Logo from '~/components/Logo.vue'
@Component({
components: {
Logo
}
})
export default class Home extends Vue {}
</script>
以上で、Nuxt.jsでTypeScriptを使用することができる様になります。