[TS] 타입 좁히기

짱효·2024년 1월 16일
0

📖 TypeScript

목록 보기
16/20

타입 좁히기

  • 조건문 들을 이용해 넓은 타입에서 좁은 타입으로
  • 타입을 상황에 따라 좁히는 방법을 이야기

    좁은 타입임을 보장할 수 있을때 타입스크립트는 좁은 타입으로 추론

타입 좁히기 장점

  • 매개변수에 여러가지 타입의 값들이 들어올 수 있고, 타입에 따라서 각각 다른 동작을 시키는 기능을 자주 만들기 때문에 좋음.

typeof value === "object"쓰지말기

  • object로 비교하면 'null'타입도 들어오고 다른 객체들도 들어온다.
    ➡️ 다른 타입가드 사용하기

instanceof: 새로운 타입가드 사용하기

value instanceof Date

  • instanceof 뒤에 자바스크립트의 내장 class가 와야한다 (객체type은 사용 불가)
  • 왼쪽 value 값이 Date냐?? (Null은 아님)

in: 객체 타입 타입가드

  • 객체 타입 사용 가능
  • 값이 있다고 value && 로 명시해줘야함.
  • in value는 null이 되면 안됨.
//**
 * 타입 좁히기
 * 조건문 들을 이용해 넓은 타입에서 좁은 타입으로
 * 타입을 상황에 따라 좁히는 방법을 이야기
 */

type Person = {
     name: string;
     age: number
}


// value => number : toFixed
//value => string : toUopperCase
//value => Date: getTime
// value => Person : name은 age 살 입니다.
function func(value: number | string | Date | null | Person){

    //좁은 타입 'number' => 타입좁히기
    // 타입가드 => 다른 타입이 못들어가게
    if(typeof value === "number"){
        console.log(value.toFixed());
    } else if (typeof value === "string"){  
        console.log(value.toUpperCase());
        //object로 비교하면 'null'타입도 들어오고 다른 객체들도 들어온다.
        // instanceof: 새로운 타입가드 사용하기(자바스크립트의 내장 class )(객체type은 사용 불가)
        // 왼쪽 value 값이 Date냐??(Null은 아님)
    } else if (value instanceof Date){
        console.log(value.getTime());
        //in 연산자
        // 앞에 프로퍼티이름 적기 value에 프로퍼티가 있냐
        // in 뒤에는 null이면 안된다. => value && 적어서 value가 있다는것을 알려줌.
        //
    }else if (value && "age" in value){
        console.log(`${value.name}${value.age}살 입니다`);
        ;
    }


}
profile
✨🌏확장해 나가는 프론트엔드 개발자입니다✏️

0개의 댓글