Question 1

type과 interface의 차이점은 무엇인가요?

Accepted Answer

둘 다 타입을 정의하는 데 사용되지만, 몇 가지 중요한 차이가 있습니다.

```typescript
// interface: 선언 병합(declaration merging) 가능
interface User {
  name: string;
  age: number;
}
interface User {
  email: string; // 기존 User에 병합됨
}

// type: 유니온, 인터섹션, 유틸리티 타입에 유리
type Status = 'active' | 'inactive'; // 유니온 타입
type UserWithRole = User & { role: string }; // 인터섹션
type Nullable<T> = T | null; // 제네릭 타입 별칭
```

| 특성 | interface | type |
|------|-----------|------|
| 선언 병합 | O | X |
| extends | O | & (인터섹션) |
| 유니온 타입 | X | O |

Question 2

제네릭(Generic)이란 무엇이며 어떻게 사용하나요?

Accepted Answer

제네릭은 타입을 매개변수화하여 재사용 가능한 컴포넌트를 만드는 기능입니다. 함수, 클래스, 인터페이스에서 사용할 수 있습니다. ```typescript // 제네릭 함수 function getFirst(arr: T[]): T | undefined { return arr[0]; } getFirst([1, 2, 3]); // number 타입 반환 getFirst(['a', 'b']); // string 타입 자동 추론 // 제네릭 인터페이스 interface ApiResponse { data: T; status: number; message: string; } type UserResponse = ApiResponse<{ name: string; email: string }>; // 제네릭 제약 (extends) function getProperty(obj: T, key: K): T[K

Question 3

TypeScript 유틸리티 타입(Partial, Pick, Omit 등)을 설명해주세요.

Accepted Answer

TypeScript는 기존 타입을 변환하는 내장 유틸리티 타입을 제공합니다. ```typescript interface User { id: number; name: string; email: string; age: number; } // Partial: 모든 속성을 선택적으로 type UpdateUser = Partial; // { id?: number; name?: string; email?: string; age?: number; } // Required: 모든 속성을 필수로 type RequiredUser = Required>; // Pick: 특정 속성만 선택 type UserPreview = Pick; // { id: number; name: string; } // Omit: 특정 속성을 제외 type UserWithoutId = Omit

Question 4

타입 가드(Type Guard)와 타입 좁히기(Narrowing)를 설명해주세요.

Accepted Answer

타입 좁히기는 넓은 타입을 좁은 타입으로 좁혀가는 과정이며, 타입 가드는 이를 수행하는 표현식입니다.

```typescript
// 1. typeof 가드
function process(value: string | number) {
  if (typeof value === 'string') {
    return value.toUpperCase(); // string으로 좁혀짐
  }
  return value.toFixed(2); // number로 좁혀짐
}

// 2. instanceof 가드
function handleError(error: Error | string) {
  if (error instanceof Error) {
    return error.message;
  }
  return error;
}

// 3. in 가드
interface Dog { bark(): void; }
interface Cat { meow(): void; }

function spea

Question 5

enum과 const enum, 그리고 as const의 차이점은?

Accepted Answer

TypeScript에서 상수를 정의하는 여러 방법이 있으며, 각각 장단점이 있습니다.

```typescript
// 1. enum: 런타임에 객체로 존재
enum Direction {
  Up = 'UP',
  Down = 'DOWN',
}
// 컴파일 후 JavaScript 객체가 생성됨

// 2. const enum: 컴파일 시 인라인으로 치환 (번들 크기 감소)
const enum Status {
  Active = 'ACTIVE',
  Inactive = 'INACTIVE',
}
const s = Status.Active; // 컴파일 후: const s = "ACTIVE"

// 3. as const: 리터럴 타입으로 추론
const COLORS = {
  Red: '#ff0000',
  Blue: '#0000ff',
} as const;

type Color = typeof COLORS[keyof typeof COLORS];
// '#ff0000' | '#0000ff'

Question 6

조건부 타입(Conditional Type)이란 무엇인가요?

Accepted Answer

조건부 타입은 타입 수준의 삼항 연산자로, 입력 타입에 따라 다른 타입을 반환합니다. ```typescript // 기본 문법: T extends U ? X : Y type IsString = T extends string ? true : false; type A = IsString; // true type B = IsString; // false // 실용적 예시: API 응답 타입 type ApiResult = T extends 'user' ? { id: number; name: string } : T extends 'post' ? { id: number; title: string } : never; type UserResult = ApiResult<'user'>; // { id: number; name: string } // infer 키워드로 타입 추출 type UnwrapPromise = T extend

Question 7

satisfies 연산자란 무엇이며 어떻게 활용하나요?

Accepted Answer

`satisfies`는 TypeScript 4.9에서 도입된 연산자로, 타입 호환성을 검증하면서도 **추론된 타입을 유지**합니다.

**as vs satisfies:**
```ts
type Colors = Record<string, string | number[]>;

// as → 넓은 타입으로 단언 (구체적 타입 정보 손실)
const colorsAs = {
  red: '#ff0000',
  blue: [0, 0, 255],
} as Colors;
colorsAs.red.toUpperCase(); // ❌ 에러 — string | number[]로 추론

// satisfies → 검증하면서 구체적 타입 유지
const colorsSat = {
  red: '#ff0000',
  blue: [0, 0, 255],
} satisfies Colors;
colorsSat.red.toUpperCase(); // ✅ string으로 추론됨
colorsSat.blue.map(n => n

Question 8

Discriminated Union(판별 유니온) 패턴을 설명하고 실무 예시를 들어주세요.

Accepted Answer

공통 리터럴 속성(판별자)으로 유니온의 각 케이스를 구분하는 패턴입니다. ```typescript // API 응답 타입 type ApiResult = | { status: 'success'; data: T } | { status: 'error'; error: string; code: number } | { status: 'loading' }; function handleResult(result: ApiResult) { switch (result.status) { case 'success': console.log(result.data); // data 타입 자동 추론 break; case 'error': console.log(result.error, result.code); // error, code 접근 가능 break; case 'loading': showSpinner()

Question 9

Mapped Types와 Key Remapping을 설명해주세요.

Accepted Answer

Mapped Types는 기존 타입의 각 속성을 변환하여 새 타입을 생성합니다. ```typescript // 기본 Mapped Type type Readonly = { readonly [K in keyof T]: T[K] }; type Optional = { [K in keyof T]?: T[K] }; // Key Remapping (as 절) type Getters = { [K in keyof T as `get${Capitalize}`]: () => T[K]; }; interface User { name: string; age: number; } type UserGetters = Getters; // { getName: () => string; getAge: () => number; } // 특정 키 필터링 type OnlyStrings = { [K in keyof T as T[K] extends string ?

Question 10

템플릿 리터럴 타입(Template Literal Type)을 설명해주세요.

Accepted Answer

템플릿 리터럴 타입은 문자열 리터럴 타입을 조합하여 새로운 문자열 타입을 생성합니다. **기본 문법:** ```ts type EventName = 'click' | 'focus'; type Handler = `on${Capitalize}`; // 결과: 'onClick' | 'onFocus' ``` **내장 문자열 조작 타입:** - `Uppercase`: 대문자 변환 - `Lowercase`: 소문자 변환 - `Capitalize`: 첫 글자 대문자 - `Uncapitalize`: 첫 글자 소문자 **실전 활용 — CSS 단위:** ```ts type CSSUnit = 'px' | 'rem' | 'em' | '%'; type CSSValue = `${number}${CSSUnit}`; const width: CSSValue = '100px'; // ✅ const bad: CSSValue = '100vw'; // ❌ 컴파일 에러 ``

TypeScript

01type과 interface의 차이점은 무엇인가요?쉬움기초

02제네릭(Generic)이란 무엇이며 어떻게 사용하나요?보통제네릭

03TypeScript 유틸리티 타입(Partial, Pick, Omit 등)을 설명해주세요.보통유틸리티 타입

04타입 가드(Type Guard)와 타입 좁히기(Narrowing)를 설명해주세요.어려움타입 가드

05enum과 const enum, 그리고 as const의 차이점은?쉬움기초

06조건부 타입(Conditional Type)이란 무엇인가요?보통고급

07satisfies 연산자란 무엇이며 어떻게 활용하나요?보통고급

08Discriminated Union(판별 유니온) 패턴을 설명하고 실무 예시를 들어주세요.어려움고급

09Mapped Types와 Key Remapping을 설명해주세요.어려움고급

10템플릿 리터럴 타입(Template Literal Type)을 설명해주세요.보통고급