TypeScript를 실무 흐름으로 이해하기
TypeScript로 타입 안전한 JavaScript를 작성하세요. 타입 시스템, 타입 좁히기, 제네릭, 유틸리티 타입, 실무 패턴까지 완전 가이드. 이 가이드는 개념을 나열하기보다, 실제 프로젝트에서 판단해야 하는 순서대로 내용을 따라갈 수 있게 구성했습니다.
TypeScript로 타입 안전한 JavaScript를 작성하세요. 타입 시스템, 타입 좁히기, 제네릭, 유틸리티 타입, 실무 패턴까지 완전 가이드.
TypeScript로 타입 안전한 JavaScript를 작성하세요. 타입 시스템, 타입 좁히기, 제네릭, 유틸리티 타입, 실무 패턴까지 완전 가이드. 이 가이드는 개념을 나열하기보다, 실제 프로젝트에서 판단해야 하는 순서대로 내용을 따라갈 수 있게 구성했습니다.
화면을 그리는 법에서 멈추지 않고, 상태, 데이터 요청, 라우팅, 접근성, 배포 단위까지 함께 봅니다.
글로 읽은 내용을 머릿속에 오래 남기려면 먼저 흐름을 그림으로 잡는 편이 좋습니다. 아래 두 그림은 TypeScript를 학습할 때 계속 되돌아볼 수 있는 기준 지도입니다.
TypeScript를 처음 펼칠 때는 세부 명령보다 큰 그림이 먼저입니다. 이 섹션에서는 앞으로 배울 개념들이 어떤 문제를 풀기 위해 등장했는지부터 잡아봅니다.
npm install -D typescript ts-node
npx tsc --init
# tsconfig.json 핵심 설정
# "strict": true
# "target": "ES2022"
# "moduleResolution": "bundler"여기서는 타입 시스템을 실제 코드와 함께 확인합니다. 예제를 그대로 따라 하기보다, 입력과 출력, 그리고 바뀌기 쉬운 부분이 어디인지 보면서 읽어보세요.
// Discriminated Union (추천 패턴)
type Result<T> =
| { ok: true; value: T }
| { ok: false; error: string };
function parse(input: string): Result<number> {
const n = Number(input);
return isNaN(n)
? { ok: false, error: `"${input}" is not a number` }
: { ok: true, value: n };
}
const result = parse("42");
if (result.ok) console.log(result.value); // TypeScript가 타입을 좁힘여기서는 타입 좁히기 (Narrowing)을 실제 코드와 함께 확인합니다. 예제를 그대로 따라 하기보다, 입력과 출력, 그리고 바뀌기 쉬운 부분이 어디인지 보면서 읽어보세요.
type Circle = { kind: 'circle'; radius: number };
type Square = { kind: 'square'; side: number };
type Shape = Circle | Square;
function area(shape: Shape): number {
// 'kind' 필드로 분기하면 각 블록 안에서 타입이 자동으로 좁혀짐
if (shape.kind === 'circle') {
return Math.PI * shape.radius ** 2; // 여기서는 shape가 Circle로 좁혀짐
}
return shape.side ** 2; // 여기서는 Square로 좁혀짐
}
// 커스텀 타입 가드 — is 키워드로 타입을 확정
function isCircle(shape: Shape): shape is Circle {
return shape.kind === 'circle';
}여기서는 제네릭을 실제 코드와 함께 확인합니다. 예제를 그대로 따라 하기보다, 입력과 출력, 그리고 바뀌기 쉬운 부분이 어디인지 보면서 읽어보세요.
function pick<T, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
return Object.fromEntries(keys.map(k => [k, obj[k]])) as Pick<T, K>;
}
// 조건부 타입
type NonNullable<T> = T extends null | undefined ? never : T;
type ReturnType<T extends (...args: unknown[]) => unknown> = T extends (...args: unknown[]) => infer R ? R : never;
// 빌더 패턴
class QueryBuilder<T> {
private filters: Partial<T> = {};
where<K extends keyof T>(key: K, value: T[K]): this {
this.filters[key] = value;
return this;
}
build(): Partial<T> { return this.filters; }
}유틸리티 타입은 선택지가 갈리는 지점입니다. 표를 기준으로 각 방법의 쓰임새와 운영상의 차이를 비교해두면 이후 판단이 훨씬 쉬워집니다.
| 타입 | 설명 | 예시 |
|---|---|---|
| Partial | 모든 프로퍼티를 optional로 | Partial |
| Required | 모든 프로퍼티를 required로 | Required |
| Pick | 특정 프로퍼티만 선택 | Pick |
| Omit | 특정 프로퍼티 제외 | Omit |
| Record | 키-값 맵 타입 | Record |
TypeScript 실무 설계은 선택지가 갈리는 지점입니다. 표를 기준으로 각 방법의 쓰임새와 운영상의 차이를 비교해두면 이후 판단이 훨씬 쉬워집니다.
| 결정 지점 | 확인 질문 | 실무 기준 |
|---|---|---|
| 경계 | TypeScript 코드에서 바뀌기 쉬운 부분은 어디인가? | 입출력, 설정, 외부 연동, 핵심 규칙을 분리합니다. |
| 상태 | 상태가 어디서 생성되고 어디서 사라지는가? | 상태 소유자와 수명 주기를 코드로 드러냅니다. |
| 장애 | 실패했을 때 호출자는 무엇을 받는가? | timeout, fallback, error contract를 먼저 정합니다. |
이 섹션은 TypeScript 운영 기준을 실무 관점에서 정리합니다. 개념을 외우기보다, 어떤 상황에서 이 기준을 꺼내 쓸지에 초점을 맞춰보세요.
TypeScript 검증 전략은 선택지가 갈리는 지점입니다. 표를 기준으로 각 방법의 쓰임새와 운영상의 차이를 비교해두면 이후 판단이 훨씬 쉬워집니다.
| 품질 축 | 검증 방법 | 완료 기준 |
|---|---|---|
| 정확성 | 정상/실패 케이스를 자동화합니다. | 핵심 시나리오가 재현 가능하게 통과합니다. |
| 회귀 방지 | 버그 수정 시 동일 케이스를 테스트로 남깁니다. | 같은 장애가 다시 배포되지 않습니다. |
| 운영성 | 로그, 메트릭, 알림을 확인합니다. | 문제가 생겼을 때 원인 추적 경로가 있습니다. |