TypeScript 개발을 위한 효과적인 프롬프트 패턴을 알아봅니다.
TypeScript 프롬프트 구조
타입 정의
기본 타입
다음 데이터 구조에 대한 TypeScript 타입을 정의해줘.
데이터: 사용자 정보
필드:
- id: 문자열 (UUID)
- email: 이메일 형식
- name: 문자열
- role: 'admin' | 'user' | 'guest'
- profile: 선택적 프로필 객체
- createdAt: 날짜
- settings: 중첩 객체
요구사항:
- interface와 type 모두 사용
- 엄격한 타입 (any 금지)
- JSDoc 주석
API 응답 타입
REST API 응답 타입을 정의해줘.
패턴:
1. 성공 응답: { data: T, meta?: MetaInfo }
2. 에러 응답: { error: ErrorInfo }
3. 페이지네이션: { data: T[], pagination: PageInfo }
요구사항:
- 제네릭 활용
- 유니온 타입으로 구분
- 타입 가드 함수
제네릭
제네릭 함수
제네릭 유틸리티 함수들을 작성해줘.
함수:
1. groupBy<T>(array: T[], key: keyof T): Record<string, T[]>
2. unique<T>(array: T[], key?: keyof T): T[]
3. sortBy<T>(array: T[], key: keyof T, order?: 'asc' | 'desc'): T[]
요구사항:
- 타입 안전성 보장
- 올바른 추론
- 오버로드 필요 시 추가
제네릭 클래스
제네릭 Repository 클래스를 작성해줘.
클래스: Repository<T extends BaseEntity>
메서드:
- findById(id: string): Promise<T | null>
- findAll(filter?: Partial<T>): Promise<T[]>
- create(data: Omit<T, 'id' | 'createdAt'>): Promise<T>
- update(id: string, data: Partial<T>): Promise<T>
- delete(id: string): Promise<boolean>
요구사항:
- 제네릭 제약 조건
- 유틸리티 타입 활용
- 비동기 처리
제네릭 컴포넌트
제네릭 Select 컴포넌트 타입을 작성해줘.
Props:
- options: T[]
- value: T | null
- onChange: (value: T) => void
- getLabel: (item: T) => string
- getValue: (item: T) => string | number
요구사항:
- 제네릭 props
- React.FC 타입
- forwardRef 지원
유틸리티 타입
커스텀 유틸리티
커스텀 유틸리티 타입들을 만들어줘.
타입:
1. DeepPartial<T> - 모든 중첩 필드 선택적
2. DeepReadonly<T> - 모든 중첩 필드 읽기전용
3. RequireAtLeastOne<T> - 최소 하나 필수
4. ExcludeNull<T> - null 제외
5. Mutable<T> - readonly 제거
각 타입에 사용 예시 포함
조건부 타입
조건부 타입을 활용한 유틸리티를 만들어줘.
타입:
1. ExtractArrayType<T> - 배열이면 요소 타입, 아니면 T
2. FunctionReturnType<T> - 함수면 반환 타입, 아니면 never
3. NonEmptyArray<T> - 최소 1개 요소 보장
4. PromiseType<T> - Promise면 내부 타입
infer 키워드 활용
타입 가드
사용자 정의 타입 가드
타입 가드 함수들을 작성해줘.
타입:
type User = { type: 'user'; name: string }
type Admin = { type: 'admin'; permissions: string[] }
type Guest = { type: 'guest' }
type Account = User | Admin | Guest
타입 가드:
- isUser(account): account is User
- isAdmin(account): account is Admin
- isAuthenticated(account): account is User | Admin
요구사항:
- 런타임 체크 로직
- 타입 좁히기 동작
- 사용 예시
API 응답 가드
API 응답 타입 가드를 작성해줘.
타입:
type ApiSuccess<T> = { success: true; data: T }
type ApiError = { success: false; error: string }
type ApiResponse<T> = ApiSuccess<T> | ApiError
가드:
- isSuccess<T>(response): response is ApiSuccess<T>
- isError(response): response is ApiError
에러 처리 예시 포함
고급 타입
Mapped Types
Mapped Type을 활용한 타입을 만들어줘.
요구사항:
1. Form<T> - 모든 필드를 { value: T[K], error?: string }로
2. Validators<T> - 모든 필드를 (value: T[K]) => boolean으로
3. Events<T> - 모든 필드를 on + 대문자 시작으로
예시:
type User = { name: string; age: number }
type UserForm = Form<User>
// { name: { value: string; error?: string }; ... }
Template Literal Types
Template Literal Type을 활용한 타입을 만들어줘.
요구사항:
1. EventName<T> - 'on' + key의 파스칼케이스
2. Getter<T> - 'get' + key의 파스칼케이스
3. CSSProperty - 가능한 CSS 속성 조합
예시:
type User = { name: string }
type UserEvents = EventName<User>
// 'onName'
실전 프롬프트
완전한 타입 시스템
전자상거래 앱의 타입 시스템을 설계해줘.
포함할 타입:
1. 사용자 (User, Admin, Guest)
2. 상품 (Product, ProductVariant)
3. 주문 (Order, OrderItem, OrderStatus)
4. 결제 (Payment, PaymentMethod)
5. API 응답 (성공, 에러, 페이지네이션)
요구사항:
- 재사용 가능한 기본 타입
- 제네릭 활용
- 유틸리티 타입 사용
- 타입 가드 함수
- 엄격한 null 체크
타입 안전 이벤트 시스템
타입 안전한 이벤트 시스템을 만들어줘.
요구사항:
- 이벤트 맵 정의
- emit과 on의 타입 연동
- 와일드카드 이벤트
- 자동완성 지원
예시:
const emitter = createEmitter<{
userCreated: { userId: string }
orderPlaced: { orderId: string; total: number }
}>()
emitter.on('userCreated', (payload) => {
// payload는 { userId: string }로 추론
})
팁
| 팁 | 설명 |
|---|---|
| 구조 설명 | 데이터 형태 상세히 |
| 제약 조건 | 필수/선택, 범위 등 |
| 사용 맥락 | API, 폼, 상태 등 |
| 예시 포함 | 기대하는 결과 |
| 엄격도 | any 허용 여부 |
타입 시스템은 코드의 안정성을 높입니다.