키모스토리

#4 리터럴, 유니온/교차 타입 본문

Web Devlopment/TypeScript

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

키모형 2025. 3. 26. 20:51
반응형

리터럴 타입 (Literal Types)

// Literal types

const userName1 = "Bob";
let userName2: string | number = "Tom";

userName2 = 3;

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

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

const user: User = {
    name: "Bob",
    job: "police", // type Job 의 값들 중에서만 선택가능
}


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

 

유니온 타입 (Union Types) ,  둘 중 하나의 타입을 선택해서 지정 가능

// Union types

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

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

// 식별 가능한 유니온타입.
function getGift(gift: Car | Mobile){
    console.log(gift.name); // 이상없음
    // gift.start();   // start() 메소드는 Car만 존재하기 때문에 오류
    // 타입을 확인 후 메소드 호출
    if(gift.name==="car"){
        gift.start();
    } else {
        gift.call();
    }
}

--------------------------------------------------------------------------

"use strict";
// Union types
// 식별 가능한 유니온타입.
function getGift(gift) {
    console.log(gift.name); // 이상없음
    // gift.start();   // start() 메소드는 Car만 존재하기 때문에 오류
    // 타입을 확인 후 메소드 호출
    if (gift.name === "car") {
        gift.start();
    }
    else {
        gift.call();
    }
}

 

교차타입 (Intersection Types)

// Intersection types
// 2개의 인터페이스 속성, 메소드를 모두 지정해야 사용가능
interface Car {
    name: string;
    start(): void;
}

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

const toyCar: Toy & Car = {
    name: "타요",
    color: "red",
    price: 10000,
    start(){},
};
반응형

'Web Devlopment > TypeScript' 카테고리의 다른 글

#6 Generic  (0) 2025.03.26
#5 클래스 (class)  (0) 2025.03.26
#3 함수 (function)  (0) 2025.03.26
#2 인터페이스(interface)  (0) 2025.03.26
#1 TypeScript  (1) 2025.03.26