[TypeScript] Type, Enum, Interface 타입 만들기

이번 글에서는 사용자 정의 타입, Enum 및 Interface를 만드는 데 초점을 맞춥니다. 이러한 강력한 구조를 사용하면 표현력이 풍부하고 잘 정의된 코드 구조를 만들 수 있습니다.

 

Type을 만들고, 명명된 상수에 Enum을 활용하고, 명확한 Interface를 디자인하여 TypeScript 프로젝트의 협업과 유지 관리성을 향상시키는 방법을 살펴보세요.

 

1. Type 만들기

type을 사용하면 기존 타입에 대한 사용자 정의 이름을 정의하거나 타입의 조합을 만들 수 있습니다.

type Status = 'success' | 'error';

function processStatus(status: Status): void {
  console.log(`Processing status: ${status}`);
}

let myStatus: Status = 'success';

processStatus(myStatus);
// Output: Processing status: success

이 예제에서 Status는 "success" 또는 "error"를 나타내는 사용자 정의 타입입니다.

 

2. Enum

enum은 숫자 값 집합에 보다 친숙한 이름을 부여하는 방법입니다.

enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT',
}

let playerDirection: Direction = Direction.Up;

console.log(`Player is moving ${playerDirection}`);
// Output: Player is moving UP

여기서 Direction은 각 멤버에 문자열 값이 할당된 Enum 입니다.

 

3. Interface

interface는 객체 형상에 대한 컨트랙트를 정의하여 객체가 준수해야 하는 구조를 지정할 수 있습니다.

interface Person {
  firstName: string;
  lastName: string;
  age: number;
  sayHello: () => void;
}

const john: Person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
  sayHello: () => {
    console.log(`Hello, I'm ${john.firstName} ${john.lastName}.`);
  },
};

john.sayHello(); // Output: Hello, I'm John Doe.

이 예제에서 Person은 firstName, lastName, age 및 sayHello 메서드가 있는 객체의 구조를 정의하는 인터페이스입니다.

 

Type, Enum 및 Interface 결합하기

type Car = {
  make: string;
  model: string;
  year: number;
};

enum FuelType {
  Gasoline = 'Gasoline',
  Electric = 'Electric',
  Hybrid = 'Hybrid',
}

interface ElectricCar extends Car {
  batteryCapacity: number;
  fuelType: FuelType.Electric;
}

const myElectricCar: ElectricCar = {
  make: 'Tesla',
  model: 'Model 3',
  year: 2022,
  batteryCapacity: 75,
  fuelType: FuelType.Electric,
};

여기에는 Car 타입, FuelType Enum, 그리고 Car 타입을 확장하는 ElectricCar 인터페이스가 있습니다. myElectricCar는 ElectricCar 인터페이스에 부합하는 객체입니다.

 

결론

이러한 개념을 사용하면 명확한 구조를 적용하고 유형과 값에 의미 있는 이름을 제공함으로써 보다 강력하고 유지 관리가 쉬운 코드를 만들 수 있습니다.