타입스크립트에서 타입을 확장하는 방법은 무엇인가요?
_____A1. 기존 타입에 새로운 속성이나 제약을 추가해 더 구체화하거나 재사용성을 높이는 것을 말합니다. 인터페이스 상속, 타입 교차(intersection), 유틸리티 타입 활용, 제네릭 제약, 모듈 증강 등 다양한 방법이 있습니다.
Q2. 인터페이스 상속(extends)을 이용한 확장 방법은?
A2. interface A를 선언한 뒤 interface B extends A { … } 형태로 상속합니다.
예시)
```ts
interface Person { name: string; age: number; }
interface Employee extends Person { employeeId: string; }
const e: Employee = { name: "홍길동", age: 30, employeeId: "E001" };
```
Q3. 타입 별칭(type alias)에서 인터섹션(&)을 이용한 확장 방법은?
A3. `type B = A & { 추가속성: 타입 }` 형태로 기존 타입과 교차하여 새 타입을 만듭니다.
```ts
type Person = { name: string; };
type Worker = Person & { company: string; };
const w: Worker = { name: "철수", company: "ACME" };
```
Q4. 제네릭(Generic)에서 extends를 사용해 타입 제약을 거는 방법은?
A4. 제네릭 타입 매개변수 T가 특정 구조를 만족하도록 제한합니다.
```ts
function logName
console.log(obj.name);
}
logName({ name: "영희", age: 25 }); // OK
logName({ age: 25 }); // Error
```
Q5. 유틸리티 타입(Utility Types)으로 타입을 확장·변형하는 방법은?
A5. TS가 제공하는 제네릭 타입을 조합해 부분적(Optional), 제외(Omit), 선택(Pick) 등을 할 수 있습니다.
- Partial
- Required
- Pick
- Omit
- Record
```ts
interface User { id: string; name: string; age?: number; }
type UserPreview = Pick
type FullUser = Required
type WithoutAge = Omit
type UserMap = Record<"admin" | "guest", User>;
```
Q6. 조건부 타입(Conditional Types)에서 extends는 어떻게 쓰이나요?
A6. `T extends U ? X : Y` 형태로 T가 U를 만족하면 X, 아니면 Y 타입을 반환합니다.
```ts
type IsString
type A = IsString
type B = IsString
```
Q7. mapped 타입(Mapped Types)으로 확장하거나 변형하기
A7. `type T2 = { [K in keyof T]: … }` 구문을 통해 기존 타입 T의 키를 변형하거나 모두 순회하며 새로운 타입을 만듭니다.
```ts
type Nullable
type NullableUser = Nullable
```
Q8. 클래스 상속(extends)으로 타입·구현을 확장하는 방법은?
A8. `class B extends A { … }` 로 A의 멤버를 상속하고 추가 정의하거나 오버라이드합니다.
```ts
class Animal { constructor(public name: string) {} }
class Dog extends Animal { bark() { console.log("멍멍"); } }
const d = new Dog("뽀삐"); d.bark();
```
Q9. 모듈 증강(Module Augmentation)으로 외부 타입 확장하기
A9. 선언된 모듈에 새로운 인터페이스나 멤버를 추가할 때 `declare module "모듈명" { … }`를 사용합니다.
```ts
// my-module.ts
export interface Config { url: string; }
// augmentation.d.ts
import "my-module";
declare module "my-module" {
interface Config { timeout: number; }
}
// 사용 시 Config는 { url: string; timeout: number }
```
Q10. 인터페이스 병합(Declaration Merging) 활용법
A10. 같은 이름의 인터페이스를 여러 번 선언하면 자동으로 합쳐집니다.
```ts
interface Window { title: string; }
interface Window { width: number; }
// Window는 { title: string; width: number }
```
Q11. 기존 타입에서 필드를 제거하려면?
A11. Omit
```ts
type WithoutAge = Omit
// 혹은
type WithoutAge2 = Pick
```
Q12. 확장 시 주의점이나 팁
A12.
- 인터페이스 상속과 타입 교차는 유사하지만, 인터페이스는 선언 병합이 가능하므로 라이브러리 선언에 자주 쓰이고, 타입 별칭은 간단한 조합에 유리합니다.
- 너무 깊게 중첩된 제네릭/조건부 타입은 가독성과 컴파일 성능을 저하시킬 수 있으니 적절히 분리하세요.
- `as const`와 결합해 리터럴 타입 확장도 유용합니다.
타입스크립트에서 타입을 확장하는 방법은 여러 가지가 있으며, 이는 객체지향 프로그래밍의 상속 개념과 유사합니다.
여기서는 타입 확장의 다양한 방법을 자세히 설명하겠습니다.
1. 인터페이스 확장 인터페이스는 타입스크립트에서 객체의 구조를 정의하는 데 사용됩니다.
인터페이스를 확장하면 기존 인터페이스의 속성을 포함하면서 새로운 속성을 추가할 수 있습니다.
```typescript interface Person { name: string; age: number; } interface Employee extends Person { employeeId: number; } const employee: Employee = { name: "John Doe", age: 30, employeeId: 12345 }; ``` 위의 예제에서 `Employee` 인터페이스는 `Person` 인터페이스를 확장하여 `employeeId` 속성을 추가했습니다.
2. 클래스 확장 타입스크립트에서는 클래스도 확장할 수 있습니다.
클래스는 다른 클래스를 상속받아 기존 클래스의 속성과 메서드를 재사용할 수 있습니다.
```typescript class Person { constructor(public name: string, public age: number) {} } class Employee extends Person { constructor(name: string, age: number, public employeeId: number) { super(name, age); } } const employee = new Employee("Jane Doe", 28, 67890); ``` 여기서 `Employee` 클래스는 `Person` 클래스를 확장하여 `name`과 `age` 속성을 상속받고, 추가적으로 `employeeId` 속성을 정의합니다.
3. 타입 별칭 확장 타입 별칭(type alias)도 확장할 수 있습니다.
그러나 타입 별칭은 인터페이스와 달리 직접적으로 확장할 수는 없지만, 교차 타입을 사용하여 유사한 효과를 얻을 수 있습니다.
```typescript type Person = { name: string; age: number; }; type Employee = Person & { employeeId: number; }; const employee: Employee = { name: "Alice", age: 25, employeeId: 54321 }; ``` 위의 예제에서 `Employee` 타입은 `Person` 타입과 `employeeId` 속성을 교차하여 새로운 타입을 생성합니다.
4. 제네릭을 통한 확장 타입스크립트의 제네릭을 사용하면 타입을 동적으로 확장할 수 있습니다.
제네릭을 사용하면 다양한 타입에 대해 재사용 가능한 컴포넌트를 만들 수 있습니다.
```typescript interface Person { name: string; age: number; } function createEmployee
5); ``` 여기서 `createEmployee` 함수는 `Person`을 확장하는 제네릭 타입 `T`를 사용하여 다양한 형태의 객체를 생성할 수 있습니다.
5. 믹스인 패턴 타입스크립트에서는 믹스인(mixin) 패턴을 사용하여 여러 클래스의 기능을 조합할 수 있습니다.
믹스인은 여러 클래스의 속성과 메서드를 결합하여 새로운 클래스를 생성하는 방법입니다.
```typescript function EmployeeMixin
결론 타입스크립트에서 타입을 확장하는 방법은 다양하며, 이를 통해 코드의 재사용성과 가독성을 높일 수 있습니다.
인터페이스, 클래스, 타입 별칭, 제네릭, 믹스인 패턴 등 여러 방법을 적절히 활용하여 필요한 타입 구조를 설계할 수 있습니다.
이러한 기능을 통해 타입스크립트는 더욱 강력하고 유연한 타입 시스템을 제공합니다.
작성자:
박예은 [비회원]
| 작성일자: 1년 전
2024-09-10 05:32:13
조회수: 262 | 댓글: 0 | 좋아요: 0 | 싫어요: 0
조회수: 262 | 댓글: 0 | 좋아요: 0 | 싫어요: 0
내용이 부정확하다면 싫어요를 클릭해주세요.