Front-End/TypeScript

[TypeScript] 타입스크립트 Enum, Interface 문법

시니철 2024. 11. 11. 21:33

Enum

`enum`은 열거형을 정의하는 방법으로, 숫자나 문자열 등을 상수처럼 사용하고, 이를 코드에서 의미 있는 이름으로 사용할 수 있게 해주는 `TypeScript`의 기능입니다.


기본 값을 사용하는 방법(숫자 값)

`enum`을 정의할 때, 각 항목에 값을 지정하지 않으면 기본적으로 0부터 시작하는 숫자 값이 자동으로 할당됩니다.

enum Size {
	S, // 0
	M, // 1
	L, // 2
	XL, // 3
}
  • Size.S = 0
  • Size.M = 1
  • Size.L = 2
  • Size.XL = 3

값을 직접 지정하는 방법 (문자열 값)

숫자 값 대신, `enum` 항목에 직접 값을 할당할 수도 있습니다.

enum Size {
	S = 'S',
	M = 'M',
	L = 'L',
	XL = 'XL',
}

 

이렇게 하면 숫자 0, 1, 2, 3을 사용하는 대신, 직접 의미 있는 문자열 값을 할당할 수 있습니다. 이 방법은 숫자 값이 실수할 가능성이 있기 때문에, 문자열 값을 사용하는 것이 안전하고 가독성이 좋습니다.


Interface

`interface`는 객체 구조를 정의하기 위해 사용합니다. 객체의 프로퍼티와 타입을 지정하며, 선택적 프로퍼니틑 `?`를 붙여서 표시할 수 있습니다.

interface Product {
	id: string;
	name: string;
	price: number;
	memebersOnly?: boolean; // 선택적 프로퍼티
}

 


enum 예시와 함께 사용하기

enum Size {
	S = 'S',
	M = 'M',
	L = 'L',
	XL = 'XL',
}

 


상속을 통한 확장

`interface`는 상속을 통해 기존의 인터페이스를 확장할 수 있습니다. 새로운 인터페이스에서 기존 인터페이스의 모든 속성을 가져오면서 추가적인 속성을 정의할 수 있습니다.

interface ClothingProduct extends Product {
	sizes?: Size[];
}

 


예시 객체 생성

const product1: ClothingProduct = {
	id: 'c001',
	name: '반팔티',
	price: 1000,
	membersOnly: true,
	sizes: [Size.M, Size.L],
};

const product2: ClothingProduct = {
	id: 'd001',
	name: '긴팔티',
	price: 1500,
};

'Front-End > TypeScript' 카테고리의 다른 글

[TypeScript] 타입스크립트 기본 문법  (4) 2024.11.11
[TypeScript] 타입스크립트 실행하기  (1) 2024.11.08