[typescript] Vue.js 컴포지션 API에서의 타입스크립트 활용

26 Dec 2023

typescript

Vue.js는 컴포넌트 기반의 프론트엔드 프레임워크로, 그 유연한 특성과 함께 타입스크립트를 사용하여 안정적인 프로젝트를 구축할 수 있다. Vue.js 3에서 도입된 컴포지션 API는 타입스크립트와의 통합을 향상시켰으며, 이를 통해 타입 안정성을 보장하고 코드 유지보수성을 높일 수 있다.

컴포지션 API와 타입스크립트

컴포지션 API를 사용하면 여러 가지 기능을 논리적으로 그룹화할 수 있어 코드의 가독성과 재사용성을 높일 수 있다. 이를 타입스크립트와 함께 사용하면 컴포넌트와 관련된 타입 정보를 더욱 명확하게 정의할 수 있다.

아래는 타입스크립트를 사용하여 컴포지션 API를 활용하는 예제이다.

// Composable
import { ref, computed } from 'vue';

type User = {
  id: number;
  name: string;
  email: string;
};

export function useUser() {
  const currentUser = ref<User | null>(null);

  function fetchUser(id: number): void {
    // API 호출로부터 사용자 정보를 가져와 currentUser에 할당
  }

  const isUserLoggedIn = computed(() => currentUser.value !== null);

  return {
    currentUser,
    fetchUser,
    isUserLoggedIn
  };
}

위 코드에서 useUser 함수는 사용자 상태와 사용자 관련 기능을 논리적으로 그룹화하고, 각각의 기능에 대한 타입 정보를 명시적으로 정의했다.

타입 안정성 확보

컴포넌트와 관련된 로직을 컴포지션 API로 분리하면, 타입스크립트를 사용하여 각 컴포넌트의 타입 정보를 보다 정확하게 추론할 수 있다. 이를 통해 타입 안정성을 보장하고 런타임 에러를 방지할 수 있다.

컴포지션 API를 사용하여 타입 안정성을 확보하는 예제는 다음과 같다.

// Component
<script setup lang="ts">
import { useUser } from './composables/user';

const { currentUser, fetchUser, isUserLoggedIn } = useUser();

// currentUser.id에 접근할 때 타입 안정성이 보장됨
</script>

위 코드에서 useUser 컴포지션을 통해 반환된 currentUser 객체를 사용할 때, 타입 안정성이 보장되어 currentUser 객체의 프로퍼티에 올바른 타입의 값만 할당될 수 있도록 보장된다.

결론

Vue.js 컴포지션 API를 사용하여 타입스크립트를 활용하면 코드의 가독성과 재사용성을 높일 뿐만 아니라, 타입 안정성을 보장할 수 있다. 이를 통해 안정적이고 확장 가능한 Vue.js 애플리케이션을 구축할 수 있으며, 타입 안정성을 갖춘 코드를 유지보수하는 데 큰 도움이 된다.

참고 문헌:

Vue.js 공식 문서: Vue 3 Composition API
TypeScript 공식 문서: TypeScript Handbook