Nuxt + Typescript

먼저 Nuxt 공식 홈페이지에 나와있는 영어를 번역하면서 Typescript의 컨셉에 대해 살펴보고 적용하는 방법에 대해서 알아보겠습니다.

TypeScript Concepts

Nuxt 3는 코딩할 때 정확한 type 정보에 접근할 수 있도록 유용한 shortcut을 제공합니다.

Type-checking

기본적으로 Nuxt는 성능상의 이유로 nuxi dev 또는 nuxi build를 실행할 때 type을 확인하지 않습니다.

nuxt.config 파일의 typescript.typeCheck 옵션을 사용하여 빌드 또는 개발 시 type 검사를 활성화하거나 nuxi를 수동으로 type을 검사할 수 있습니다.

yarn nuxi typecheck

위의 커맨드를 입력하고 typescript 및 vue-tsc를 설치를 해줍니다.

Auto-generated types

nuxi dev 또는 nuxi build를 실행 시 Nuxt는 IDE type support 및 type 검사를 하기 위해 아래 2가지 파일을 생성합니다.

 .nuxt / nuxt.d.ts  

• 이 파일에는 사용 중인 모듈의 유형과 Nuxt 3에 필요한 키 유형이 포함되어 있습니다. IDE는 이러한 유형을 자동으로 인식해야 합니다.
• 파일의 일부 참조는 buildDir(.nuxt) 내에서만 생성된 파일에 대한 것이므로 전체 입력의 경우 nuxi dev 또는 nuxi build를 실행해야 합니다.

 .nuxt / tsconfig.json  

• 이 파일에는 Nuxt 또는 사용 중인 모듈에 의해 주입된 확인된 별칭을 포함하여 프로젝트에 권장되는 기본 TypeScript 구성이 포함되어 있으므로 ~/file 또는 #build/file과 같은 별칭에 대한 전체 type support 및 경로 자동 완성을 얻을 수 있습니다.

Stricter checks

• TypeScript는 프로그램에 대한 더 많은 안전성과 분석을 제공하기 위해 특정 검사와 함께 제공됩니다.
• 코드베이스를 TypeScript로 변환하고 익숙해지면 이러한 검사를 활성화하여 안전성을 높일 수 있습니다.
• strict type 검사를 활성화하려면  nuxt.config 를 다음과 같이 작성해야 합니다.

export default defineNuxtConfig({
  typescript: {
    strict: true
  }
})

이제부터는 typescript.nuxt를 보면서 알아가 보겠습니다.

Introduction

Nuxt Typescript는 다음 3가지 패키지가 있습니다.

이 패키지들은 Nuxt v2.10 이상에서만 사용하도록 되어 있습니다.

 

• @nuxt/types
• @nuxt/typescript-build
• @nuxt/typescript-runtime

Setup

Nuxt TypeScript 지원은 주로 Nuxt 모듈, @nuxt/typescript-build 및 해당 types은 @nuxt/types를 통해 제공됩니다. 다음은 설치 및 가이드라인입니다.

Installation

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

최신 버전이 아닌 경우 Nuxt 버전과 일치하도록 특정 유형의 버전을 설치할 수 있습니다.

- yarn을 이용한 설치

yarn add --dev @nuxt/types@2.13.2

- npm일 경우

npm install --save-dev @nuxt/types@2.13.2

Configuration

nuxt.config.js의 buildModules에 @nuxt/typescript-build를 추가하기만 하면 됩니다

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,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

다음과 같이 vue-shim.d.ts 파일을 만들어 Vue 파일에 대한 type도 제공해야 합니다. 

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

또한 이 파일을 프로젝트의 루트 디렉토리나 types라는 디렉토리에 배치할 수 있습니다. 사용자 지정 디렉터리에 배치할 수 있지만 tsconfig.json 파일에서 typeRoots를 구성해야 합니다.

 

모듈 옵션은 여기를 참고하세요.

Runtime (optional)

• TypeScript runtime은 nuxt.config 파일, 로컬 모듈 및 serverMiddleware와 같이 Webpack에서 컴파일되지 않은 파일에 필요합니다.
• Nuxt.js는 이 전용 패키지에 TypeScript runtime wrapper를 만들었습니다. wrapper는 nuxt-ts라는 바이너리로 실행되기 전에 ts-node를 뒤에서 등록합니다.

Installation

yarn add @nuxt/typescript-runtime

이 패키지는 production에 필요하기 때문에 @nuxt/typescript-build와 같은 devDependency가 아니라 dependency로 설치됩니다.

Usage

• package.json 파일을 업데이트하기만 하면 됩니다.
• 참고

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "generate": "nuxt generate",
  "start": "nuxt start"
},
"dependencies": {
  "@nuxt/typescript-runtime": "latest",
  "nuxt": "latest"
},
"devDependencies": {
  "@nuxt/types": "latest",
  "@nuxt/typescript-build": "latest"
}

이제 nuxt.config 파일, 로컬 모듈 및 serverMiddleware에 TypeScript를 사용할 수 있습니다.

Lint

Configuration

• ESLint를 사용하여 프로젝트를 Lint하는 경우 TypeScript 파일에서 ESLint를 Lint로 만드는 방법은 @nuxtjs/eslint-config-typescript를 설치하기만 하면 됩니다.
• @nuxtjs/eslint-config를 이미 사용하고 있는 경우 dependencies에서 제거하면 Nuxt TypeScript ESLint config에 포함됩니다.

yarn add --dev @nuxtjs/eslint-config-typescript

그다음 @nuxtjs/eslint-config-typescript를 확장하여 ESLint 구성 .eslintrc.js를 생성하거나 편집합니다.

module.exports = {
  extends: [
    '@nuxtjs/eslint-config-typescript'
  ]
}

• ESlint가 TypeScript 파서(@typescript-eslint/parser)를 사용하게 하므로 parserOptions.parser 옵션이 사용자나 확장 중인 다른 구성에 의해 영향받지 않도록 하세요.
• babel-eslint를 파서로 사용하고 있었다면 .eslintrc.js 및 dependencies에서 제거하면 됩니다.

마지막으로, package.json에서 lint부분을 다음과 같이 작성하세요. 

"lint": "eslint --ext .ts,.js,.vue ."

npm run lint (or yarn lint)을 터미널에 입력하여 lint를 실행할 수 있습니다.

 

• 위와같이 터미널에서 실행하는 게 아닌 파일이 저장될 때마다 린트를 실행하려면 typeCheck 모듈 옵션을 구성하여 fork-ts-checker-webpack-plugin의 eslint 기능을 활성화할 수 있습니다.
• nuxt.config.js

export default {
  typescript: {
    typeCheck: {
      eslint: {
        files: './**/*.{ts,js,vue}'
      }
    }
  }
}

 

 

출처

• https://v3.nuxtjs.org/guide/concepts/typescript/
• https://typescript.nuxtjs.org/