TypeScript는 JavaScript에 정적 타입을 추가한 언어로, 대규모 애플리케이션 개발에서 필수적인 도구가 되었다. 이 글은 TypeScript의 기본 개념부터 고급 패턴까지 실전 예제와 함께 완벽하게 정리한다.
\n// 원시 타입\nlet name: string = \"TypeScript\";\nlet age: number = 10;\nlet isActive: boolean = true;\nlet data: null = null;\nlet value: undefined = undefined;\n\n// 배열\nlet numbers: number[] = [1, 2, 3];\nlet names: Array<string> = [\"Alice\", \"Bob\"];\n\n// 튜플\nlet tuple: [string, number] = [\"hello\", 42];\n\n// 열거형\nenum Color {\n Red = \"RED\",\n Green = \"GREEN\",\n Blue = \"BLUE\"\n}\n\n// any와 unknown\nlet anyValue: any = \"anything\";\nlet unknownValue: unknown = \"unknown\";\n\n// void와 never\nfunction noReturn(): void {\n console.log(\"no return\");\n}\n\nfunction neverReturns(): never {\n throw new Error(\"never returns\");\n}// 타입 추론\nlet inferredString = \"hello\"; // string으로 추론\nlet inferredNumber = 42; // number로 추론\n\n// 명시적 타입 지정\nlet explicitString: string = \"hello\";\n\n// 함수 반환 타입 추론\nfunction add(a: number, b: number) {\n return a + b; // 반환 타입: number\n}\n\n// 명시적 반환 타입\nfunction multiply(a: number, b: number): number {\n return a * b;\n}// 유니온 타입 (또는)\ntype StringOrNumber = string | number;\n\nfunction processValue(value: StringOrNumber) {\n if (typeof value === \"string\") {\n return value.toUpperCase();\n } else {\n return value.toFixed(2);\n }\n}\n\n// 인터섹션 타입 (그리고)\ninterface Person {\n name: string;\n age: number;\n}\n\ninterface Employee {\n employeeId: string;\n department: string;\n}\n\ntype EmployeePerson = Person & Employee;\n\nconst employee: EmployeePerson = {\n name: \"Alice\",\n age: 30,\n employeeId: \"E001\",\n department: \"Engineering\"\n};// 기본 인터페이스\ninterface User {\n id: number;\n name: string;\n email: string;\n age?: number; // 선택적 속성\n readonly createdAt: Date; // 읽기 전용\n}\n\n// 인터페이스 확장\ninterface Admin extends User {\n role: \"admin\";\n permissions: string[];\n}\n\n// 함수 타입 인터페이스\ninterface Calculator {\n (x: number, y: number): number;\n}\n\nconst add: Calculator = (x, y) => x + y;\n\n// 인덱스 시그니처\ninterface Dictionary {\n [key: string]: number;\n}\n\nconst scores: Dictionary = {\n math: 95,\n science: 88\n};// 타입 별칭\ntype ID = string | number;\ntype Status = \"pending\" | \"approved\" | \"rejected\";\n\n// 함수 타입 별칭\ntype EventHandler = (event: Event) => void;\n\n// 제네릭 타입 별칭\ntype Container<T> = {\n value: T;\n timestamp: Date;\n};\n\n// 유니온과 인터섹션\ntype StringOrNumber = string | number;\ntype PersonAndEmployee = Person & Employee;// 인터페이스는 확장 가능\ninterface Base {\n id: number;\n}\n\ninterface Extended extends Base {\n name: string;\n}\n\n// 타입 별칭은 유니온/인터섹션에 유리\ntype Status = \"active\" | \"inactive\";\ntype ID = string | number;\n\n// 인터페이스는 선언 병합 가능\ninterface Config {\n apiUrl: string;\n}\n\ninterface Config {\n timeout: number;\n}\n\n// 최종 Config는 두 속성 모두 포함// 제네릭 함수\nfunction identity<T>(arg: T): T {\n return arg;\n}\n\nconst stringValue = identity<string>(\"hello\");\nconst numberValue = identity<number>(42);\n\n// 제네릭 인터페이스\ninterface Box<T> {\n value: T;\n getValue(): T;\n}\n\nconst stringBox: Box<string> = {\n value: \"hello\",\n getValue() {\n return this.value;\n }\n};\n\n// 제네릭 클래스\nclass Container<T> {\n private items: T[] = [];\n\n add(item: T): void {\n this.items.push(item);\n }\n\n get(index: number): T {\n return this.items[index];\n }\n}\n\nconst numberContainer = new Container<number>();\nnumberContainer.add(1);\nnumberContainer.add(2);// extends로 제약\ninterface HasLength {\n length: number;\n}\n\nfunction logLength<T extends HasLength>(arg: T): T {\n console.log(arg.length);\n return arg;\n}\n\nlogLength(\"hello\"); // OK\nlogLength([1, 2, 3]); // OK\n// logLength(42); // Error: number는 length 속성이 없음\n\n// keyof 제약\nfunction getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {\n return obj[key];\n}\n\nconst person = { name: \"Alice\", age: 30 };\nconst name = getProperty(person, \"name\"); // OK\n// const invalid = getProperty(person, \"invalid\"); // Error// 제네릭 함수 오버로드\nfunction process<T extends string>(value: T): string;\nfunction process<T extends number>(value: T): number;\nfunction process<T>(value: T): T {\n return value;\n}\n\n// 조건부 제네릭\ntype IsArray<T> = T extends any[] ? true : false;\ntype Test1 = IsArray<string[]>; // true\ntype Test2 = IsArray<string>; // false\n\n// 제네릭 기본값\ninterface ApiResponse<T = any> {\n data: T;\n status: number;\n}\n\nconst response1: ApiResponse = { data: \"hello\", status: 200 };\nconst response2: ApiResponse<User> = { data: user, status: 200 };// 기본 조건부 타입\ntype IsString<T> = T extends string ? true : false;\n\ntype Test1 = IsString<string>; // true\ntype Test2 = IsString<number>; // false\n\n// 분배 조건부 타입\ntype ToArray<T> = T extends any ? T[] : never;\ntype StringArray = ToArray<string | number>; // string[] | number[]\n\n// Exclude와 Extract 구현\ntype MyExclude<T, U> = T extends U ? never : T;\ntype MyExtract<T, U> = T extends U ? T : never;\n\ntype Result1 = MyExclude<\"a\" | \"b\" | \"c\", \"a\">; // \"b\" | \"c\"\ntype Result2 = MyExtract<\"a\" | \"b\" | \"c\", \"a\">; // \"a\"\n\n// infer 키워드\ntype ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;\n\ntype FuncReturn = ReturnType<() => string>; // string// 기본 매핑된 타입\ntype Readonly<T> = {\n readonly [P in keyof T]: T[P];\n};\n\ntype Partial<T> = {\n [P in keyof T]?: T[P];\n};\n\ntype Required<T> = {\n [P in keyof T]-?: T[P];\n};\n\n// 사용 예시\ninterface User {\n id: number;\n name: string;\n email?: string;\n}\n\ntype ReadonlyUser = Readonly<User>;\ntype PartialUser = Partial<User>;\ntype RequiredUser = Required<User>;\n\n// 커스텀 매핑된 타입\ntype Nullable<T> = {\n [P in keyof T]: T[P] | null;\n};\n\ntype Stringify<T> = {\n [P in keyof T]: string;\n};// 기본 템플릿 리터럴 타입\ntype EventName = `on${string}`;\ntype ClickEvent = `onClick`;\ntype HoverEvent = `onHover`;\n\n// 고급 템플릿 리터럴 타입\ntype HttpMethod = \"GET\" | \"POST\" | \"PUT\" | \"DELETE\";\ntype ApiEndpoint = `/api/${string}`;\ntype FullEndpoint = `${HttpMethod} ${ApiEndpoint}`;\n\ntype GetUsers = \"GET /api/users\"; // OK\n// type Invalid = \"PATCH /api/users\"; // Error\n\n// 유니온과 조합\ntype Color = \"red\" | \"green\" | \"blue\";\ntype Size = \"small\" | \"medium\" | \"large\";\ntype ButtonClass = `btn-${Color}-${Size}`;\n// \"btn-red-small\" | \"btn-red-medium\" | \"btn-red-large\" | ...interface User {\n id: number;\n name: string;\n email: string;\n age: number;\n createdAt: Date;\n}\n\n// Pick: 특정 속성만 선택\ntype UserPreview = Pick<User, \"id\" | \"name\" | \"email\">;\n\n// Omit: 특정 속성 제외\ntype UserWithoutDates = Omit<User, \"createdAt\">;\n\n// Partial: 모든 속성을 선택적으로\ntype PartialUser = Partial<User>;\n\n// Required: 모든 속성을 필수로\ntype RequiredUser = Required<PartialUser>;\n\n// Readonly: 모든 속성을 읽기 전용으로\ntype ReadonlyUser = Readonly<User>;\n\n// Record: 키-값 타입 매핑\ntype UserRoles = Record<string, \"admin\" | \"user\" | \"guest\">;// Exclude: 유니온에서 특정 타입 제외\ntype NonNullable<T> = T extends null | undefined ? never : T;\ntype StringOrNumber = string | number | null;\ntype ValidValue = NonNullable<StringOrNumber>; // string | number\n\n// Extract: 유니온에서 특정 타입만 추출\ntype StringOnly = Extract<string | number | boolean, string>; // string\n\n// Parameters: 함수의 매개변수 타입 추출\ntype FuncParams = Parameters<(a: number, b: string) => void>; // [number, string]\n\n// ReturnType: 함수의 반환 타입 추출\ntype FuncReturn = ReturnType<() => string>; // string\n\n// ConstructorParameters: 생성자의 매개변수 타입\nclass User {\n constructor(public id: number, public name: string) {}\n}\ntype UserParams = ConstructorParameters<typeof User>; // [number, string]\n\n// InstanceType: 인스턴스 타입\ntype UserInstance = InstanceType<typeof User>; // User// 깊은 읽기 전용\ntype DeepReadonly<T> = {\n readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P];\n};\n\n// 깊은 Partial\ntype DeepPartial<T> = {\n [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];\n};\n\n// 함수 타입에서 특정 매개변수 제거\ntype OmitFirstArg<F> = F extends (first: any, ...rest: infer R) => infer Return\n ? (...args: R) => Return\n : never;\n\ntype Original = (a: number, b: string, c: boolean) => void;\ntype WithoutFirst = OmitFirstArg<Original>; // (b: string, c: boolean) => void// typeof 타입 가드\nfunction isString(value: unknown): value is string {\n return typeof value === \"string\";\n}\n\nfunction process(value: unknown) {\n if (isString(value)) {\n // 여기서 value는 string 타입\n console.log(value.toUpperCase());\n }\n}\n\n// instanceof 타입 가드\nclass Dog {\n bark() {\n console.log(\"Woof!\");\n }\n}\n\nclass Cat {\n meow() {\n console.log(\"Meow!\");\n }\n}\n\nfunction makeSound(animal: Dog | Cat) {\n if (animal instanceof Dog) {\n animal.bark();\n } else {\n animal.meow();\n }\n}\n\n// in 연산자 타입 가드\ninterface Bird {\n fly(): void;\n}\n\ninterface Fish {\n swim(): void;\n}\n\nfunction move(animal: Bird | Fish) {\n if (\"fly\" in animal) {\n animal.fly();\n } else {\n animal.swim();\n }\n}interface User {\n id: number;\n name: string;\n email: string;\n}\n\ninterface Admin {\n id: number;\n name: string;\n role: \"admin\";\n permissions: string[];\n}\n\nfunction isAdmin(user: User | Admin): user is Admin {\n return \"role\" in user && user.role === \"admin\";\n}\n\nfunction processUser(user: User | Admin) {\n if (isAdmin(user)) {\n // 여기서 user는 Admin 타입\n console.log(user.permissions);\n } else {\n // 여기서 user는 User 타입\n console.log(user.email);\n }\n}// as 단언\nconst value = document.getElementById(\"myInput\") as HTMLInputElement;\nvalue.value = \"hello\";\n\n// angle bracket 단언 (JSX에서는 사용 불가)\nconst element = <HTMLInputElement>document.getElementById(\"myInput\");\n\n// non-null 단언\nfunction getElement(id: string) {\n return document.getElementById(id)!; // null이 아님을 단언\n}\n\n// 타입 단언 vs 타입 가드\n// 타입 단언: 개발자가 보장 (런타임 체크 없음)\nconst user = data as User;\n\n// 타입 가드: 런타임 체크\nif (isUser(data)) {\n // data는 User 타입\n}// math.ts\nexport function add(a: number, b: number): number {\n return a + b;\n}\n\nexport function subtract(a: number, b: number): number {\n return a - b;\n}\n\nexport const PI = 3.14159;\n\n// default export\nexport default class Calculator {\n add(a: number, b: number): number {\n return a + b;\n }\n}\n\n// app.ts\nimport Calculator, { add, subtract, PI } from \"./math\";\nimport * as MathUtils from \"./math\";\n\nconst calc = new Calculator();\nconst sum = add(1, 2);\nconst diff = subtract(5, 3);\nconst area = PI * 10 * 10;// utils.ts\nnamespace MathUtils {\n export function add(a: number, b: number): number {\n return a + b;\n }\n\n export function subtract(a: number, b: number): number {\n return a - b;\n }\n\n export namespace Geometry {\n export function area(radius: number): number {\n return Math.PI * radius * radius;\n }\n }\n}\n\n// 사용\nMathUtils.add(1, 2);\nMathUtils.Geometry.area(10);// types.d.ts\ndeclare module \"my-module\" {\n export function doSomething(): void;\n export const value: number;\n}\n\n// 전역 타입 선언\ndeclare global {\n interface Window {\n myCustomProperty: string;\n }\n}\n\n// 외부 라이브러리 타입 확장\ndeclare module \"express\" {\n interface Request {\n user?: User;\n }\n}function sealed(constructor: Function) {\n Object.seal(constructor);\n Object.seal(constructor.prototype);\n}\n\n@sealed\nclass Greeter {\n greeting: string;\n constructor(message: string) {\n this.greeting = message;\n }\n greet() {\n return \"Hello, \" + this.greeting;\n }\n}\n\n// 메서드 데코레이터\nfunction log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {\n const originalMethod = descriptor.value;\n\n descriptor.value = function (...args: any[]) {\n console.log(`Calling ${propertyKey} with`, args);\n const result = originalMethod.apply(this, args);\n console.log(`${propertyKey} returned`, result);\n return result;\n };\n\n return descriptor;\n}\n\nclass Calculator {\n @log\n add(a: number, b: number): number {\n return a + b;\n }\n}function readonly(target: any, propertyKey: string) {\n Object.defineProperty(target, propertyKey, {\n writable: false\n });\n}\n\nclass User {\n @readonly\n id: number = 1;\n name: string = \"Alice\";\n}\n\n// 매개변수 데코레이터\nfunction validate(target: any, propertyKey: string, parameterIndex: number) {\n // 검증 로직\n}\n\nclass ApiService {\n getUser(@validate id: number) {\n // ...\n }\n}class QueryBuilder<T> {\n private conditions: string[] = [];\n private limitValue?: number;\n private offsetValue?: number;\n\n where(condition: string): this {\n this.conditions.push(condition);\n return this;\n }\n\n limit(count: number): this {\n this.limitValue = count;\n return this;\n }\n\n offset(count: number): this {\n this.offsetValue = count;\n return this;\n }\n\n build(): string {\n let query = \"SELECT * FROM table\";\n if (this.conditions.length > 0) {\n query += \" WHERE \" + this.conditions.join(\" AND \");\n }\n if (this.limitValue) {\n query += ` LIMIT ${this.limitValue}`;\n }\n if (this.offsetValue) {\n query += ` OFFSET ${this.offsetValue}`;\n }\n return query;\n }\n}\n\nconst query = new QueryBuilder()\n .where(\"age > 18\")\n .where(\"status = 'active'\")\n .limit(10)\n .offset(0)\n .build();interface Animal {\n makeSound(): void;\n}\n\nclass Dog implements Animal {\n makeSound() {\n console.log(\"Woof!\");\n }\n}\n\nclass Cat implements Animal {\n makeSound() {\n console.log(\"Meow!\");\n }\n}\n\ntype AnimalType = \"dog\" | \"cat\";\n\nclass AnimalFactory {\n static create(type: AnimalType): Animal {\n switch (type) {\n case \"dog\":\n return new Dog();\n case \"cat\":\n return new Cat();\n default:\n throw new Error(`Unknown animal type: ${type}`);\n }\n }\n}\n\nconst dog = AnimalFactory.create(\"dog\");\ndog.makeSound();class Database {\n private static instance: Database;\n\n private constructor() {\n // private 생성자로 외부 인스턴스화 방지\n }\n\n static getInstance(): Database {\n if (!Database.instance) {\n Database.instance = new Database();\n }\n return Database.instance;\n }\n\n query(sql: string): any {\n // 데이터베이스 쿼리 로직\n return {};\n }\n}\n\nconst db1 = Database.getInstance();\nconst db2 = Database.getInstance();\nconsole.log(db1 === db2); // true// ❌ 나쁜 예: any 사용\nfunction processData(data: any) {\n return data.value;\n}\n\n// ✅ 좋은 예: 구체적인 타입 사용\ninterface Data {\n value: string;\n timestamp: Date;\n}\n\nfunction processData(data: Data): string {\n return data.value;\n}// ❌ 나쁜 예: 타입 단언 남용\nfunction getValue(data: unknown): string {\n return (data as { value: string }).value;\n}\n\n// ✅ 좋은 예: 타입 가드 사용\nfunction isDataWithValue(data: unknown): data is { value: string } {\n return (\n typeof data === \"object\" &&\n data !== null &&\n \"value\" in data &&\n typeof (data as any).value === \"string\"\n );\n}\n\nfunction getValue(data: unknown): string {\n if (isDataWithValue(data)) {\n return data.value;\n }\n throw new Error(\"Invalid data\");\n}// ❌ 나쁜 예: 타입이 구체적이지 않음\nfunction getFirst(arr: any[]): any {\n return arr[0];\n}\n\n// ✅ 좋은 예: 제네릭 사용\nfunction getFirst<T>(arr: T[]): T | undefined {\n return arr[0];\n}\n\nconst firstNumber = getFirst([1, 2, 3]); // number | undefined\nconst firstString = getFirst([\"a\", \"b\", \"c\"]); // string | undefinedTypeScript는 JavaScript 개발을 더 안전하고 유지보수하기 쉽게 만들어주는 강력한 도구다. 이 글에서 다룬 내용:
\n이러한 기능들을 적절히 활용하면 타입 안전하고 확장 가능한 애플리케이션을 구축할 수 있다.
\nTypeScript 완전정복 - 타입 시스템부터 고급 패턴까지
\n