리터럴, 유니온/교차 타입

리터럴, 유니온/교차 타입

1. 리터럴 타입(Literal Types)

• 리터럴 타입(Literal Types)에 대해 알아봅시다!
• 리터럴 타입이란? TypeScript에서 변수 or 매개변수가 특정한 값을 나타내도록 사용되는 타입입니다.
• 해당 변수 or 특정한 값을 가질 때만 유효하도록 제한하는데 도움이 됩니다.
• TypeScript의 리터럴 타입은 string, number 두 가지가 있습니다.

 

2. 문자열 리터럴 타입(String Literal Types)

• 아래 코드에서 Job이 허용한 3개의 문자열 외에 다른 문자열을 사용하면, 오류가 발생합니다.

type Job = "police" | "developer" | "teacher";

interface User {
    name: string;
    job: Job;
}

const user: User = {
    name: "Bob",
    job: "developer",
    // job: "student" (오류발생)
}

 

3. 숫자형 리터럴 타입(Numeric Literal Types)

• 숫자형도 아래 코드에서 허용한 grade 외의 숫자를 사용하면, 오류가 발생합니다.

interface Student {
    name: string;
    grade: 1 | 2 | 3;
}

const user: Student = {
    name: "Bob",
    grade: 2,
    // grade: 5 (오류발생)
}

 

4. 유니온 타입(Union Types)

• 이번엔 유니온 타입(Union Types)에 대해 알아봅시다!
• 유니온 타입이란? 둘 이상의 타입을 허용하는 타입을 나타냅니다.
• 이는 OR 로직을 나타내며, 여러 가지 유형 중 하나가 될 수 있는 값을 나타냅니다.
• 예를 들어, 아래 코드를 살펴봅시다.

    → number | string으로 숫자 또는 문자열 값을 가질 수 있는 타입을 만들고 그 외에는 오류가 발생합니다.

let myVar: number | string;
myVar = 10;       // 유효
myVar = "Hello";  // 유효
myVar = true;     // 오류: boolean은 number 또는 string이 아닙니다.

 

• 인터페이스와 함수를 활용하여, 다음과 같이 사용할 수도 있습니다.

interface Car {
    name: "car";
    color: string;
    start(): void;
}

interface Mobile {
    name: "mobile";
    color: string;
    call(): void;
}

function getGift(gift: Car | Mobile) {
    console.log(gift.color);
    if (gift.name === "car") {
        gift.start();
    } else {
        gift.call();
    }
}

 

5. 교차 타입(Cross Types)

• 이번엔 교차 타입(Cross Types)에 대해 알아봅시다!
• 교차 타입이란? 두 개 이상의 타입을 결합하여 모든 타입의 기능을 갖는 새로운 타입을 생성합니다.
• AND 로직을 나타내며, 모든 타입의 특성을 갖는 값이 됩니다.
• 예를 들어, 다음 코드를 살펴봅시다.

    → 아래 코드 같이 CombinedType은 FirstType과 SecondType의 모든 속성을 가지고 있어야 합니다.

    → 즉, name 속성과 age 속성이 모두 필요합니다.

type FirstType = { name: string };
type SecondType = { age: number };

type CombinedType = FirstType & SecondType;

let obj: CombinedType;
obj = { name: "John", age: 25 }; // 유효
obj = { name: "Alice" };         // 오류: age 속성이 없습니다.
obj = { age: 30 };               // 오류: name 속성이 없습니다.

 

• 인터페이스와 함수를 활용하여, 다음과 같이 사용할 수도 있습니다.

interface Car {
    name: string;
    start(): void;
}

interface Toy {
    name: string;
    color: string;
    price: number;
}

const toyCar: Toy & Car ={
    name: "타요",
    start() {},
    color: "blue",
    price: 1000,
}

 

3. 정리하며

• 지금까지 리터럴 타입, 유니온 타입, 교차 타입에 대해 알아보았습니다.
• 다음 시간엔 클래스, 접근 제한자, static, abstract에 대해 알아보겠습니다.

클래스(Class)

 

※ 코딩앙마님의 유튜브 강좌를 참고하였습니다.