[TypeScript] - 열거형, 인터페이스, 타입 별칭, 클래스

💡 열거형 (Enum)

TypeScript 의 열거형 (Enum)은 특정 값의 집합을 정의할 때 사용한다. JavaScript에서는 기본적으로 열거형을 지원하지 않지만, TypeScript에서는 문자형 열거형과 숫자형 열거형을 지원한다.

 

숫자형 열거형

값은 자동으로 0부터 시작하여 1씩 증가하지만 밑에와 같이 수동으로 값을 지정할 수 있다.

enum Color {
  Red = 1,
  Green = 2,
  Blue = 4,
}

문자형 열거형

문자형 열거형은 열거형의 값을 전부 다 특정 문자 또는 다른 열거형 값으로 초기화해야 한다.

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

let myDirection: Direction = Direction.Up;
console.log(myDirection); // 출력: "UP"

문자형 열거형에는 숫자형 열거형과는 다르게 auto-incrementing이 없다. 대신 디버깅을 할 때 숫자형 열거형의 값은 가끔 불명확하게 나올 때가 있지만 문자형 열거형은 항상 명확한 값이 나와 읽기 편하다.

---

 

💡 인터페이스(interface)

TypeScript에서 인터페이스는 객체(Object)의 구조를 정의하기 위해 주로 사용되는 예약어이다.

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

 

JavaScript를 TypeScript로 포팅 하기 - 인터페이스

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

//Student 인터페이스를 작성합니다.
interface Student extends User {
  grade: number;
}

//Student 인터페이스를 받는 kimcoding을 완성합니다.
//kimcoding의 이름은 김코딩이고, 나이는 20세이며, 학년은 1입니다.
const kimcoding: Student = {
  name: 'kimcoding',
  age: 20,
  grade: 1,
};

console.log(kimcoding);

 

💡 인터페이스와 상속 

인터페이스도 JavaScript에서 클래스를 확장할 때와 마찬가지로 extends 라는 키워드를 사용하여 기존에 존재하던 인터페이스를 상속해 확장이 가능하다.

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

interface Developer extends Person {
    language: string;
}

const person: Developer = {
    language: "TypeScript",
    age: 20,
    name: "Anna",
}

기존에 존재하던 인터페이스의 프로퍼티를 다른 인터페이스에 복사하는 것을 가능하게 해 주며, 인터페이스의 재사용성을 높여준다.

---

💡 타입 별칭(Type Aliases)

타입 별칭은 타입의 새로운 이름을 만드는 것이다. 이는 새로운 이름으로 기존의 타입을 참조하는 것을 의미한다. 

타입 별칭을 이용하여 타입의 새로운 이름을 만들 때 키워드 type 을 사용하여 작성한다. 

type MyString = string;

let str1: string = 'hello!';

// string 타입처럼 사용할 수 있습니다.
let str2: MyString = 'hello world!';

 

JavaScript를 TypeScript로 포팅 하기 - 타입 별칭

//Todo 타입을 정의합니다.
type Todo = {
  id: number;
  title: string;
  isDone: boolean;
};
//Todo 타입을 사용해 객체를 정의합니다.
const show: Todo = {
  id: 0,
  title: 'hi',
  isDone: true,
};

//Todo 타입을 사용한 객체를 출력해봅니다.
function getTodo(todo: Todo): void {
  console.log(todo);
}

getTodo(show);

 

💡 인터페이스(interface) 와 타입 별칭(Type Aliases)의 차이점

• 인터페이스(interface) 의 경우 extends를 할 수 있지만, 타입 별칭(Type Aliases)은 extends 를 할 수 없다.
• 인터페이스는 확장할 수 있고, 타입 별칭은 확장할 수 없다.
• VSCode 작성 시, 내부에 정의된 프로퍼티로 차이점이 있다.

 

인터페이스로 선언한 타입을 확인한 결과 

 

타입 별칭으로 선언한 타입을 확인한 결과 

 

---

💡 클래스(Class)

TypeScript에서는 클래스의 속성과 메서드에 대한 타입을 명시할 수 있다.

 

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet(): void {
    console.log(`안녕하세요, 제 이름은 ${this.name}이고, ${this.age}살 입니다.`);
  }
}

TypeScript에서 클래스를 정의할 때, constructor를 이용하여 초기화하는 멤버들은 전부 상단에서 정의를 해줘야 한다.

또한 contructor 내 인자로 받을 때도 정확히 타입을 명시해 줘야 한다.