v3
Nuxt on GitHub

TypeScript

Nuxt는 완전한 타입 지원을 제공하며, 코딩 시 정확한 타입 정보를 쉽게 확인할 수 있도록 유용한 단축 기능을 제공합니다.

타입 검사

기본적으로 Nuxt는 성능상의 이유로 nuxt dev 또는 nuxt build를 실행할 때 타입 검사를 수행하지 않습니다.

빌드 또는 개발 시 타입 검사를 활성화하려면, vue-tsc와 typescript를 개발 의존성으로 설치하세요:

npm install --save-dev vue-tsc typescript

그런 다음, nuxt typecheck 명령어를 실행하여 타입을 검사하세요:

Terminal
npx nuxt typecheck

빌드 또는 개발 시 타입 검사를 활성화하려면, nuxt.config 파일에서 typescript.typeCheck 옵션을 사용할 수도 있습니다:

nuxt.config.ts
export default defineNuxtConfig({
  typescript: {
    typeCheck: true
  }
})

자동 생성 타입

nuxt dev 또는 nuxt build를 실행하면, Nuxt는 IDE 타입 지원(및 타입 검사)을 위해 다음 파일들을 생성합니다:

.nuxt/nuxt.d.ts

이 파일에는 사용 중인 모든 모듈의 타입과 Nuxt가 요구하는 주요 타입이 포함되어 있습니다. IDE가 이 타입들을 자동으로 인식해야 합니다.

파일 내 일부 참조는 buildDir(.nuxt) 내에서만 생성되는 파일을 가리키므로, 전체 타입 지원을 위해서는 nuxt dev 또는 nuxt build를 실행해야 합니다.

.nuxt/tsconfig.json

이 파일에는 프로젝트에 권장되는 기본 TypeScript 설정이 포함되어 있으며, Nuxt나 사용 중인 모듈이 주입한 alias가 해결되어 있습니다. 이를 통해 ~/file 또는 #build/file과 같은 alias에 대한 전체 타입 지원과 경로 자동 완성을 사용할 수 있습니다.

기본 디렉터리 외에 디렉터리를 포함하려면 nuxt.config의 imports 섹션을 사용하는 것을 고려하세요. 이는 앱 전반에서 사용하는 타입을 자동으로 import하는 데 유용할 수 있습니다.

이 설정을 확장하는 방법에 대해 더 알아보기.

Daniel Roe가 Nuxt 내장 alias에 대해 설명하는 영상을 시청하세요.
Nitro는 API 라우트를 위한 자동 타입 생성도 지원합니다. 또한, Nuxt는 전역에서 사용할 수 있는 컴포넌트와 composables에서의 자동 import, 그리고 기타 핵심 기능에 대한 타입도 생성합니다.
./.nuxt/tsconfig.json에서 확장된 모든 옵션은 tsconfig.json에 정의된 옵션에 의해 덮어써집니다. 예를 들어 "compilerOptions.paths"와 같은 옵션을 직접 설정하면, TypeScript는 ./.nuxt/tsconfig.json의 모듈 해석을 반영하지 않습니다. 이로 인해 #imports와 같은 모듈 해석이 인식되지 않을 수 있습니다.

./.nuxt/tsconfig.json에서 제공하는 옵션을 추가로 확장해야 하는 경우, nuxt.config 내에서 alias 속성을 사용할 수 있습니다. Nuxt가 이를 인식하여 ./.nuxt/tsconfig.json을 적절히 확장합니다.

엄격한 검사

TypeScript는 프로그램의 안전성과 분석을 높이기 위한 다양한 검사를 제공합니다.

엄격한 검사는 Nuxt에서 기본적으로 활성화되어 있어 더 높은 타입 안전성을 제공합니다.

코드베이스를 TypeScript로 변환 중이라면, nuxt.config에서 strict를 false로 설정하여 엄격한 검사를 일시적으로 비활성화할 수 있습니다:

nuxt.config.ts
export default defineNuxtConfig({
  typescript: {
    strict: false
  }
})