Vue3와 TypeScript 통합 사용법

Vue3는 TypeScript 지원을 기본으로 내장하고 있어, 프로젝트의 안정성과 유지보수성을 크게 향상시킬 수 있습니다. 이 글에서는 Vue3에서 TypeScript를 어떻게 적용하고 사용하는지에 대해 자세히 설명합니다.

왜 Vue3에서 TypeScript를 써야 할까?

• 정적 타입 검사로 실수 방지
• IDE 자동완성 및 인텔리센스 향상
• 리팩토링과 협업에 유리
• Vue3 Composition API와 궁합이 좋음

프로젝트에 TypeScript 적용하기

▶ 1. Vite로 새 프로젝트 생성 (권장)

npm init vue@latest
# 프로젝트 생성 시 TypeScript 선택

 

▶ 2. 기존 Vue3 프로젝트에 TypeScript 추가하기

npm install --save-dev typescript
npx tsc --init

기본 tsconfig.json이 생성되고 .vue, .ts 파일을 인식하도록 설정해줘야 합니다.

// tsconfig.json 일부 설정 예시
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "jsx": "preserve",
    "types": ["vite/client"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

Vue3 Composition API + TypeScript 사용 예시

<script lang="ts" setup>
import { ref } from 'vue'

const count = ref<number>(0)

function increment(): void {
  count.value++
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

• ref<number>(0) : 변수 타입 명시
• 함수 increment()에도 : void 리턴 타입 지정

Props와 Emits의 타입 선언

 

▶ Props 타입 지정

defineProps<{
  title: string
  count?: number
}>()

▶ Emits 타입 선언

const emit = defineEmits<{
  (e: 'update', value: number): void
}>()

Composition API를 쓸 경우, defineProps, defineEmits에 타입을 지정해주면 자동 완성도 되고 오류도 잡아줍니다.

defineComponent 사용 시 예시 (Options API)

import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    title: {
      type: String,
      required: true
    }
  },
  setup(props) {
    console.log(props.title) // string으로 자동 추론됨
    return {}
  }
})

기타 팁

• 타입 선언 파일 (.d.ts) 을 활용해 전역 변수, 플러그인 등의 타입 정의 가능
• @/types 폴더를 만들어 공통 타입을 관리하면 유지보수에 유리

마무리 요약

항목	설명
lang="ts"	<script>에서 TypeScript 사용 선언
defineProps<T>()	Props 타입 안전하게 정의
ref<Type>()	반응형 변수에 타입 적용
emit 타입 명시	이벤트 이름과 페이로드 타입 안전하게 관리
tsconfig.json	Vue 파일 포함, 경로 별칭 등 설정 필수