0Pricing
Vue Academy · 강의

컴포넌트 라이브러리의 TypeScript 선언

vite-plugin-dts, .d.ts 파일 생성과 라이브러리 사용자를 위한 컴포넌트 Props 타입 지정을 익힙니다.

컴포넌트 라이브러리의 TypeScript 선언은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

타입 선언이 필요한 이유

TypeScript 사용자는 컴포넌트와 속성에 대한 자동 완성 및 타입 검사를 받을 수 있도록 .d.ts 파일을 필요로 합니다. 배포하는 라이브러리는 생성된 선언을 JS와 함께 제공해야 합니다.

vite-plugin-dts

vite-plugin-dts는 Vite 빌드 중 소스에서 .d.ts 파일을 생성하며, .vue 단일 파일 컴포넌트의 타입도 포함합니다.

npm install -D vite-plugin-dts

플러그인 추가하기

플러그인 배열에 dts()를 추가합니다. 컴파일 후 실행되어 선언을 dist에 출력합니다.

import dts from "vite-plugin-dts";

export default defineConfig({
  plugins: [vue(), dts()]
});

insertTypesEntry

insertTypesEntry 옵션은 모든 타입을 다시 내보내는 하나의 index.d.ts 진입 선언을 생성하여 JS 진입점과 일치시킵니다.

dts({
  insertTypesEntry: true
})

생성된 d.ts 파일

빌드가 끝나면 dist에는 소스를 반영한 .d.ts 파일과 통합된 진입 선언이 들어 있습니다. 이러한 파일은 컴포넌트 속성, 이벤트 방출, 내보내기를 설명합니다.

// dist/index.d.ts
export { MyButton } from "./MyButton.vue";
// dist/MyButton.vue.d.ts describes its props

package.json의 types 필드

types(또는 typings) 필드로 사용자가 진입 선언을 가리키도록 하여 TypeScript가 라이브러리의 타입을 확인하도록 합니다.

{
  "types": "./dist/index.d.ts"
}

exports 맵의 types

최신 패키지는 exports 맵에서 각 진입점별 타입도 노출하므로 하위 경로 가져오기가 올바르게 확인됩니다.

{
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/my-ui-lib.es.js"
    }
  }
}

전역 컴포넌트 자동 완성

사용자가 컴포넌트를 전역으로 등록하면 TypeScript가 템플릿 자동 완성과 속성 검사를 지원할 수 있도록 컴포넌트를 GlobalComponents 인터페이스에 선언해야 합니다.

GlobalComponents 확장하기

vue의 GlobalComponents에 컴포넌트를 추가하는 모듈 확장을 함께 제공합니다. 해당 타입을 참조하는 사용자는 템플릿에서 IntelliSense를 사용할 수 있습니다.

// global.d.ts
import MyButton from "./MyButton.vue";

declare module "vue" {
  export interface GlobalComponents {
    MyButton: typeof MyButton;
  }
}
export {};

컴포넌트 속성 타입 지정하기

TypeScript 타입과 함께 defineProps를 사용하여 생성된 선언에 정확한 속성 타입이 사용자에게 전달되도록 합니다.

// MyButton.vue <script setup lang="ts">
defineProps<{
  label: string;
  disabled?: boolean;
}>();

타입 확인하기

배포하기 전에 샘플 사용자 프로젝트에서 tsc --noEmit을 실행하거나 attw/are-the-types-wrong과 같은 도구를 사용하여 선언이 올바르게 확인되고 속성 검사가 수행되는지 확인합니다.

npx tsc --noEmit

빠른 확인

GlobalComponents 확장은 라이브러리 사용자에게 무엇을 제공합니까?

복습

vite-plugin-dts와 insertTypesEntry를 사용하여 .d.ts 파일을 생성하고, package.json의 types 필드와 exports 맵이 진입 선언을 가리키도록 설정합니다. 또한 GlobalComponents 확장을 함께 제공하여 사용자가 템플릿 자동 완성을 사용할 수 있게 합니다. defineProps로 속성 타입을 지정하고 tsc --noEmit으로 확인합니다.

자주 묻는 질문

“컴포넌트 라이브러리의 TypeScript 선언” 강의는 무료인가요?

네 — “컴포넌트 라이브러리의 TypeScript 선언” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“컴포넌트 라이브러리의 TypeScript 선언”에서 뭘 배우나요?

vite-plugin-dts, .d.ts 파일 생성과 라이브러리 사용자를 위한 컴포넌트 Props 타입 지정을 익힙니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vue Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“컴포넌트 라이브러리의 TypeScript 선언” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. Vite 라이브러리 모드 설정
  2. 컴포넌트 라이브러리의 TypeScript 선언
  3. 트리 셰이킹과 자동 가져오기
  4. npm 배포와 시맨틱 버전 관리
← Vue Academy(으)로 돌아가기