18. Vite와 TypeScript - 2

Vite에서 TypeScript 사용 시 유의사항

Vite와 TypeScript의 조합은 현대 웹 개발에 있어 매우 강력한 도구입니다. 그러나 이러한 조합을 사용할 때 몇 가지 유의해야 할 점이 있습니다. 이 섹션에서는 Vite에서 TypeScript를 사용할 때의 주요 유의사항을 다루고, 이러한 사항들이 개발 과정에 어떤 영향을 미치는지 설명하겠습니다.

1. 타입 정의 파일 설치

TypeScript는 정적 타입 언어이므로, 외부 라이브러리를 사용할 때 해당 라이브러리의 타입 정의 파일을 설치해야 합니다. 이는 @types 패키지를 통해 제공되며, 올바른 타입 검사를 위해 필수적입니다.

예를 들어, lodash 라이브러리를 사용할 경우 다음과 같이 타입 정의를 설치해야 합니다.

npm install --save lodash
npm install --save-dev @types/lodash

이렇게 하면 lodash의 각 기능에 대한 타입 정보를 TypeScript가 인식하게 되어, 코드 작성 시 IntelliSense와 타입 검사가 가능해집니다.

2. Vue 파일에서의 타입 정의

Vue 컴포넌트를 TypeScript로 작성할 때는 타입 정의를 명확히 해야 합니다. defineComponent 함수를 사용할 때, props와 data의 타입을 정의하여 가독성과 유지보수성을 높이는 것이 좋습니다.

예시: Vue 컴포넌트에서 타입 정의하기

import { defineComponent } from 'vue';

interface Props {
  title: string;
}

export default defineComponent({
  props: {
    title: {
      type: String,
      required: true,
    },
  },
  setup(props: Props) {
    return () => <h1>{props.title}</h1>;
  },
});

위의 코드에서는 Props 인터페이스를 정의하여 title의 타입을 명확히 하고 있습니다. 이를 통해 TypeScript는 title이 항상 문자열임을 보장합니다.

3. ESLint 및 Prettier 설정

TypeScript와 Vite를 사용할 때 ESLint 및 Prettier와 같은 코드 품질 도구를 설정하는 것이 중요합니다. TypeScript는 자바스크립트와 다른 규칙을 따르기 때문에, 이를 지원하는 ESLint 플러그인을 설치하고 설정해야 합니다.

ESLint 설치 예시

npm install --save-dev eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin

 

ESLint 설정 예시

{
  "extends": [
    "plugin:vue/vue3-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "rules": {
    "vue/no-unused-components": "warn"
  }
}

위와 같이 설정하면 Vue 및 TypeScript 규칙을 동시에 따를 수 있습니다. 코드의 품질을 유지하고, 잠재적인 버그를 사전에 예방할 수 있습니다.

4. Vue Router와의 타입 호환성

Vue Router를 사용할 때는 라우터의 타입 정의도 함께 고려해야 합니다. 라우터의 네비게이션 가드를 사용할 때 TypeScript가 올바르게 작동하도록 RouteRecordRaw 타입을 사용할 수 있습니다.

예시: Vue Router와의 타입 정의

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('./views/Home.vue'),
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('./views/About.vue'),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

위의 코드에서는 RouteRecordRaw를 사용하여 라우트에 대한 타입을 명확히 하고 있습니다. 이는 Vue Router의 설정을 더욱 견고하게 만들어줍니다.

5. 제네릭 및 고급 타입 활용

TypeScript의 강력한 기능 중 하나는 제네릭을 활용할 수 있다는 점입니다. Vite를 사용할 때도, 제네릭을 활용하여 재사용 가능한 컴포넌트를 만드는 것이 가능합니다.

예시: 제네릭을 활용한 컴포넌트

import { defineComponent } from 'vue';

interface Item {
  id: number;
  name: string;
}

export default defineComponent({
  props: {
    items: {
      type: Array as () => Item[],
      required: true,
    },
  },
  setup(props) {
    return () => (
      <ul>
        {props.items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    );
  },
});

위의 예제는 items를 제네릭으로 처리하여, 다양한 타입의 아이템을 받아들이는 컴포넌트를 만들어줍니다. 이를 통해 코드의 유연성과 재사용성을 높일 수 있습니다.

6. 결론

Vite에서 TypeScript를 사용할 때는 여러 유의사항을 고려해야 합니다. 올바른 타입 정의, 코드 품질 도구 설정, Vue Router와의 타입 호환성, 제네릭 사용 등을 통해 개발 경험을 향상시킬 수 있습니다. Vite와 TypeScript의 통합을 통해 개발자는 효율적으로 코드를 작성하고, 버그를 사전에 예방하는 등 더욱 생산적인 개발 환경을 조성할 수 있습니다. 이러한 유의사항을 통해 프로젝트의 품질을 높이고, 유지보수성을 향상시키는 데 기여할 수 있습니다.