🍀 문제 2

Intro

앞서 문제1에서 만들었던 상업 서비스에는 user 데이터 밖에 없다. 이제 admin을 추가하기 위해서 Person의 Type을 지정하고 이 Person Type을 persons라는 배열과 logPerson 함수에 타입을 적절히 지정해라.

문제

위에서 나는 오류를 보면 User Type에는 role이라는 property가 존재 하지 않는다. 따라서, typescript는 개발자에게 "persons라는 배열은 User Type을 가지는 data만 들어온다면서 role property는 존재하지 않는데.... 왜 구라쳐???"가 돼버리는 것이다.

✅ 해결

persons 배열에 넣어준 값을 보면 User Type또는 Admin Type이 들어감을 볼 수 있다. 말 그대로 또는은 User Type이 될 수도 있고 Admin Type이 될 수도 있다라는 의미이다. 따라서 이는 Union Type으로 해결가능하다.

type A, B가 있을 때 둘 중 하나의 type을 가질 수 있음을 typescript에서는 union type을 나타낼 수 있다. union type은 | keyword를 쓰며 A | B로 나타낼 수 있다.

// AS-IS
export type Person = unknown;

export const persons: User[]  = [ ... ]
                                 
export function logPerson(user: User) {
    console.log(` - ${user.name}, ${user.age}`);
}


// TO-BE
export type Person = User | Admin;
                                 
export const persons: Person[]  = [ ... ]
                                   
export function logPerson(user: Person) {
    console.log(` - ${user.name}, ${user.age}`);
}

해결!!

📚 참고

typescript docs union-type