nuxt-property-decoratorのインストールとTypeScriptのセットアップ
  • 2021.12.27に公開
  • 2021.12.31に更新
  • ブログ構築TS
  • 1. Nuxt.js×TypeScript開発環境構築
  • No.3 / 3

今回達成すること

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 - GitHub

nuxt-property-decoratorをインストールする

ターミナルからインストールコマンドを実行します。

% yarn add nuxt-property-decorator

インストールを確認しましょう。

% yarn list --pattern nuxt-property-decorator

─ nuxt-property-decorator@2.9.1

TypeScriptルールを追加する

TypeScriptの基本ルールを管理するtsconfig.jsonに、isolatedModulesルールを追加します。

isolatedModulesとは

  • default: false

TypeScript を TypeScript コードから JavaScript コードを生成する用途で利用可能な一方、Babelなどの他のトランスパイラの利用も一般的です。 しかし、他のトランスパイラは一度に1ファイルのみを扱うため、全体の型システムの知識に依存したコード変換はできません。 ビルドツールで用いられる TypeScript のts.transpileModuleAPI についても、この制約が課せられます。

この制限は、TypeScript のconst enumnamespaceのような機能を利用したときに実行時の問題を引き起こします。 isolatedModulesフラグは、単一ファイルのトランスパイル処理で正しく解釈できないコードが書かれたときに、TypeScript が警告を与えるように設定します。

引用: TypeScript: TSConfig

つまり、全体の型システムの知識に依存したコード変換は許容せず、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にする

ルートディレクトリ直下のtsconfig.jsonを開き、isolatedModulestrueにします。

tsconfig.json
{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "esModuleInterop": true,
    // 追加
    "isolatedModules": true,

ESLintコマンドにTypeScriptが含まれているか確認する

ルートディレクトリ直下のpackage.jsonを開きます。

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がチェックしてくれます。

参考: Lint-Nuxt TypeScript

以上で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"
})

参考: nuxt-property-derorator - GitHub

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を起動してブラウザで確認してみましょう。

寂しい感じのトップページになっていれば成功です。

2021-12-27 19-26-42

ランタイムリントを確認する

先程設定した、ファイル保存と同時にESLintが走っているか確認します。

Vueファイルのスクリプトに、改行を2つ入れてエラーを出しましょう。

pages/index.vue
@Component
export default class IndexPage extends Vue {

}

ターミナルにエラーがでていればnuxt.config.jsに行った設定は成功しています。

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のインストールとセットアップを行います。それでは!

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
ブログ構築TSの投稿
1
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #01
Nuxt.jsをローカルPCに立ち上げよう
2
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #02
Nuxt.jsプロジェクトをGitHubにPushしよう
3
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #03
nuxt-property-decoratorのインストールとTypeScriptのセットアップ
1
  • Vuetifyセットアップ
  • /
  • #01
TypeScript環境のNuxt.jsにVuetifyを導入しよう
2
  • Vuetifyセットアップ
  • /
  • #02
VuetifyにカスタムCSSを追加してSASS変数を理解しよう
3
  • Vuetifyセットアップ
  • /
  • #03
VuetifyにカスタムSVGアイコンを追加しよう
1
  • NetlifyCLIを使ったNuxtデプロイ
  • /
  • #01
Netlify CLIをインストールして本番環境のサイトを作成しよう
2
  • NetlifyCLIを使ったNuxtデプロイ
  • /
  • #02
netlify.tomlを使ってNuxt.jsをNetlifyに手動デプロイしよう
1
  • Contentfulモデル構築
  • /
  • #01
Contentfulの料金とCommunityプランの無料枠を理解する
2
  • Contentfulモデル構築
  • /
  • #02
Contentfulへ新規会員登録、ロケールの変更、API Keyの発行を行う
3
  • Contentfulモデル構築
  • /
  • #03
Contentful ブログカテゴリーモデルを作成しよう
4
  • Contentfulモデル構築
  • /
  • #04
Contentful カテゴリーモデルに1対1で関連づくblogPostモデルを作成しよう
5
  • Contentfulモデル構築
  • /
  • #05
Contentful ブログ記事に1対多で関連づくplogTagモデルを作成しよう
6
  • Contentfulモデル構築
  • /
  • #06
Contentful カテゴリー・ブログ記事・タグコンテンツを作成しよう
1
  • Nuxt.js×Contentfulセットアップ
  • /
  • #01
Nuxt.js×Contentfulセットアップ。モジュールのインストールからAPI Keyの登録まで
2
  • Nuxt.js×Contentfulセットアップ
  • /
  • #02
Contentful APIリクエストの実行 Nuxt.jsにブログコンテンツを表示しよう
3
  • Nuxt.js×Contentfulセットアップ
  • /
  • #03
ContentfulAPIをNetlifyにデプロイしよう【Nuxt FullStaticのasyncDataとfetch】
1
  • Vuex×TypeScriptセットアップ
  • /
  • #01
Vuexの型付け vuex-module-decoratorsとnuxt-typed-vuexどちらを使用するか
2
  • Vuex×TypeScriptセットアップ
  • /
  • #02
nuxt-typed-vuexのインストールとセットアップ。Vuexの型定義と呼び出し方
3
  • Vuex×TypeScriptセットアップ
  • /
  • #03
VuexにContentfulの型定義ファイルとnuxtServerInitを追加しよう
4
  • Vuex×TypeScriptセットアップ
  • /
  • #04
VuexにContentfulAPIレスポンスを保存してVueファイルに表示しよう
独学プログラマ
独学でも、ここまでできるってよ。
LOGS
更新終了した過去の記事たち
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。