[Nuxt3] TypeScript 설정

 

Nuxt 3를 사용하면서 TypeScript 환경을 보다 엄격하게 관리하고 싶다면, nuxt.config.ts 파일에서 아래와 같이 여러 옵션을 설정할 수 있습니다.

pnpm install -D vue-tsc typescript

// nuxt.config.ts
typescript: {
  shim: false, // Nuxt가 자동으로 생성하는 Vue 파일의 타입 선언(shim)을 사용하지 않음
  typeCheck: {
    // 빌드 시 타입 검사를 활성화하여 오류를 사전에 발견합니다.
    eslint: true, // 타입 검사와 함께 ESLint 검사도 실행 (true 또는 상세 옵션 객체 사용 가능)
    tsconfigPath: './tsconfig.json', // 사용할 tsconfig 파일의 경로를 명시적으로 지정
    memoryLimit: 4096, // 타입 검사 프로세스에 할당할 메모리 제한 (단위: MB)
    ignoreNotFoundWarnings: true // 누락된 타입 정의 관련 경고를 무시할지 여부 설정
  }
}

각 옵션 설명

shim: false

Nuxt는 기본적으로 Vue 컴포넌트를 TypeScript 환경에서 사용할 수 있도록 자동 타입 선언(shim)을 생성합니다.
shim: false로 설정하면 이 자동 생성 기능을 사용하지 않고, 개발자가 직접 타입 선언 파일을 관리할 수 있습니다.

typeCheck

typeCheck 옵션은 빌드 시 TypeScript 타입 검사를 활성화합니다.
이 옵션을 통해 코드에 타입 오류가 있을 경우 빌드가 실패하여, 문제를 사전에 해결할 수 있습니다.

추가 하위 옵션

• eslint: 타입 검사와 함께 ESLint 검사를 실행합니다. true로 설정하면 기본 ESLint 구성을 사용하거나, 객체 형태로 세부 옵션을 지정할 수 있습니다.
• tsconfigPath: 프로젝트에서 사용할 tsconfig.json 파일의 경로를 명시합니다. 기본값이 아닌 다른 설정 파일을 사용하고자 할 때 유용합니다.
• memoryLimit: 타입 검사 프로세스에 할당할 메모리 용량을 설정합니다. 큰 프로젝트의 경우 메모리 부족 문제를 방지하기 위해 이 값을 늘릴 수 있습니다.
• ignoreNotFoundWarnings: 누락된 타입 정의로 인한 경고를 무시하도록 설정합니다. 일부 외부 라이브러리의 타입 정의가 없을 때 발생하는 경고를 무시할 수 있습니다.