1分で出来るNuxt.jsでのTypeScript環境構築【簡単】

takabee

こんにちは。takabeeです。

今回は、

初心者

Nuxt.jsでTypeScript環境を構築したいけど、どうやってやれば良いんだろう？

という悩みを解決すべく、Nuxt.jsにTypeScript環境を構築する方法を、6STEPで解説していきます。

この記事で理解できること

・Nuxt.jsとは？
・TypeScriptとは？
・Nuxt.jsとTypeScriptの開発環境構築

ネコ大先生

この記事は【約3分】で読めるニャ。

Nuxt.jsとは？

Nuxt.jsがそもそも何かわからない方は、こちらの記事で詳しく解説しています。

5分くらいこの記事を眺めてから、戻ってきてください。

あわせて読みたい

Nuxt.jsとは？超シンプルなTODOアプリを作りながらサクッと理解しよう！【メチャクチャ簡単です】 こんにちは。takabeeです。   今回はNuxt.jsをTODOアプリを作りながらサクッと理解してしまおう、という記事です。 この記事を見てくれている方は、 Nuxt初心者 Nu...

TypeScriptとは？

TypeScriptとは、一言でいうと「JavaScriptに強い型付けを導入した言語」です。

JavaScriptの性質も多く受け継いでいますが、自分自身触っていく中で一番インパクトを受けたのはこれでした。

分からない方にすこし解説すると、まずJavaScriptは動的型付け言語です。

つまり作った変数に数字を入れても、文字列を入れても問題ないです。

しかし大規模なプロジェクトになって、ほかの方が書いたコードを触るとき、この変数が厳密に何を指しているのか分かりません。

そういった場合にはあらかじめ変数を作るときに、厳密に決めてしまった方があとから書き直しやすいです。

つまり「なんでも入れていいですよー」な変数より、「これしか入れてはいけません」な方が、大規模なプロジェクトには向いているということですね。

自分はTypeScriptを使った大規模なプロジェクトに入ったことはありません。

でも実際に、大規模でもなく多人数でもない、個人開発でもその恩恵ははっきり分かりますよ。

だって1週間前に書いたコードなんて自分でも忘れてますもの。

takabee

JavaScriptを厳密にしたものっていう認識でいいよ！

Nuxt.jsにTypeScriptの環境構築をしてみよう！

6STEPで完了します。

Nuxt TypeScript

セットアップ Nuxt.js 向け TypeScript サポート

【STEP1】Nuxtプロジェクトを作成しよう！

まずNuxtプロジェクトを作っていきましょう。

<プロジェクト名>はなんでも大丈夫です。

npm init nuxt-app <プロジェクト名>

設定は、すべてデフォルトで大丈夫です。

【STEP2】TypeScriptを導入しよう！

Nuxt.jsのTypeScriptサポートは3つのパッケージからなっています。

@nuxt/types：主なTypeScriptサポートモジュール。これは入れておく。
@nuxt/typescript-build：主なTypeScriptサポートモジュール。これも入れておく。
@nuxt-typescript-runtime：オプション。nuxt.config.js、modules、serverMiddlewaresでTypeScriptが使えるようになる。今回はテストで入れる。

これらをインストールしましょう。

npm install --save-dev @nuxt/typescript-build @nuxt/types

npm install --save @nuxt/typescript-runtime

【STEP3】nuxt.config.jsファイルに登録しよう！

インストールできたら、nuxt.config.jsファイルのbuiildModulesセクションに、モジュールを登録しましょう。

buildModules: ['@nuxt/typescript-build']

【STEP4】tsconfig.jsonを作成しよう！

TypeScriptの設定ファイルtsconfig.jsonを、ルートディレクトリに新規作成し、編集しましょう。

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

【STEP5】vue-shim.d.tsを作成しよう！

vue-shim.d.tsファイルをルートディレクトリ、もしくはtypesディレクトリに新規作成して、編集しましょう。

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

vue-shim.d.tsファイルは、TypeScriptでコンポーネントを作るときに必要なファイルです。

初めて見る形式のファイルで戸惑いますね。。。

【STEP6】package.jsonをアップデートしよう！

最後に、package.jsonのscriptsセクションにある、”dev”, “build”, “start”, “generate”をすべて、

としてください。

nuxt.config.jsを編集しよう！

これでNuxt.jsでのTypeScript環境の構築が完了しました。

確認のために

npm run dev

でローカルサーバーを立ち上げてみます。

これでTypeScript環境構築が完了！

ブラウザで確認すると、しっかり動作していますね。

takabee

あとは実際に自分でTypeScriptのコーディングをしていきましょう！

まとめ：TypeScriptで実際にコーディングしてみよう！

①OptionsAPI
②CompositionAPI
③ClassAPI

Nuxt TypeScript

Options API Nuxt.js 向け TypeScript サポート

あわせて読みたい

Nuxt.jsの勉強法を4000円以下でまとめてみた。【1ヶ月でマスター】 こんにちは。takabeeです。 *本記事はNuxt.jsの勉強法について解説をしていく記事となっています。 この記事は「いますぐNuxt.jsを始めたい！でも方法が分からない！」...

takabee

では、また次の記事でお会いしましょう！

ネコ大先生

最後まで読んでくれて、ありがとうニャ！