[TypeScript] Eunm, Interface, Type Aliases

jungmin Lee·2023년 8월 8일

열거형(Enum)

TypeScript의 열거형은 특정 값의 집합을 정의할 때 사용하며, 문자형 열거형과 숫자형 열거형을 지원하며 둘의 조합으로 정의될 수도 있다.

숫자형 열거형

숫자형 열거형의 값은 자동으로 0부터 시작하여 1씩 증가하며 수동으로 값을 지정할 수 도 있다. 열거형은 일반적으로 상수값을 대신하여 사용되며 코드를 가독성 높게 만들고 오타를 방지할 수 있다. 숫자형 열거형에는 역 매핑(Reverse mappings)이 존재, 열거형의 키(Key)로 값(value)를 얻을 수ㄷ 있고 값으로 키를 얻을 수도 있다.

enum Color {
  Orange = 2,
  Pink = 7,
  Blue = 9,
}  

let seletedColor: Color = Color.orange;
console.log(seletedColor) // 2;
let pinkValue: number = Color.Pink;
console.log(pinkValue) // 7;

문자형 열거형

문자형 열거형의 값은 전부 다 특정 문자 또는 다른 열거형 값으로 초기화해야 한다.
문자형 열거형에는 숫자형 열거형의 auto-incrementing이 없으므로 항상 명확한 값이 나오며 주로 외부에서 가져온 값을 TypeScript에서 다루기 위해서 사용된다.

enum HttpMethod{
  Get = "GET",
  Post = "POST",
  Put = "PUT",
  Delete = "DELETE",
}

function httpRequest(url: string, method: HttpMethod) {
  // ...
}

인터페이스(Interface)

TypeScript에서 인터페이스는 일반적으로 타입 체크를 위해 사용된다. 인터페이스는 변수, 함수, 클래스에 사용할 수 있으며 인터페이스에 선언된 프로퍼티 또는 메서드의 구현을 강제하여 일관성을 유지하도록 한다. TypeScript의 예약어인 interface를 사용하여 인터페이스를 생성할 수 있다.

변수와 인터페이스

TypeScript에서 인터페이스는 객체의 구조를 정의하기 위해 주로 사용된다. 프로퍼티의 순서를 지키지 않아도 되지만 정의된 프로퍼티보다 적거나 많게 작성하면 에러가 난다.
그러나 인터페이스 안의 프로퍼티가 어떠한 조건에서는 존재하고 존재하지 않을 수도 있으므로 ?연산자를 사용하여 선택적 프로퍼티를 작성할 수도 있다.

interface Fruit {
    name: string;
    quantity: number;
}

const fruit: Fruit {
    name: "apple";
    quantity: 5;
}

함수와 인터페이스

인터페이스를 사용하여 객체의 프로퍼티 이름과 타입을 정의하고, 함수의 매개변수 타입과 반환타입도 정의할 수 있다.

interface Student {
	name: string;
	age: number;
}

interface Introduce {
	(student: Student, introduce: string): string;
}

const introduce: Introduce = (student, introduce) => {
	return `${introduce}, ${student.name}! My age : ${student.age}.`;
}

클래스와 인터페이스

클래스를 구현할 때는 인터페이스에서 정의된 함수나 메서드의 매개변수 타입과 반환 값과 일치하도록 구현해야한다. 클래스 내부에서 해당 메서드의 매개변수 타입을 명시해주지 않으면 컴파일 에러가 발생한다.

interface Calculator {
	add(x: number, y: number): number;
	substract(x: number, y: number): number;
}

class BasicCalculator implements Calculator {
	add(x: number, y:number) {
		return x + y;
	}

	substract(x: number, y: number) {
		return x - y;
	}
}

const caculator = new SimpleCalculator();

console.log(caculator.add(4, 10)); //14
console.log(caculator.substract(10, 3)); //7

인터페이스와 상속

JavaScript 클래스를 확장할 때 extends 키워드를 사용하는 것처럼 인터페이스도 상속해서 확장이 가능하다. 기존에 존재하던 인터페이스의 프로퍼티를 다른 인터페이스 복사하는 것을 가능하게 해주어 재사용성을 높여준다. 또한 여러 인터페이스를 상속받아서 확장할 수 도 있다.

interface Person {
    name: string;
    age: number;
}

interface Student extends Person {
    subject: string;
}

const person: Student = {
    subject: "Department of clothing & textiles",
    age: 22,
    name: "Jimin",
}

타입 별칭(Type Aliases)

타입 별칭은 타입의 새로운 이름을 만드는 것으로 새로운 이름으로 기존의 타입을 참조하는 것이다. 타입 별칭을 이용하여 만들 때 키워드 type을 사용하여 작성한다.
타입 별칭을 사용하면 복잡한 타입을 간략하게 표현하고 타입 정의를 재사용하는 등 가독성을 높일 수 있다. 타입 별칭으로 만들어진 타입을 참조할 때에도 인터페이스처럼 내부에 정의된 프로퍼티를 전부 참조해야하며 더 많이 작성하거나 적게 작성하게 되면 컴파일 에러가 난다.

type Person = {
    id: number;
    name: string;
    age: number;
}

interface Student {
    id: number;
    subject: string;
    user: Person;
}

const person1: Student = {
    id: 1;
    subject: "Department of clothing & textiles";
    user: {
    id: 1;
    name: "Jimin";
    age: 22;
  },
}