깜놀하는 해므찌로

typescript literal type / 리터널 타입 / intersection type / 교차 타입 / |, & 본문

IT

typescript literal type / 리터널 타입 / intersection type / 교차 타입 / |, &

agnusdei1207 2023. 5. 22. 12:32
반응형
SMALL
// Literal type

const userName1 = "Bob"; // 상수
let userName2: string | number = "jane"; // 변수

userName2 = 3;

type Job = "police" | "developer" | "doctor"; // 사용자 정의 타입

interface User{
    name : string;
    job : Job; // Job 타입
}

let user:User = {
    name : "이름",
    job : "police"
}

// | : Union type

interface Student{
    name : string | number;
    grade : 1 | 2 | 3; // 1,2,3 만 입력 가능
}

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); // 둘 다 color 속성을 가지고 있어 사용 가능
    if(gift.name === "car"){ // name 을 통해 interface 구분
        gift.start();
    }else{
        gift.call();
    }
}

/** intersection type 교차 타입 */

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

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

let botToy : Bot & Toy = {
    name : "로봇장난감",
    start(){},
    color : "black",
    price : 1000
}
반응형
LIST