TIL 23) TypeScript(2)

1. Enum

타입스크립트의 Enum은 특정 값의 집합을 정의할 때 사용한다.

enum Color{
  Red,
  Green,
  Blue,
}

위 열거형에 값을 지정할 수도 있다.

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

지정한 값을 가지고 산술 연산도 수행이 가능하다.

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

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

숫자 말고도 문자로도 지정할 수 있다.

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

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

문자형 열거형은 다음과 같은 상황에서 정의하기 좋다.

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

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

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

HTTP 요청 방식을 열거형으로 정리하여 코드의 가독성과 안정성을 높였다.

숫자형 열거형에는 역 매핑 이란것이 존재한다.

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

2. Interface

타입스크립트에서 인터페이스는 타입 체크를 위해 사용이 된다.

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

const user1: User = {
	name: "anna",
	age: 20
}

const user2: User = {
	age: 20,
	name: "anna"
}

const user3: User = {
  age:20
}

인터페이스는 다음과 같이 객체처럼 사용될 수 있다.

다만, 반드시 정의된 프로퍼티를 사용해야 하며, ? 를 통해 선택적으로도 사용할 수 있다.

인터페이스는 함수도 정의할 수 있다.

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

인터페이스는 클래스와 같이 extends를 이용하여 기존 인터페이스를 상속해서 확장이 가능하다.

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

interface Developer extends Person {
    language: string;
}

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

또한, 여러 인터페이스를 상속받아 사용할 수도 있다.

interface FoodStuff {
    name: string;
}

interface FoodAmount {
    amount: number;
}

interface FoodFreshness extends FoodStuff, FoodAmount { // 2개의 인터페이스를 FoodFreshness랑 사용가능
	   isFreshed: boolean;
}

const food = {} as FoodFreshness;

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

3. 타입 별칭

타입 별칭은 타입의 새로운 이름을 만드는 것이다.

type myType = string;

let str1:myType = "hello";

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

//Commentary 인터페이스에서 Person 타입을 참조하고 있습니다.
interface Commentary {
  id: number;
  content: string;
  user: Person;
}

//객체에서 Commentary 인터페이스를 참조하고 있습니다.
let comment1: Commentary = {
    id: 1,
    content: "뭐예요?",
    user: {
        id: 1,
        name: "김코딩",
        email: "kimcoding@codestates.com",
    },
}

위처럼 타입별칭->인터페이스->객체 로 사용할 수 있다.

인터페이스와 비슷한 것 같지만, 차이점이 있다. 바로 타입 별칭은 인터페이스처럼 확장이 불가능하다.