TypeScript 2일차 / TypeScript 문법을 뿌셔보자 ( 열거형, 인터페이스 ,타입 별칭)

TypeScript

TypeScript 2일차 / TypeScript 문법을 뿌셔보자 ( 열거형, 인터페이스 ,타입 별칭)

배트리버 2023. 5. 31. 19:07

오늘은 타입스크립트를 공부한지 따끈따끈한 2일차가 되는 날이다 !

타입스크립트 문법 중 열거형 ,인터페이스 ,타입 별칭에 대해 배우고 익혔다.

헷갈렸던 부분이나 다시 알아두면 좋을 부분에 대해 정리해볼것이다 !

타입스크립트 열거형 (Enum)

특정 값의 집합을 정의할 때 사용됨 , 문자형 열거형과 숫자형 열거형을 지원

enum Color {
	Black,
    	Red,
        Green,
}

위의 예시에는 Color 라는 열거형을 정의하고 값으로는 Black, Red, Green 세개의 값을 가짐

숫자형 열거형

디폴트 값으로 숫자형을 사용하며 값은 자동으로 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"

숫자형 열거형 vs 문자형 열거형

1. 문자형 열거형에는 숫자형 열거형과 다르게 auto-incrementing이 없다. (숫자형은 디폴트로 0부터 1씩 증가하지만 문자형은 그렇지 않음 ) 대신 디버깅 할때 숫자형 열거형의 값은 가끔 불명확하게 나오지만 문자형 열거형은 항상 명확한 값만 나온다. -> 불명확하게 어떻게 나온다는지 감은 잘 안온다 ..

2. 숫자형 열거형은 역 매핑이 가능하다. 즉 키 로 값을 얻을 수 있고 반대로 값으로 키를 얻을 수도 있음.

이번에 솔로 프로젝트를 진행하면서 바로 문자열로 타입을 비교해서 코드를 작성한 적이 있었는데 코드 리뷰를 받으며 enum으로 작성해보라는 코멘트를 받았었다. 그 때는 사실 왜 써야되는지 이해가 잘 안갔지만 enum을 사용함으로써 코드 가독성도 높혀주고 오타와 같은 실수를 방지해줌을 알게 되었다. 또한 오늘 enum에 대해 공부하면서 enum의 필요성에 대해 확실하게 와닿았던 거 같다 !! 타입스크립트에서 사용하는 enum은 이와는 유사하지만 새로 알게된 개념도 많으니 조금 더 공부를 해야겠다. . !

타입스크립트의 인터페이스

변수와 인터페이스

타입스크립트에서 변수를 선언할 때 인터페이스를 사용할 수 있다. 인터페이스는 객체의 구조를 정의하기 위해 주로 사용되는 예악어이다 .

예약어는 이미 문법적인 용도로 사용되고 있는 것들 ( return , import ,const ,, 등등 )

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"
}

함수와 인터페이스

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

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

interface Greeting {
	(user: User, greeting: string): string;
}

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);

greet 함수에서는 Greeting 인터페이스 함수를 선언하였는데 이는 매개변수 타입과 반환타입이 모두 작성되어있으므로 작성하지 않는 것이 가능하다.

클래스와 인터페이스

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

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

인터페이스를 왜 써야할까 ?

인터페이스는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다. 인터페이스는 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사하다. 인터페이스에 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 하는 것이다.

인터페이스와 상속

자바스크립트에서 클래스를 확장할 때 extends 라는 키워드를 사용해 클래스를 상속해 새로운 클래스를 정의할 수 있다.

확장의 기본이 되는 클래스의 내용에서 새로운 내용을 추가한다고 생각할 수 있다.

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

interface Developer extends Person {
    language: string;
}

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

이렇게 상속을 하면 Developer는 Person의 변수인 name, age 를 모두 가지면서 language를 추가하여 가지는 형태가 된다.

여러 인터페이스를 상속 받아 확장하는 것도 가능하다 !!

타입 별칭

타입의 새로운 이름을 만드는 것, 새로운 이름을 만들 때 키워드 type 을 사용하여 작성한다. 코드가 더 간결해지고 가독성 좋게 만들 수 있다.

type MyString = string;

let str1: string = 'hello!';

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

인터페이스 vs 타입 별칭

타입 별칭과 인터페이스는 유사한 특징이 있지만, 차이점이 존재한다.

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

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

let kimcoding: Person = {
    name: '김코딩',
    age: 30,
}

let coding: User = {
    name: '김코딩',
    age: 30,
}

1. 코드 편집기에서 타입 별칭으로 작성된 코드위에 마우스를 올려다 보면 어떤 프로퍼티가 정의되어 있는지 보인다 ! 인터페이스는 안보임

2. 타입 별칭은 확장이 되지 않는다. 인터페이스는 확장 가능 -> 유연한 코드 작성을 위해선 인터페이스 사용

오늘 현업에서 일하시고 계시는 강사님의 말씀으로는 인터페이스보다 타입 별칭을 많이 사용한다고 하셨다. 사실 왜 ? 타입별칭을 .. ? 하는 생각이 들긴 들었다. 코드 재사용성도 높고 유연하게 사용하려면 인터페이스를 사용하는것이 더 좋을 것 같은데 아직까진 왜 현업에서 타입 별칭을 더 선호하는지 이해가 잘 안갔다.
타입 별칭의 확장에 대해서도 궁금증이 생겨 질문을 통해 답변을 기다리고 있는 중이다 .. 너무 어렵고 헷갈리는 것 같다 ...