• HOME
  • TypeScriptを導入 - NuxtJs
TomoyaOkada

TypeScriptを導入 - NuxtJs

記事をシェアする

Nuxt2系の環境下にTypeScriptを導入する方法についてのご紹介です。
最初のプロジェクト作成の際に、TSを選択せずに後から導入したくなったパターンになります。


必要なパッケージをインストール

$ yarn add @nuxt/typescript-build @nuxt/types



nuxt.config.jsに追記

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



tsconfig.json

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



動作確認

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  mounted() {
    const str: string = 'Hello World'
    console.log(str)
  },
})
</script>



記事をシェアする