Nuxt.js의 프로젝트에 TypeScript를 도입하려면, 기본적으로 공식 문서 대로에서 문제 없습니다만, 조금 빠진 부분도 있었으므로 비망록으로서 정리해 둡니다.

Nuxt.js 버전은 2.11.0, typescript 버전은 3.7.4입니다.

우선 Nuxt.js 프로젝트 만들기

설정은 적절하게 변경하십시오.

# プロジェクト作成
npx create-nuxt-app nuxt-ts-sample

> Generating Nuxt.js project in nuxt-ts-sample
? Project name nuxt-ts-sample
? Project description My astounding Nuxt.js project
? Author name itouuuuuuuuu
? Choose the package manager Npm
? Choose UI framework Element
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios
? Choose linting tools ESLint
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools jsconfig.json (Recommended for VS Code)

typescript-build 설치

먼저 typescript-build를 설치합니다.

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

그런 다음 nuxt.config.js 의 buildModules 위치에 설정을 추가합니다.

nuxt.config.js

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

typescript-runtime 설치

npm install --save-dev @nuxt/typescript-runtime

설치가 완료되면 package.json scripts를 nuxt에서 nuxt-ts로 다시 씁니다.

package.json

"scripts": {
  "dev": "nuxt-ts",
  "build": "nuxt-ts build",
  "generate": "nuxt-ts generate",
  "start": "nuxt-ts start"
}

nuxt.config.ts 설정

nuxt.config.js의 파일 이름을 nuxt.config.ts로 변경합니다.
또, extend(config, ctx) {} 로 형을 지정하지 않으면 에러가 되므로, 지정해 줍니다.

nuxt.config.ts.diff

  build: {
-    extend(config, ctx) {}
+    extend(config: any, ctx: any) {}
  }

nuxt.config.ts 에 다음을 추가합니다.

nuxt.config.ts

typescript: {
  typeCheck: true,
  ignoreNotFoundWarnings: true
}

eslint-config-typescript 설치

npm install --save-dev @nuxtjs/eslint-config-typescript

이어서 package.json 의 script 의 lint 를 수정합니다.

package.json.diff

  "scripts": {
-    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
+    "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore ."
  }

eslintrc.js 의 extends 에 다음을 추가합니다.@nuxtjs 가 있으면 삭제합니다.

eslintrc.js.diff

  extends: [
-   '@nuxtjs',
+   '@nuxtjs/eslint-config-typescript',
  ],

필요한 파일 추가

tsconfig.json 파일을 루트 바로 아래에 만듭니다.

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"
  ]
}

Element 문제 해결

UI 프레임워크에 Element를 사용하지 않는 경우 이 항목을 건너뛸 수 있습니다.Element를 선택한 경우 npm run dev를 실행하면 아래와 같은 오류가 발생합니다.

92:18 Interface 'NuxtApp' incorrectly extends interface 'Vue'.
  Types of property '$loading' are incompatible.
    Type 'NuxtLoading' is not assignable to type '(options: LoadingServiceOptions) => ElLoadingComponent'.
      Type 'NuxtLoading' provides no match for the signature '(options: LoadingServiceOptions): ElLoadingComponent'.
    90 | }
    91 | 
  > 92 | export interface NuxtApp extends Vue {
       |                  ^
    93 |   $options: NuxtAppOptions
    94 |   $loading: NuxtLoading
    95 |   context: Context

ℹ Version: typescript 3.7.4
ℹ Time: 16566ms

이 문제를 해결하려면 tsconfig.json 의 compilerOptions 에 "skipLibCheck": true 를 추가합니다.

tsconfig.json

"compilerOptions": {
  "skipLibCheck": true,
}

nuxt-property-decorator 설치

클래스를 사용하려면 nuxt-property-decorator를 설치합니다.

npm install --save-dev nuxt-property-decorator

nuxt-property-decorator를 사용하려면 tsconfig.json의 compilerOptions에 "experimentalDecorators": true를 추가하십시오.

tsconfig.json

"compilerOptions": {
  "experimentalDecorators": true,
}

TypeScript를 사용해보기

pages/index.vue 의 script 의 부분을 TypeScript로 써 봅니다.~/components/Logo.vue 를 import하고 있는 부분에 .vue 를 붙이는 것에 주의해 주세요.

pages/index.vue

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import Logo from '~/components/Logo.vue'  // .vueを忘れずにつける
@Component({
  components: {
    Logo
  }
})
export default class extends Vue { }
</script>

ESLint 문제 해결

ESLint를 사용하는 경우 npm run dev를 실행하면 다음과 유사한 오류가 발생합니다.

  40:0  error  Parsing error: Using the export keyword between a decorator and a class is not allowed. Please use `export @dec class` instead.

   8 |   },
   9 | })
> 10 | export default class extends Vue { }
     | ^
  11 | 

✖ 1 problem (1 error, 0 warnings)

이 문제를 해결하려면 .eslintrc.js babel-eslint 를 제거합니다.

eslintrc.js

parserOptions: {
  parser: 'babel-eslint' // この行を削除
}

확인

http://localhost:3000/ 로 이동하여 아래와 같은 화면을 확인할 수 있으면 완료됩니다!
수고하셨습니다!