자기개발/검색한 자료 정리

TypeScript에서 타입 별칭, 인터페이스, 제네릭 사용법

실버블렛 2023. 4. 19. 22:18
반응형


요약: 이 글에서는 TypeScript에서 타입 별칭, 인터페이스, 제네릭의 사용법을 소개합니다. 개발자들이 일하다가 모르는 것이 있다면 이 글을 참고하여 TypeScript를 더 효율적으로 사용할 수 있습니다.

타입 별칭(Type Aliases)

타입 별칭은 기존 타입에 대한 새로운 이름을 정의할 수 있는 기능입니다. type 키워드를 사용하여 타입 별칭을 선언할 수 있습니다.

타입 별칭 예제

type Point = {
  x: number;
  y: number;
};

function printPoint(point: Point) {
  console.log(`x: ${point.x}, y: ${point.y}`);
}

const point: Point = { x: 1, y: 2 };
printPoint(point);

인터페이스(Interface)

인터페이스는 객체의 타입을 정의하는 방법 중 하나입니다. 인터페이스를 사용하면 코드의 가독성을 높이고, 객체가 정의한 규약을 따르도록 강제할 수 있습니다.

인터페이스 예제

interface Point {
  x: number;
  y: number;
}

function printPoint(point: Point) {
  console.log(`x: ${point.x}, y: ${point.y}`);
}

const point: Point = { x: 1, y: 2 };
printPoint(point);

인터페이스 확장

인터페이스는 다른 인터페이스를 확장할 수 있습니다. 이를 통해 기존 인터페이스에 새로운 속성이나 메서드를 추가할 수 있습니다.

interface Shape {
  color: string;
}

interface Circle extends Shape {
  radius: number;
}

const circle: Circle = { color: 'red', radius: 5 };

제네릭(Generic)

제네릭은 함수, 인터페이스, 클래스의 일부분에 타입을 미리 지정하지 않고 추후에 지정할 수 있게 하는 기능입니다. 제네릭을 사용하면 코드의 중복을 줄이고, 재사용성을 높일 수 있습니다.

제네릭 예제

function identity<T>(arg: T): T {
  return arg;
}

const numberValue = identity<number>(42);
const stringValue = identity<string>('Hello, TypeScript!');

제네릭 인터페이스

인터페이스에 제네릭을 적용할 수 있습니다. 이를 통해 동일한 인터페이스에 다양한 타입을 적용할 수 있습니다.

interface GenericIdentityFn<T> {
  (arg: T): T;
}

const numberIdentity: GenericIdentityFn<number> = identity;
const stringIdentity: GenericIdentityFn<string> = identity;

제네릭 클래스

클래스에도 제네릭을 적용할 수 있습니다. 제네릭 클래스를 사용하면 여러 타입에 대한 처리를 하나의 클래스에서 할 수 있습니다.

class GenericBox<T> {
  private _value: T;

  constructor(value: T) {
    this._value = value;
  }

  getValue(): T {
    return this._value;
  }

  setValue(value: T): void {
    this._value = value;
  }
}

const numberBox = new GenericBox<number>(42);
const stringBox = new GenericBox<string>('Hello, TypeScript!');

제네릭 조건

제네릭에서 특정 조건을 갖는 타입만을 사용하도록 제한할 수 있습니다. 이를 통해 더 안전하게 타입을 사용할 수 있습니다.

interface Lengthwise {
  length: number;
}

function logLength<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

logLength({ length: 10 }); // 가능
logLength(42); // 오류: number 타입에는 length 속성이 없음

이 글에서는 TypeScript에서 타입 별칭, 인터페이스, 제네릭의 사용법을 소개했습니다. 이러한 기능을 활용하면 코드의 가독성과 재사용성을 높일 수 있으며, 더 안전하게 타입을 사용할 수 있습니다. 개발자들이 일하다가 모르는 것이 있다면 이 글을 참고하여 TypeScript를 더 효율적으로 사용할 수 있기를 바랍니다.


#TypeScript #타입별칭 #인터페이스 #제네릭 #타입안전성 #코드재사용성 #예제 #확장성 #개발자가이드

반응형