JavaScript

【19年11月最新】Nuxt.js上でTypeScriptを設定する手順

みなさん、こんにちは。どんぶラッコです。

本日は、Nuxt.jsでTypeScriptを使えるようにする手順についてまとめようと思います。

過去は様々なライブラリをインストールする必要がありましたが、2019年11月現在、パパッと設定できちゃいます!是非みなさんも試してみてください♪

セットアップ方法

https://typescript.nuxtjs.org/guide/setup.html

yarn add --dev @nuxt/typescript-build

そのあと、nuxt.config.jsを下記のように編集します。

export default {
  buildModules: ['@nuxt/typescript-build']
}

次に、tsconfig.json というファイルを作成し、下記の設定をコピペします。

{
  "compilerOptions": {
    "target": "esnext",
    "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"
  ]
}

以上で設定は完了です!

コンポーネントでTypeScriptを使えるようにするには?

typescriptを使うための設定も簡単です! コンポーネントの <script>タグに lang="ts" を追加するだけ♪

<template>
</template>
<script lang="ts">
</script>

また、19年11月現在、コンポーネント内でコンポーネントをインポートしようとするとエラーが発生します。

現状のワークアラウンドはこちら。
https://stackoverflow.com/questions/58474763/nuxt-typescript-error-nuxttypescript-cannot-find-module-my-module

ts-shim.d.ts というファイルを作って、下記を作成すればOKです。

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

これで完了です!


以上、セットアップ方法のご紹介でした♪