이번 글에서는 사용자 정의 타입, Enum 및 Interface를 만드는 데 초점을 맞춥니다. 이러한 강력한 구조를 사용하면 표현력이 풍부하고 잘 정의된 코드 구조를 만들 수 있습니다.
타입을 만들고, 명명된 상수에 Enum을 활용하고, 명확한 Interface를 디자인하여 TypeScript 프로젝트의 협업과 유지 관리성을 향상시키는 방법을 살펴보세요.
1. Type 만들기
type
을 사용하면 기존 타입에 대한 사용자 정의 이름을 정의하거나 타입의 조합을 만들 수 있습니다.
1 2 3 4 5 6 7 8 9 10
| type Status = 'success' | 'error';
function processStatus(status: Status): void { console.log(`Processing status: ${status}`); }
let myStatus: Status = 'success';
processStatus(myStatus);
|
이 예제에서 Status
는 “success” 또는 "error"를 나타내는 사용자 정의 타입입니다.
2. Enum
enum
은 숫자 값 집합에 보다 친숙한 이름을 부여하는 방법입니다.
1 2 3 4 5 6 7 8 9 10 11
| enum Direction { Up = 'UP', Down = 'DOWN', Left = 'LEFT', Right = 'RIGHT', }
let playerDirection: Direction = Direction.Up;
console.log(`Player is moving ${playerDirection}`);
|
여기서 Direction
은 각 멤버에 문자열 값이 할당된 Enum 입니다.
3. Interface
interface
는 객체 형상에 대한 컨트랙트를 정의하여 객체가 준수해야 하는 구조를 지정할 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| 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();
|
이 예제에서 Person
은 firstName
, lastName
, age
및 sayHello
메서드가 있는 객체의 구조를 정의하는 인터페이스입니다.
Type, Enum 및 Interface 결합하기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| 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
인터페이스에 부합하는 객체입니다.
결론
이러한 개념을 사용하면 명확한 구조를 적용하고 유형과 값에 의미 있는 이름을 제공함으로써 보다 강력하고 유지 관리가 쉬운 코드를 만들 수 있습니다.