Vue.js에서 TypeScript를 사용하는 방법은 무엇인가요?
_____Q1: Vue.js에서 TypeScript를 사용하려면 기본적으로 무엇을 설정해야 하나요?
A1: Vue 프로젝트를 생성할 때 `@vue/cli`를 이용하면, 프로젝트 생성 시 TypeScript 옵션을 선택할 수 있습니다. 또는 기존 프로젝트에는 `typescript`, `vue-class-component`, `vue-property-decorator` 등의 패키지를 설치하고 `shims-vue.d.ts` 타입 선언 파일을 추가해야 합니다.
---
Q2: Vue 3에서 TypeScript를 사용하는 가장 권장되는 방식은 무엇인가요?
A2: Vue 3는 Composition API를 기본 지원하므로, `
```
---
Q3: Vue 2에서 TypeScript를 어떻게 사용하나요?
A3: Vue 2는 Options API가 기본이라, `vue-class-component`와 `vue-property-decorator`를 활용해 클래스 스타일 컴포넌트를 작성할 수 있습니다. 또는 기존의 Options API에 타입을 명시하는 방식을 쓸 수도 있습니다. 예:
```ts
import Vue from 'vue';
import Component from 'vue-class-component';
@Component
export default class MyComponent extends Vue {
message: string = 'Hello TypeScript';
greet() {
alert(this.message);
}
}
```
---
Q4: Single File Component(.vue) 내에서 TypeScript를 사용하려면 어떻게 하나요?
A4: `
```
그리고 타입 선언 파일(`shims-vue.d.ts`)에 다음과 같이 Vue 컴포넌트 인식을 도와주는 선언이 필요합니다.
```ts
declare module '*.vue' {
import { DefineComponent } from 'vue';
const component: DefineComponent<{}, {}, any>;
export default component;
}
```
---
Q5: Vue 컴포넌트 Props에 TypeScript로 타입을 지정하려면 어떻게 하나요?
A5: Vue 3에서는 `defineProps`를 사용하거나 `defineComponent` 내 `props`에 타입을 명시합니다.
```ts
export default defineComponent({
title: {
type: String,
required: true
}
}
});
```
또는 Composition API `
```
---
Q6: Vue와 TypeScript 함께 쓸 때 자주 발생하는 타입 오류는 무엇인가요?
A6:
- `this` 타입 추론 오류: Options API에서 `this`가 제대로 인식되지 않는 경우.
- `.vue` 파일을 모듈로 인식하지 못하는 문제 (해결: `shims-vue.d.ts` 추가).
- Props 타입과 기본값이 충돌하는 경우.
- Vue 인스턴스 프로퍼티에 대해 타입 선언 누락.
---
Q7: Vue 프로젝트에 TypeScript를 나중에 추가하려면 어떻게 하나요?
A7:
1. `typescript` 패키지 설치 (`npm install --save-dev typescript`)
2. `vue-class-component`, `vue-property-decorator` 등 설치 (Vue 2 사용 시)
3. `tsconfig.json` 생성 및 설정
4. `.vue` 파일 `