create-nuxt-app で作った Nuxt.js プロジェクトで TypeScript を使うためにやったこと

先日 Nuxt.js の v.2.4.0 がリリースされました。

Nuxt v2.4.0 is finally here 🎉
Official TypeScript support, smart prefetching and many more features & bug fixes.https://t.co/Ljf29xYvXi

— Nuxt.js (@nuxt_js) 2019年1月28日

アップデートとして 大きな内容は TypeScript公式対応 と スマートプリフェッチ でしょうか。
詳しくは dev.to の以下の公式ページの方に書かれています。（英語ですが・・・）
https://dev.to/nuxt/nuxtjs-v240-is-out-typescript-smart-prefetching-and-more-18d

@soichiro_nitta さんが Qiita の記事でわかりやすくまとめてくれていますので、詳しくはそちらを参考にしてください。
https://qiita.com/soichiro_nitta/items/d13ac10f9fdce022989d

create-nuxt-app ではまだ v.2.4.0 未対応

2019/2/2 時点では create-nuxt-app で作成したプロジェクトでは v.2.3.4 のままでした。
おそらくそのうち対応されるかと思いますが 、

「Nuxt.js v2.4.0 触りたいけど、もう俺は TypeScript じゃないと JavaScript は書きたくないんや！」

という人も多いはず！

ということで create-nuxt-app で作ったプロジェクトで TypeScript を使うためにやったことをまとめました。

TypeScript は nuxt-ts というパッケージで対応してる

TypeScript に対応された Nuxt.js のパッケージは nuxt-ts という別名のパッケージで配布されています。

create-nuxt-app で作ったプロジェクトでは nuxt がインストールされてしまうので、
nuxt-ts を使用するようにインストールを進めていきます。

まずは Nuxt.js のプロジェクトを作成する

• npm init を実行して package.json を作成します。
• npm install -D create-nuxt-app を実行して create-nuxt-app をインストールします。
• npx create-nuxt-app を実行して Nuxt.js プロジェクトの雛形を作成します。

この段階でインストールされている nuxt.js のバージョンは 2.3.4 のままです。
ここから v2.4 系にアップデートをしていきます。

ここからが Nuxt.js 2.4 系へのアップデート手順

1. ロックファイルと node_modules 配下をすべて破棄

• rm -rf node_modules package-lock.json を実行します。

2. package.json の一部を変更

• dependencies から nuxtを削除します。
• npm install -S nuxt-ts vue-property-decorator を実行して nuxt-ts と vue-property-decorator インストールします。
  • vue-property-decorator を入れると、vue コンポーネントの定義を @Component などのデコレータを使って定義できるようになります。

3. パッケージを更新できるものはすべて更新する

• ncu -a を実行します。
  • ncu コマンドが使えない場合は、 npm-check-updates をインストールしておく
  • インストール手順と使い方は以下を参照
  • GitHub - tjunnone/npm-check-updates: Find newer versions of package dependencies than what your package.json or bower.json allows

4. 型定義ファイルの追加

• typesync を実行します。
  • typesync が使えない場合は npm install -g typesync でインストールしておく
  • typesync を実行すると package.json を参照して必要な @types をピックアップして package.json に追記してくれるらしいです。便利ですね！

5. パッケージをインストール

• npm install を実行してパッケージをインストールします。

6. package.json の scripts を修正

• コマンドで nuxt となっているところを nuxt-ts に変更します。

7 TypeScript で適当なコンポーネントを作る

とりあえず、 components 配下に HelloWorld.vue というのを作ります。

ソースの中身はこんな感じ。

「Hello world !」と表示するだけの簡単なやつです。

<script lang="ts"> で宣言すると TypeScript として認識してくれます。

HelloWorld.vue

<template>
  <div>
    {{ message }}
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class HelloWorld extends Vue {
  message: string = 'Hello world !'
}
</script>

それを pages配下 の index.vue からマウントします。

index.vue

<template>
  <section class="container">
    <div>
      <Logo />
      <HelloWorld />
    </div>
  </section>
</template>

<script>
import Logo from '~/components/Logo.vue'
import HelloWorld from '~/components/HelloWorld.vue'

export default {
  components: {
    Logo,
    HelloWorld
  }
}
</script>

7 実行

• npm run dev を実行します。
• 「tsconfig.json が無いから作成しますか？」的なことを聞いてくるので Yes と答えます。
  • すると必要な情報が記載された tsconfig.json が 作成されます。

そしてコンパイル処理が進んでいくと・・・

怒られました。😓😓😓

8 tsconfig.json の設定を修正

• 作成された tsconfig.json の compilerOptions に以下を設定を追加します。

"experimentalDecorators": true,
"allowJs": true,

tsconfig.json

{
  "extends": "@nuxt/typescript",
  "compilerOptions": {
    "baseUrl": ".",
+   "experimentalDecorators": true,
+   "allowJs": true,
    "types": ["@types/node", "@nuxt/vue-app"]
  }
}

上記を追記することで、2 で追加した decorator のコンパイルが可能になります。

9 再び実行

• npm run dev を実行します。

今度はコンパイル通りました！🎉

画面にも表示されました。🎉

これで、コンポーネント作る時や内部処理を実装するときにTypeScriptを使えるようになりました👏👏👏