연산자를-사용한-타입정의.md

연산자를 사용한 타입 정의

연산자 기호를 이용하여 타입을 정의하는 방법
자바스크립트의 논리 연산자인 논리합 연산자(||)와 논리곱 연산자(&&)의 기호를 따서 타입을 정의 할 수 있다.

• 유니언 타입
• 인터섹션 타입

---

유니언 타입(union type)

• 여러개의 타입 중 한개만 쓰고 싶을때 사용하는 문법이다.
• OR 연산자의 |를 이용하여 여러개의 타입 중 1개를 사용하겠다고 선언하는 방식이다.
• 함수 코드 중복 줄일 수 있음

// 함수의 파라미터에 문자열과 숫자를 모두 받을 수 있는 유니언 타입으로 선언되어있음
function logText(text: string | number) {// 문자열과 숫자 모두 입력받음
    console.log(text);
}

유니언 타입 주의사항

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

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

function introduce(someone: Person | Developer) {
    // 자동완성도 문제없을 공통부분인 name만 자동완성됨
    console.log(someone.age);// 오류표시 (넘겨진인자에는 age속성이없음
}

introduce({name: '캡틴', skill: '인프런 강의'})

타입가드

• 이렇게 if 문으로 프로퍼티 체크를하면 타입 추론도 올바르게됨

function introduce(someone: Person | Developer) { 
    if ('age' in someone) {
        //
    }
    if ('skill' in someone) {
        //
    }
}

• typeof 연산자 활용

function logText(text: string | number) {
    if (typeof text === 'string') {
        //
    }
    if (typeof text === 'number') {
        //
    }
}

이처럼 함수의 파라미터에 유니언 타입을 선언하면 함수 안에서는 두 타입의 공통 속성과 메서드만 자동완성되는것을 확인했다. 특정 타입의 속성과 메서드를 사용하고 싶다면 typeof나 in연산자를 사용하여 타입을 구분한 후 코드를 작성해야한다. --> 타입가드

인터섹션 타입(intersection type)

• &을 사용한다.
• 타입 2개를 하나로 합쳐서 사용할 수 있는 타입이다.
• 보통 인터페이스 2개를 합치거나 타입 정의 여러개를 하나로 합칠 때 사용한다.

interface Avenger {
    name: string;
}

interface Hero {
    skill: string;
}

function introduce(someone: Avenger & Hero) {
    console.log(someone.name);
    console.log(someone.skill);
}

introduce({name: '캡틴', skill: '어셈블'})

함수의 파라미터에 인터섹션 타입(&)으로 정의했다. someone 파라미터에는 두 타입의 name과 skill 속성을 모두 사용할 수 있다. 인터섹션 타입은 이미 있는 타입 2개를 합칠 때 사용한다.

• 유니언 타입(|): N개 중 하나 (주의; 인터페이스를 | 하면, 공통된 부분만 안전함)
• 인터섹션 타입(&): N개 합침 (주의; 합친 모든 속성을 만족해야함)

---

Refer

쉽게 시작하는 타입스크립트 책 참고