TypeScript/TypeScript - 기초부터 실전까지

10. 연산자를 이용한 타입 정의 - 유니온 타입(|), 인터섹션 타입(&)

DEV-Front 2023. 10. 8. 18:22
반응형

유니온 타입  ( 하나의 Type 이상의것을 쓸 수 있게 만든것  )

function logMessage(value : string | number){
    console.log(value);
}
logMessage('hello');
logMessage(30);

유니온 타입의 장점

var seho : string | number | boolean;

function logMessage(value : string | number){
    if(typeof value == 'number'){
        value.toLocaleString();
    }
    if(typeof value == 'string'){
        value.toString();
    }
    throw new TypeError('value must be string or number');
}
logMessage('hello');
logMessage(30);

1. 유니온 타입을 사용하면 간단하게 타입 추론 할 수 있음 

2. string과 number에 관련된 API만 볼 수 있음 

3. string, number 타입이 아닌것에 대해서 TypeError 지정할 수 있음

 

typeof : 타입가드 ( 특정 타입으로 타입의 범위를 좁혀나가는 과정) 시 사용 


유니온 타입의 특징

interface Developer{
    name: string;
    skill : string;
}

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


function askSomeone(someone : Developer | Person){
    someone.name; // 공통 속성만 가져올 수 있음
}

인터섹션 타입 소개

// 인터섹션 타입 (&) : 모든것을 포함한 속성을 갖는다
var jazz: string & number & boolean;

interface Developer{
    name: string;
    skill : string;
}

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

function askSomeone2(someone: Developer & Person) {
    someone.name; 
    someone.skill;
    someone.age;
    someone.language;
}

 


유니온 타입과 인터섹션 타입의 차이점

interface Developers{
    name: string;
    skill : string;
}

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


// 유니온 (|)
function askSomeone(someone: Developers | Persons){
    // someone.name; // 공통 속성만 가져올 수 있음
}

askSomeone({name: '현정', skill: 'ts'});
askSomeone({ name: '현정', age: 25 });

// 인터섹션 타입 (&) : 모든것을 포함한 속성을 갖는다
function askSomeone2(someone: Developers & Persons) {
    someone.name; 
    someone.skill;
    someone.age;
}
askSomeone2({ name: '현정', skill: '웹개발', age : 25});

 

반응형