TS: 한입크기로 잘라먹는 타입스크립트 챌린지_day6

🥊 진도

 

3. 타입스크립트 이해하기 (9/9)

• 타입 단언
• 타입 좁히기
• 서로소 유니온 타입

🥋 요약

 

타입 단언 (Type Assertion)

// 타입스크립트의 눈을 잠깐 가려서 내가 작성한 타입이라고 믿도록 만드는 것이기 때문에 위험할 수 있다

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

let person = {} as Person;
person.name = "Julie";
person.age = 24;

type Dog = {
    name: string;
    color: string;
};

let dog = {
    name: "kimbab",
    color: "white",
    breed: "jindo",
} as Dog;

/**
 *  타입 단언의 규칙
 * 단언식 : """   값 as 단언   """"
 * A as B
 * -> A가 B의 슈퍼 타입이거나
 * -> A가 B의 서브 타입이어야 함.
 *
 */

let num1 = 10 as never;
let num2 = 10 as unknown as string;

   

• const 단언

let num4 = 10 as const;

let cat = {
    name: "야옹이",
    color: "yellow",
} as const;

// cat.name = "";
//  --> cannot assign to 'name' because it is a readonly property.
// const 선언으로 readonly 프로퍼티를 만들 수 있음

 

• Non Null 단언

type Post = {
    title: string;
    author?: string;
}

let post: Post = {
    title: "게시글",
    author: "왕지은",
}

const len: number = post.author!.length;
// const len:number = post.author?.length;
// --> ?로 인해 optional chaining이 일어나는데, type 'number | undefined' 일 경우 number 전용 메소드 length를 undefined일 수도 있는 변수에 사용할 수 없다는 의미
// ! 로 확언을 줘야한다. !사용시 이건 null이나 undefined가 절대 아니고 값이 있다는 단언을 하는 것

 

타입 좁히기 (Type Narrowing)

/**
 * 조건문 등을 이용해 넓은 타입 -> 좁은 타입으로 좁힘
 * 타입을 상황에 따라 좁히는 방법을 이야기 할 것
 */

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

// value => number : toFixed
// value => string : toUpperCase
// value => Date : getTime
// value => Person : name은 age살 입니다.

function func(value: number | string | Date | null | Person) {
// if와 typeof처럼 type narrowing 해주는 표현식을 Type Guard라고 함
    if (typeof value === "number") {
        console.log(value.toFixed());
    } else if (typeof value === "string") {
        console.log(value.toUpperCase());
    } else if (value instanceof Date) {
        console.log(value.getTime());
    } else if (value && "age" in value) {
        console.log(`${value.name}은 ${value.age}살 입니다.`);
    }
}
// if 
// typeof
// instanceof
// in

 

서로소 유니온 타입

/**
 * 교집합이 없는 타입들로만 만든 유니온 타입
 */

type Admin = {
    tag: "ADMIN";
    name: string;
    kickCount: number;
};

type Member = {
    tag: "MEMBER";
    name: string;
    point: number;
};

type Guest = {
    tag: "GUEST";
    name: string;
    visitCount: number;
};

type User = Admin | Member | Guest;
// tag의 타입을 string literal type으로 만들어줌으로서 교집합이 절대 되지 않는 관계가 되므로 Admin, Member, Guest가 서로소 관계가 된다

// Admin => {name}님, 현재까지 {kickCount}명 강퇴하였습니다.
// Member => {name}님, 현재까지 {point} 모았습니다.
// Guest => {name}님, 현재까지 {visitCount}번 오셨습니다.

function login(user: User) {
    switch (user.tag) {
        case "ADMIN": {
            console.log(
                `${user.name}님, 현재까지 ${user.kickCount}명 깅퇴하였습니다.`
            );
            break;
        }
        case "MEMBER": {
            console.log(`${user.name}님, 현재까지 ${user.point} 모았습니다.`);
            break;
        }
        case "GUEST": {
            console.log(
                `${user.name}님, 현재까지 ${user.visitCount}번 오셨습니다.`
            );
        }
    }
}

 

 

🍤 과제

 

Q1. 타입 단언을 이용해 person 변수에 빈 객체를 할당하세요.

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

let person: Person = {};

 

➡️

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

let person = {} as Person;

 

 

Q2. 타입 단언을 이용해 함수 호출에서의 오류를 해결하세요.

let value = 10;
giveMe10(value);

function giveMe10(value: 10) {
  return value;
}

➡️

let value = 10 as const;
giveMe10(value);

function giveMe10(value: 10) {
  return value;
}

Quiz 3.

CompanyMember 타입을 Boss와 Employee의 서로소 유니온 타입으로 정의하세요.

type Boss = {
  car: string;
};

type Employee = {
  salary: number;
};

type CompanyMember = Employee | Boss;

/* [Test] 여기부터는 정답을 체크하기 위한 용도로 수정하지 않습니다 */
function test(companyMember: CompanyMember) {
  if (companyMember.tag === "BOSS") {
    console.log("사장님 또 차 바꿨다 : ", companyMember.car);
  } else if (companyMember.tag === "EMPLOYEE") {
    console.log("아직도 월급은 : ", companyMember.salary);
  }
}

➡️

type Boss = {
  type: "Boss";
  car: string;
};

type Employee = {
  type: "Employee"
  salary: number;
};

type CompanyMember = Employee | Boss;