Typescript (Composition API)

개요

타입스크립트는 정적 타입을 제공하여 코드의 안정성과 가독성을 높여줍니다. 이 문서는 Vue 3의 Composition API와 타입스크립트를 함께 사용하는 방법에 대해 설명합니다.

1. 기본 사용법

<script setup>은 SFC 내에서 Composition API를 더 쉽게 사용하기 위한 컴파일 문법으로 Composition API를 사용하는 경우 setup 사용을 권장 합니다. <script> 태그에 lang="ts" 속성을 추가하면 SFC에서 타입스크립트를 사용할 수 있습니다.

<script setup lang="ts">
// 타입스크립트 활성화
const ts: string = '타입스크립트 사용하기'
</script>

템플릿에서 타입스크립트를 사용하여 타입 캐스팅을 지원합니다.

<script setup lang="ts">
const ts: string | number = 1
</script>

<template>
{{ (ts as number).toFixed(2) }}
</template>

2. Props

<script setup>을 사용하는 경우 defineProps() 컴파일러 매크로는 아규먼트를 기반으로 타입을 추론합니다.

<script setup lang="ts">
const props = defineProps({
    name: String,
    age: Number
})
</script>

별도의 인터페이스 또는 타입을 사용하여 Props 타입을 정의하고 제네릭 타입 아규먼트를 사용하여 정의할 수 있습니다.

<script setup lang="ts">
interface User {
    name: string
    age: number
}

const props = defineProps<User>()
</script>

3. Emits

<script setup>에서 emit함수도 타입스크립트를 사용하여 타입을 선언할 수 있습니다.

<script setup lang="ts">
const emit = defineEmits<{
    userUpdate: [name: string, age: number]
}>()
</script>

4. ref()

ref()함수는 제네릭 아규먼트를 전달하여 타입을 선언할 수 있습니다.

<script setup lang="ts">
// number 타입 0으로 초기화된 반응형 참조 count
const count = ref<number>(0)
</script>

템플릿의 ref는 명시적인 제네릭 타입 아규먼트와 null을 초기 값으로 생성해야 합니다.

<template>
    <input ref="el"/>
</template>

<script setup lang="ts">
const el = ref<HTMLInputElement | null>(null)
</script>

Last modified: 21 4월 2025