interfaces.ts - Examples

  1/**
  2 * TypeScript 인터페이스와 제네릭
  3 * - 인터페이스
  4 * - 클래스와 타입
  5 * - 제네릭
  6 * - 유틸리티 타입
  7 */
  8
  9// ============================================
 10// 1. 인터페이스 기초
 11// ============================================
 12
 13interface User {
 14    id: number;
 15    name: string;
 16    email: string;
 17    age?: number;  // 선택적 속성
 18    readonly createdAt: Date;  // 읽기 전용
 19}
 20
 21const user1: User = {
 22    id: 1,
 23    name: "홍길동",
 24    email: "hong@example.com",
 25    createdAt: new Date()
 26};
 27
 28// user1.createdAt = new Date();  // 에러: readonly
 29
 30console.log("=== 인터페이스 기초 ===");
 31console.log(`사용자: ${user1.name} (${user1.email})`);
 32
 33// ============================================
 34// 2. 인터페이스 확장
 35// ============================================
 36
 37interface Person {
 38    name: string;
 39    age: number;
 40}
 41
 42interface Employee extends Person {
 43    employeeId: string;
 44    department: string;
 45}
 46
 47interface Manager extends Employee {
 48    teamSize: number;
 49    reports: Employee[];
 50}
 51
 52const manager: Manager = {
 53    name: "김부장",
 54    age: 45,
 55    employeeId: "E001",
 56    department: "개발팀",
 57    teamSize: 5,
 58    reports: []
 59};
 60
 61console.log("\n=== 인터페이스 확장 ===");
 62console.log(`매니저: ${manager.name}, ${manager.department}, 팀원 ${manager.teamSize}명`);
 63
 64// ============================================
 65// 3. 인터페이스 병합
 66// ============================================
 67
 68interface Config {
 69    apiUrl: string;
 70}
 71
 72interface Config {
 73    timeout: number;
 74}
 75
 76// 두 선언이 자동으로 병합됨
 77const config: Config = {
 78    apiUrl: "https://api.example.com",
 79    timeout: 5000
 80};
 81
 82console.log("\n=== 인터페이스 병합 ===");
 83console.log(`Config: ${config.apiUrl}, timeout: ${config.timeout}ms`);
 84
 85// ============================================
 86// 4. 함수 인터페이스
 87// ============================================
 88
 89interface MathFunc {
 90    (x: number, y: number): number;
 91}
 92
 93interface Calculator {
 94    add: MathFunc;
 95    subtract: MathFunc;
 96    multiply: MathFunc;
 97    divide: MathFunc;
 98}
 99
100const calculator: Calculator = {
101    add: (x, y) => x + y,
102    subtract: (x, y) => x - y,
103    multiply: (x, y) => x * y,
104    divide: (x, y) => x / y
105};
106
107console.log("\n=== 함수 인터페이스 ===");
108console.log(`10 + 5 = ${calculator.add(10, 5)}`);
109console.log(`10 - 5 = ${calculator.subtract(10, 5)}`);
110
111// ============================================
112// 5. 인덱스 시그니처
113// ============================================
114
115interface StringDictionary {
116    [key: string]: string;
117}
118
119interface NumberArray {
120    [index: number]: string;
121}
122
123const translations: StringDictionary = {
124    hello: "안녕하세요",
125    goodbye: "안녕히 가세요",
126    thanks: "감사합니다"
127};
128
129const colors: NumberArray = ["red", "green", "blue"];
130
131console.log("\n=== 인덱스 시그니처 ===");
132console.log(`hello = ${translations["hello"]}`);
133console.log(`colors[0] = ${colors[0]}`);
134
135// ============================================
136// 6. 클래스와 인터페이스
137// ============================================
138
139interface Animal {
140    name: string;
141    makeSound(): void;
142}
143
144interface Movable {
145    move(distance: number): void;
146}
147
148class Dog implements Animal, Movable {
149    constructor(public name: string) {}
150
151    makeSound(): void {
152        console.log(`${this.name}: 멍멍!`);
153    }
154
155    move(distance: number): void {
156        console.log(`${this.name}이(가) ${distance}m 이동했습니다.`);
157    }
158}
159
160console.log("\n=== 클래스와 인터페이스 ===");
161const dog = new Dog("바둑이");
162dog.makeSound();
163dog.move(10);
164
165// ============================================
166// 7. 제네릭 기초
167// ============================================
168
169// 제네릭 함수
170function identity<T>(arg: T): T {
171    return arg;
172}
173
174// 제네릭 배열 함수
175function firstElement<T>(arr: T[]): T | undefined {
176    return arr[0];
177}
178
179// 제네릭 객체 함수
180function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
181    return obj[key];
182}
183
184console.log("\n=== 제네릭 기초 ===");
185console.log(`identity("hello"): ${identity("hello")}`);
186console.log(`identity(42): ${identity(42)}`);
187console.log(`firstElement([1,2,3]): ${firstElement([1, 2, 3])}`);
188
189const person = { name: "홍길동", age: 25 };
190console.log(`getProperty: ${getProperty(person, "name")}`);
191
192// ============================================
193// 8. 제네릭 인터페이스
194// ============================================
195
196interface ApiResponse<T> {
197    data: T;
198    status: number;
199    message: string;
200}
201
202interface UserData {
203    id: number;
204    name: string;
205}
206
207interface ProductData {
208    id: number;
209    title: string;
210    price: number;
211}
212
213const userResponse: ApiResponse<UserData> = {
214    data: { id: 1, name: "홍길동" },
215    status: 200,
216    message: "Success"
217};
218
219const productResponse: ApiResponse<ProductData> = {
220    data: { id: 1, title: "노트북", price: 1000000 },
221    status: 200,
222    message: "Success"
223};
224
225console.log("\n=== 제네릭 인터페이스 ===");
226console.log(`User: ${userResponse.data.name}`);
227console.log(`Product: ${productResponse.data.title}`);
228
229// ============================================
230// 9. 제네릭 클래스
231// ============================================
232
233class Stack<T> {
234    private items: T[] = [];
235
236    push(item: T): void {
237        this.items.push(item);
238    }
239
240    pop(): T | undefined {
241        return this.items.pop();
242    }
243
244    peek(): T | undefined {
245        return this.items[this.items.length - 1];
246    }
247
248    isEmpty(): boolean {
249        return this.items.length === 0;
250    }
251
252    size(): number {
253        return this.items.length;
254    }
255}
256
257console.log("\n=== 제네릭 클래스 ===");
258const numberStack = new Stack<number>();
259numberStack.push(1);
260numberStack.push(2);
261numberStack.push(3);
262console.log(`Stack peek: ${numberStack.peek()}`);
263console.log(`Stack pop: ${numberStack.pop()}`);
264console.log(`Stack size: ${numberStack.size()}`);
265
266// ============================================
267// 10. 제네릭 제약 조건
268// ============================================
269
270interface HasLength {
271    length: number;
272}
273
274function logLength<T extends HasLength>(arg: T): number {
275    console.log(`길이: ${arg.length}`);
276    return arg.length;
277}
278
279console.log("\n=== 제네릭 제약 조건 ===");
280logLength("Hello");       // string은 length 있음
281logLength([1, 2, 3, 4]);  // array도 length 있음
282logLength({ length: 10 }); // 객체도 가능
283
284// ============================================
285// 11. 유틸리티 타입
286// ============================================
287
288interface Todo {
289    title: string;
290    description: string;
291    completed: boolean;
292    createdAt: Date;
293}
294
295// Partial<T>: 모든 속성을 선택적으로
296type PartialTodo = Partial<Todo>;
297
298// Required<T>: 모든 속성을 필수로
299type RequiredTodo = Required<Todo>;
300
301// Readonly<T>: 모든 속성을 읽기 전용으로
302type ReadonlyTodo = Readonly<Todo>;
303
304// Pick<T, K>: 특정 속성만 선택
305type TodoPreview = Pick<Todo, "title" | "completed">;
306
307// Omit<T, K>: 특정 속성 제외
308type TodoWithoutDate = Omit<Todo, "createdAt">;
309
310// Record<K, T>: 키-값 타입 정의
311type PageInfo = Record<"home" | "about" | "contact", { title: string }>;
312
313const pages: PageInfo = {
314    home: { title: "홈" },
315    about: { title: "소개" },
316    contact: { title: "연락처" }
317};
318
319console.log("\n=== 유틸리티 타입 ===");
320
321const partialTodo: PartialTodo = {
322    title: "일부만"
323};
324
325const todoPreview: TodoPreview = {
326    title: "미리보기",
327    completed: false
328};
329
330console.log(`PartialTodo: ${JSON.stringify(partialTodo)}`);
331console.log(`TodoPreview: ${JSON.stringify(todoPreview)}`);
332console.log(`Pages: ${Object.keys(pages).join(", ")}`);
333
334// ============================================
335// 12. 조건부 타입
336// ============================================
337
338type IsString<T> = T extends string ? "yes" : "no";
339
340type A = IsString<string>;   // "yes"
341type B = IsString<number>;   // "no"
342
343// infer 키워드
344type GetReturnType<T> = T extends (...args: any[]) => infer R ? R : never;
345
346type FuncReturn = GetReturnType<() => number>;  // number
347type AsyncReturn = GetReturnType<() => Promise<string>>;  // Promise<string>
348
349// Exclude, Extract
350type T1 = Exclude<"a" | "b" | "c", "a">;  // "b" | "c"
351type T2 = Extract<"a" | "b" | "c", "a" | "f">;  // "a"
352
353// NonNullable
354type T3 = NonNullable<string | null | undefined>;  // string
355
356console.log("\n=== 조건부 타입 ===");
357console.log("IsString<string> = 'yes'");
358console.log("IsString<number> = 'no'");
359console.log("Exclude<'a'|'b'|'c', 'a'> = 'b' | 'c'");
360
361// ============================================
362// 13. 매핑된 타입
363// ============================================
364
365type Nullable<T> = {
366    [P in keyof T]: T[P] | null;
367};
368
369type Optional<T> = {
370    [P in keyof T]?: T[P];
371};
372
373type Getters<T> = {
374    [P in keyof T as `get${Capitalize<string & P>}`]: () => T[P];
375};
376
377interface Point {
378    x: number;
379    y: number;
380}
381
382type NullablePoint = Nullable<Point>;  // { x: number | null; y: number | null }
383type PointGetters = Getters<Point>;    // { getX: () => number; getY: () => number }
384
385console.log("\n=== 매핑된 타입 ===");
386const nullablePoint: NullablePoint = { x: 10, y: null };
387console.log(`NullablePoint: x=${nullablePoint.x}, y=${nullablePoint.y}`);
388
389// ============================================
390// 14. 템플릿 리터럴 타입
391// ============================================
392
393type EventName = "click" | "scroll" | "mousemove";
394type Handler = `on${Capitalize<EventName>}`;  // "onClick" | "onScroll" | "onMousemove"
395
396type Greeting = `Hello, ${string}!`;
397
398const greeting: Greeting = "Hello, World!";
399
400console.log("\n=== 템플릿 리터럴 타입 ===");
401console.log(`Greeting: ${greeting}`);
402console.log("Handler 타입: 'onClick' | 'onScroll' | 'onMousemove'");
403
404// ============================================
405// 실행 예시
406// ============================================
407console.log("\n=== TypeScript 인터페이스/제네릭 완료 ===");
408console.log("컴파일: npx tsc interfaces.ts");
409console.log("실행: node interfaces.js");