[TypeScript] 기초와 유니온

안녕하세요! 코딩히송입니다.

오늘 포스팅은 타입스크립트 객체 타입 인터페이스를 관리하는 방법을 정리해보았습니다 :)

먼저, 익명으로 관리하는 것부터 살펴볼까요?

const greet = (person: {name: string; age: number}) => {
    return "Hello" + person.age;
}

인터페이스 설정해서 관리하기:

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

const greet = (person: Person) => {
    return "Hello" + person.age;
}

타입 별칭 사용해서 관리하기:

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

const greet = (person: Person) => {
    return "Hello" + person.age;
}

Union Types

다양한 연산자를 사용하여 기존 유형에서 새로운 유형을 만들 수 있습니다.

유니온 타입 정의

문자열이나 숫자에 대해 작동 할 수있는 함수를 작성해 보겠습니다.

const printId = (id: number | string) => {
    console.log("Your ID is: " + id);
}

printId(101) // OK!
printId('101') // OK!
pirntId({myId: 101}) // Error!

예를 들어, 유니온 문자열에서만 사용할 수있는 메서드는 사용할 수 없습니다.

const printId = (id: number | string) => {
    console.log(id.toUpperCase()); // => Error! 
    console.log("Your ID is: " + id);
}

해결책은 유형 어노테이션이없는 JavaScript에서와 마찬가지로 코드와의 결합을 좁히는 것입니다.
예를 들어, TypeScript는 문자열 값만 typeof 값 "string"을 가질 것임을 알고 있습니다.

const printId = (id: number | string) => {
    if (typeof id === "string") {
        console.log(id.toUpperCase());
    } else {
        console.log("Your ID is: " + id);
    }
}

또 다른 예제 (배열)

const welcomePeople = (x: string[] | string) => {
  if (Array.isArray(x)) {
    // Here: 'x' is 'string[]'
    console.log("Hello, " + x.join(" and "));
  } else {
    // Here: 'x' is 'string'
    console.log("Welcome lone traveler " + x);
  }
}

유니온 타입을 설정해서 관리할 때는 각 공통점이 있는지 체크해주는 것이 중요합니다!