Question 1

제네릭(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 2

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 3

조건부 타입(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 4

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 5

템플릿 리터럴 타입(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'; // ❌ 컴파일 에러 ``

Question 6

infer 키워드의 동작 원리와 실무 활용법을 설명해주세요.

Accepted Answer

infer는 조건부 타입 내에서 타입을 추론하여 변수에 담는 키워드입니다. ```typescript // 함수 반환 타입 추출 type ReturnType = T extends (...args: any[]) => infer R ? R : never; // Promise 내부 타입 추출 type UnpackPromise = T extends Promise ? U : T; type A = UnpackPromise>; // string // 배열 요소 타입 추출 type ElementType = T extends (infer E)[] ? E : never; type B = ElementType; // number // 첫 번째 인자 타입 추출 type FirstArg = T extends (first: infer F, ...rest: any[]) => any ? F : never; // React

Question 7

TypeScript의 공변성과 반공변성이란 무엇인가요?

Accepted Answer

타입 호환성에서 서브타입 관계가 어떻게 전파되는지를 설명하는 개념입니다.

**공변성(Covariance):** 서브타입 관계가 그대로 유지
```typescript
interface Animal { name: string; }
interface Dog extends Animal { breed: string; }

// 배열은 공변적: Dog[] → Animal[] 할당 가능
const dogs: Dog[] = [{ name: 'Rex', breed: 'Husky' }];
const animals: Animal[] = dogs; // OK

// 함수 반환 타입도 공변적
type GetAnimal = () => Animal;
type GetDog = () => Dog;
const getDog: GetDog = () => ({ name: 'Rex', breed: 'Husky' });
const getAnimal: GetAnimal = getDog; // OK
```

**반공변성(Co

TypeScript

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

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

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

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

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

06infer 키워드의 동작 원리와 실무 활용법을 설명해주세요.보통고급

07TypeScript의 공변성과 반공변성이란 무엇인가요?보통실무