연산자를 이용한 타입 정의

Union Type

/*
function logMessage(value: any){
    console.log(value)
}

logMessage('hello')
logMessage(100) // any일 경우 가능
 */

function logMessage(value: string | number){ //유니온 타입 : 하나이상을 타입을 사용할 수 있다
    console.log(value)
}
logMessage('hello')
logMessage(100)

• any를 사용해 하나 이상을 타입을 받을 수 있다.
• | 연산자를 사용해 하나 이상을 타입을 받을 수 있고, 이를 유니온 타입이라고 한다.

Union Type의 장점

var seho: string | number | boolean
function logMessage(value: string | number){ //유니온 타입 : 하나이상을 타입을 사용할 수 있다
    if(typeof value === 'number'){
        //any 같은 경우 런타임 시 값이 정해져 API 속성을 사용할 수 없지만, typeof를 사용하게 된다면 해당 타입을 API를 사용할 수 있다.
        //타입 가드 : 타입을 필터링 하며 범위를 좁혀가는 과정
        value.toLocaleString()
    }
    if(typeof value === 'string'){
        value.toString()
    }
    throw new TypeError('value must be string or number')
}
logMessage('hello')
logMessage(100)

• 타입 가드 : 타입을 필터링하며 범위를 좁혀가는 과정
• any 같은 경우 런타임 시 타입이 추론이 되어 해당 타입의 API를 코드에 사용할 수 없지만, 타입 가드를 통해 범위를 좁혀서 해당 타입임이 명시가 되면 해당 타입의 API를 코드에 사용할 수 있다.

Union Type 특징

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

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

function askSomeone(someone: Developer | Person) {
    //someone에 접근할 수 있는 타입은 name 뿐이다. -> 교집합만 준다.
    //인터페이스를 여러개 쓰게 되면, 타입 safety 하게 사용하기 위해 공통적인 속성만 제공한다.
}

• Developer/ Person 공통 속성 = name, Developer 개인 속성 : skill, Person 개인 속성 : age
• 두개의 인터페이스를 유니온 타입으로 설정하게 되면, 타입 스크립트는 타입 안정성을 보장하기 위해(오류가 발생하지 않도록) 공통적이 속성 값만 사용할 수 있게 한다.
• 여기서는 name 속성에만 접근할 수 있다.

인터섹션 타입 소개

var capt: string & number & boolean //인터섹션
function askSomeone(someone: Developer & Person) {
    //유니온 타입 같은 경우 타입 가드가 필요하지만, 인터섹션은 모두 포함이 되므로, 타입가드 필요 없이 사용이 가능하다
    someone.skill
    someone.age
}

• & 연산자를 사용하여, 인터섹션 타입을 정의한다.
• 인터섹션 같은 경우 해당 타입을 모두 만족하는 타입을 의미한다.
• someone 같은 경우 Developer와 Person을 모두 만족하고 있으므로 skill, age 프로퍼티를 모두 다 가지고 있다고 가정하며, 타입 가드 없이 사용할 수 있다.

Union Type, 인터섹션 비교

function askSomeone(someone: Developer & Person) {

}

//유니온 타입 같은 경우 Developer 나 Person 만 규현되면 된다.
//askSomeone({name: '디벨로퍼', skill: '웹 개발'})
//askSomeone({name: '캡틴', age: 100})
askSomeone({name: '디벨로퍼', age: 100, skill: '웹 개발'}) //Developer 속성과 Person 속성 모두 가지는 타입을 써야한다

• 유니온 타입은 유니온 타입으로 쓴 타입중 아무 거나 만 구현 되어 있으면 된다.
• 인터섹션 같은 경우 인터섹션으로 쓴 타입중 모두 구현이 되어 있는 새로운 인터페이스를 작성해서 전달해야 한다.