공유 형식 패키지 전략

공유 타입 패키지가 필요한 이유

// packages/types/src/index.ts
export interface User { id: string; name: string; email: string; }
export interface ApiResponse<T> { data: T; error?: string; }

패키지 구조

packages/types/
├── src/
│   ├── index.ts      # re-exports all
│   ├── user.ts
│   ├── product.ts
│   └── api.ts
├── tsconfig.json
└── package.json

타입 패키지를 위한 tsconfig

{
  "compilerOptions": {
    "composite": true,
    "declaration": true,
    "emitDeclarationOnly": true,
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

타입 패키지 사용하기

import type { User, ApiResponse } from "@myapp/types";

async function getUser(id: string): Promise<ApiResponse<User>> {
  // ...
}

직렬화에 안전한 타입 유지하기

// Good: serialization-safe
interface Event { id: string; createdAt: string; /* ISO date */ }
// Bad: Date is not JSON-serializable
interface Event { id: string; createdAt: Date; }

타입 패키지 버전 관리

# Breaking change: major bump
npm version major
# Adding optional fields: minor bump
npm version minor

OpenAPI에서 타입 생성하기

npx openapi-typescript ./api/openapi.yaml -o ./packages/types/src/api.ts

실행 시간 및 컴파일 시 타입에 Zod 사용하기

import { z } from "zod";
export const UserSchema = z.object({ id: z.string(), name: z.string() });
export type User = z.infer<typeof UserSchema>;

순환 의존성 방지하기

// types/ should not import from ui/ or api/
// ui/ and api/ both import from types/

타입 정확성 테스트하기

import { expectType } from "tsd";
import type { User } from "@myapp/types";
expectType<User>({ id: "1", name: "Alice", email: "a@b.com" });

복습: 공유 타입 전략

빠른 확인

학습 내용