[TypeScript] 문법 (Enum, Interface)

Enum (열거형)

특정 값의 집합을 정의할 때 사용된다.

JavaScript에서는 기본적으로 Enum을 지원하지 않지만 TypeScript에서는 문자형, 숫자형 Enum을 지원한다.

enum "enum 이름" {
    enum 값 1,
    enum 값 2,
    ...
}

숫자형 Enum

Enum은 숫자형과 문자열형, 또는 이 둘의 조합으로 정의할 수 있다.

디폴트 값은 숫자형을 사용하며, 각 값은 자동으로 0부터 시작해서 1씩 증가한다. (수동으로 값을 지정할 수 도 있다.)

// Red 1, Green 2, Blue 4로 수동 정의
enum Color {
  Red = 1,
  Green = 2,
  Blue = 4,
}

// enum의 값은 산술 연산을 수행할 수 있다.
let c: Color = Color.Green;
let greenValue: number = Color.Green;
let blueValue: number = Color.Blue;

console.log(c);          // 출력: 2
console.log(greenValue);  // 출력: 2
console.log(blueValue);   // 출력: 4

역 매핑 (Reverse mappings)

역 매핑은 숫자형 enum에만 존재하는 특징이다.

enum의 key로 value을 얻을 수 있고 value로 key를 얻을 수 도 있다.

enum Enum {
    A
}
let a = Enum.A;
let nameOfA = Enum[a]; // "A"

문자형 Enum

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

숫자형 enum의 값은 가끔 불명확하게 나올 때가 있지만 문자형 enum은 항상 명확한 값이 나와 읽기 편하다.

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

// myDirection 변수를 Direction.Up 초기화한다.
let myDirection: Direction = Direction.Up;
console.log(myDirection); // 출력: "UP"

문자형 enum은 주로 외부에서 가져온 값을 TypeScript에서 다루기 위해 사용한다.

// 예시 : HTTP 요청 방식
enum HttpMethod {
  Get = "GET",
  Post = "POST",
  Put = "PUT",
  Delete = "DELETE",
}

// makeRequest 함수는 url과 HTTP 요청 방식을 인자로 받는다.
function makeRequest(url: string, method: HttpMethod) {
  // ...
}

makeRequest("/api/data", HttpMethod.Post);

Interface (인터페이스)

TypeScript에서 인터페이스는 일반적으로 타입 체크를 위해 사용한다.

변수, 함수, 클래스에 사용할 수 있으며, 인터페이스에 선언된 프로퍼티 또는 메서드의 구현을 강제하여 일관성을 유지하도록 한다.

TypeScript의 예약어인 interface를 사용하여 TypeScript의 인터페이스를 생성할 수 있다.

❓

예약어(reserved world)

컴퓨터 프로그래밍 언어에서 이미 문법적인 용도로 사용되어 식별자로 사용할 수 없는 단어 (함수의 이름이나 변수의 이름으로 사용할 수 없음)

ex. return, import, const, let 등

변수와 인터페이스

TypeScript에서 변수를 선언할 때 인터페이스를 아래와 같이 사용할 수 있다.

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

// 인터페이스의 이름은 네이밍 컨벤션에 의해 대문자로 작성한다.
interface User {
	name: string;
	age: number;
}

// 정상적으로 선언된다.
const user: User = {
	name: "anna",
	age: 20
}

// 프로퍼티의 순서를 지키지 않아도 정상적으로 선언된다.
const user: User = {
	age: 20,
	name: "anna"
}

// 정의된 프로퍼티보다 적거나 많이 작성했을 때 에러가 난다.
// 적을 때
const user: User = {
	name: "anna"
}
// 많을 때
const user: User = {
	name: "anna",
	age: 20,
	job: "developer"
}

❓선택적 프로퍼티 작성
인터페이스 안의 모든 프로퍼티가 어떤 조건에서만 존재하거나 아예 없을 수 도 있을 때 (? 연산자 사용)

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

// 정상적으로 선언된다.
const user: User = {
	name: "anna"
}

함수와 인터페이스

인터페이스를 사용하여 함수의 매개변수 타입과 반환 타입도 정의할 수 있다.

// Object의 프로퍼티 이름과 타입 정의
interface User {
	name: string;
	age: number;
	job: string;
}

// 함수의 매개변수와 반환 타입 정의
interface Greeting {
	(user: User, greeting: string): string;
}

// Greeting 인터페이스에서 매개변수와 반환 타입을 명시해주었기 때문에 아래 함수에서는 타입을 명시하지 않아도 된다.
const greet: Greeting = (user, greeting) => {
	return `${greeting}, ${user.name}! Your job : ${user.job}.`;
}

const user: User = {
	name: "anna",
	age: 30,
	job: "developer"
};

const message = greet(user, "Hi");

console.log(message); // 출력 : Hi, anna! Your job : developer.

클래스와 인터페이스

// Calculator 인터페이스는 add와 substract 메서드를 정의한다.
interface Calculator {
	add(x: number, y: number): number;
	substract(x: number, y: number): number;
}

// SimpleCalculator 클래스는 Calculator 인터페이스를 사용한다.
// SimpleCalculator 내에서는 Calculator 인터페이스에서 정의된 두 메서드를 반드시 작성해야한다.
class SimpleCalculator 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, 9)); //13
console.log(caculator.substract(10, 5)); //5

인터페이스와 상속

JavaScript에서 클래스를 확장할 때 extends라는 키워드를 사용해 기존에 존재하던 클래스를 상속해 새로운 클래스를 정의할 수 있었다. 인터페이스도 extends라는 키워드를 사용하여 기존에 존재하던 인터페이스를 상속해 확장이 가능하다.

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

// extends 키워드로 Person 인터페이스를 상속해 새로운 인터페이스인 Developer를 만든다.
interface Developer extends Person {
    language: string;
}

// Developer 인터페이스를 사용하여 person이라는 객체를 구현한다.
const person: Developer = {
    language: "TypeScript",
    age: 20,
    name: "Anna",
}

여러 인터페이스를 상속받아 확장할 수 도 있다.

interface FoodStuff {
    name: string;
}

interface FoodAmount {
    amount: number;
}

// extends 키워드로 FoodStuff,  FoodAmount 인터페이스를 상속해 새로운 인터페이스인 FoodFreshness를 만든다.
interface FoodFreshness extends FoodStuff, FoodAmount {
	   isFreshed: boolean;
}

const food = {} as FoodFreshness;

food.name = "egg";
food.amount = 2;
food.isFreshed = true;

Reference

코드스테이츠

https://www.typescriptlang.org/