[TS] Exercises 4

exercises4

📌 TypeScript가 이 상황에서 type을 이해하기 위해 필요한 수정사항을 적용해라

interface User {
    type: 'user';
    name: string;
    age: number;
    occupation: string;
}

interface Admin {
    type: 'admin';
    name: string;
    age: number;
    role: string;
}

export type Person = User | Admin;

export const persons: Person[] = [
    { type: 'user', name: 'Max Mustermann', age: 25, occupation: 'Chimney sweep' },
    { type: 'admin', name: 'Jane Doe', age: 32, role: 'Administrator' },
    { type: 'user', name: 'Kate Müller', age: 23, occupation: 'Astronaut' },
    { type: 'admin', name: 'Bruce Willis', age: 64, role: 'World saver' }
];

export function isAdmin(person: Person) {
    return person.type === 'admin';
}

export function isUser(person: Person) {
    return person.type === 'user';
}

export function logPerson(person: Person) {
    let additionalInformation: string = '';
    if ("role" in person) {
        additionalInformation = person.role;
    }
    if ("occupation" in person) {
         additionalInformation = person.occupation;
     }
    console.log(` - ${person.name}, ${person.age}, ${additionalInformation}`);
}

console.log('Admins:');
persons.filter(isAdmin).forEach(logPerson);

console.log();

console.log('Users:');
persons.filter(isUser).forEach(logPerson);

💡 리턴값에 타입이 지정되지 않으면 isAdmin(person) 값이 true라도 role을 할당할 수 없다.
'in' 연산자를 사용해서 타입을 알려주었다.
 
이 방법으로 pass가 되서 그럼 3번 문제랑 다를 게 없지않나? 싶어서 구글링 해 본 결과 'is'를 사용해서 푸는 문제였다 ㅎ.

interface User {
    type: 'user';
    name: string;
    age: number;
    occupation: string;
}

interface Admin {
    type: 'admin';
    name: string;
    age: number;
    role: string;
}

export type Person = User | Admin;

export const persons: Person[] = [
    { type: 'user', name: 'Max Mustermann', age: 25, occupation: 'Chimney sweep' },
    { type: 'admin', name: 'Jane Doe', age: 32, role: 'Administrator' },
    { type: 'user', name: 'Kate Müller', age: 23, occupation: 'Astronaut' },
    { type: 'admin', name: 'Bruce Willis', age: 64, role: 'World saver' }
];

export function isAdmin(person: Person): person is Admin {
    return person.type === 'admin';
}

export function isUser(person: Person): person is User {
    return person.type === 'user';
}

export function logPerson(person: Person) {
    let additionalInformation: string = '';
    if (isAdmin(person)) {
        additionalInformation = person.role;
    }
    if (isUser(person)) {
        additionalInformation = person.occupation;
    }
    console.log(` - ${person.name}, ${person.age}, ${additionalInformation}`);
}

console.log('Admins:');
persons.filter(isAdmin).forEach(logPerson);

console.log();

console.log('Users:');
persons.filter(isUser).forEach(logPerson);

💡 타입 함수의 리턴 타입을 지정해주어서 오류를 해결 할 수 있다.
여기서 사용한 방법을 '타입 가드' 라고 한다.
 

❗️ '타입 가드' 란 무엇일까?

- 데이터의 타입을 알 수 없거나, 가능한 타입이 여러개 일 경우, 조건문을 통해 타입의 범위를 좁혀주는 것
- 타입에 따라 대응할 수 있어 에러를 줄일 수 있다.