TypeScript 실무에서 자주 사용하는 유용한 팁들
TypeScript를 사용하면서 알게 된 실무에서 정말 유용한 팁들을 정리해보았습니다.
1. 🔧 Utility Types 활용하기
Partial과 Required
interface User {
id: number;
name: string;
email: string;
}
// 부분적으로 업데이트할 때
function updateUser(id: number, updates: Partial<User>) {
// ...
}
// 모든 필드가 필수일 때
function createUser(user: Required<User>) {
// ...
}
Pick과 Omit
// 특정 필드만 선택
type UserSummary = Pick<User, 'id' | 'name'>;
// 특정 필드만 제외
type CreateUserRequest = Omit<User, 'id'>;
2. 🎯 타입 가드 활용하기
function isString(value: unknown): value is string {
return typeof value === 'string';
}
function processValue(value: unknown) {
if (isString(value)) {
// 여기서 value는 string 타입으로 추론됨
console.log(value.toUpperCase());
}
}
3. 🔀 Union 타입과 Discriminated Union
type LoadingState = {
status: 'loading';
};
type SuccessState = {
status: 'success';
data: any;
};
type ErrorState = {
status: 'error';
error: string;
};
type ApiState = LoadingState | SuccessState | ErrorState;
function handleApiState(state: ApiState) {
switch (state.status) {
case 'loading':
// state는 LoadingState 타입
break;
case 'success':
// state는 SuccessState 타입, data 접근 가능
console.log(state.data);
break;
case 'error':
// state는 ErrorState 타입, error 접근 가능
console.log(state.error);
break;
}
}
4. 🎨 Generic 제약조건
interface Identifiable {
id: number;
}
function updateEntity<T extends Identifiable>(
entity: T,
updates: Partial<T>
): T {
return { ...entity, ...updates };
}
5. 📝 Mapped Types
type Readonly<T> = {
readonly [P in keyof T]: T[P];
};
type Optional<T> = {
[P in keyof T]?: T[P];
};
// 사용 예
type ReadonlyUser = Readonly<User>;
type OptionalUser = Optional<User>;
이런 팁들을 활용하면 더 안전하고 유지보수하기 쉬운 TypeScript 코드를 작성할 수 있습니다! 💪