2026년 상식닷컴 선정 식당 & 카페 리스트
최근에 오픈한 호텔을 찾는다면 살펴보세요

타입스크립트에서 타입을 확장하는 방법은 무엇인가요?

_____
Q1. “타입 확장”이란 무엇인가요?
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(obj: T): void {
console.log(obj.name);
}
logName({ name: "영희", age: 25 }); // OK
logName({ age: 25 }); // Error
```

Q5. 유틸리티 타입(Utility Types)으로 타입을 확장·변형하는 방법은?
A5. TS가 제공하는 제네릭 타입을 조합해 부분적(Optional), 제외(Omit), 선택(Pick) 등을 할 수 있습니다.
- Partial: 모든 속성을 옵셔널로
- Required: 모든 속성을 필수로
- Pick: T에서 K 프로퍼티만 선택
- Omit: T에서 K 프로퍼티만 제외
- Record: 키 K에 대해 값 타입 T를 가지는 객체
```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 = T extends string ? "yes" : "no";
type A = IsString; // "yes"
type B = IsString; // "no"
```

Q7. mapped 타입(Mapped Types)으로 확장하거나 변형하기
A7. `type T2 = { [K in keyof T]: … }` 구문을 통해 기존 타입 T의 키를 변형하거나 모두 순회하며 새로운 타입을 만듭니다.
```ts
type Nullable = { [K in keyof T]: T[K] | null };
type NullableUser = Nullable; // 모든 프로퍼티가 null 가능
```

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를 사용하거나 Pick> 조합으로 제거합니다.
```ts
type WithoutAge = Omit;
// 혹은
type WithoutAge2 = Pick>;
```

Q12. 확장 시 주의점이나 팁
A12.
- 인터페이스 상속과 타입 교차는 유사하지만, 인터페이스는 선언 병합이 가능하므로 라이브러리 선언에 자주 쓰이고, 타입 별칭은 간단한 조합에 유리합니다.
- 너무 깊게 중첩된 제네릭/조건부 타입은 가독성과 컴파일 성능을 저하시킬 수 있으니 적절히 분리하세요.
- `as const`와 결합해 리터럴 타입 확장도 유용합니다.
타입스크립트(TypeScript)는 자바스크립트의 상위 집합으로, 정적 타입을 지원하여 코드의 안정성과 가독성을 높이는 데 도움을 줍니다.

타입스크립트에서 타입을 확장하는 방법은 여러 가지가 있으며, 이는 객체지향 프로그래밍의 상속 개념과 유사합니다.

여기서는 타입 확장의 다양한 방법을 자세히 설명하겠습니다.

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(person: T, employeeId: number) { return { ...person, employeeId }; } const employee = createEmployee({ name: "Bob", age: 35 }, 9876

5); ``` 여기서 `createEmployee` 함수는 `Person`을 확장하는 제네릭 타입 `T`를 사용하여 다양한 형태의 객체를 생성할 수 있습니다.



5. 믹스인 패턴 타입스크립트에서는 믹스인(mixin) 패턴을 사용하여 여러 클래스의 기능을 조합할 수 있습니다.

믹스인은 여러 클래스의 속성과 메서드를 결합하여 새로운 클래스를 생성하는 방법입니다.

```typescript function EmployeeMixin {}>(Base: T) { return class extends Base { employeeId: number; constructor(...args: any[]) { super(...args); this.employeeId = Math.floor(Math.random() * 10000); } }; } class Person { constructor(public name: string, public age: number) {} } const MixedEmployee = EmployeeMixin(Person); const employee = new MixedEmployee("Charlie", 40); console.log(employee.employeeId); // 랜덤한 employeeId 출력 ``` 위의 예제에서 `EmployeeMixin` 함수는 `Person` 클래스를 확장하여 `employeeId` 속성을 추가하는 새로운 클래스를 생성합니다.

결론 타입스크립트에서 타입을 확장하는 방법은 다양하며, 이를 통해 코드의 재사용성과 가독성을 높일 수 있습니다.

인터페이스, 클래스, 타입 별칭, 제네릭, 믹스인 패턴 등 여러 방법을 적절히 활용하여 필요한 타입 구조를 설계할 수 있습니다.

이러한 기능을 통해 타입스크립트는 더욱 강력하고 유연한 타입 시스템을 제공합니다.

작성자: 박예은 [비회원] | 작성일자: 1년 전 2024-09-10 05:32:13
조회수: 262 | 댓글: 0 | 좋아요: 0 | 싫어요: 0
내용이 부정확하다면 싫어요를 클릭해주세요.