본문 바로가기

FrontEnd/TypeScript

2개의 interface 중, 어떤 interface인지 모를 때

interface User {
    name: string;
    age: number;
    occupation: string;
}

interface Admin {
    name: string;
    age: number;
    role: string;
}

export type Person = User | Admin;

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

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

persons.forEach(logPerson);

 

위 코드 기준으로 했을 때, 아래와 같이 에러가 발생.

 

원인은 Person type이 Admin, User interface를 가지고 있기 때문에 어떠한 interface 인지 모르기 때문

 

따라서, 아래와 같이 해결 가눙

'FrontEnd > TypeScript' 카테고리의 다른 글

Typescript transpile CSS, etc..  (0) 2022.06.26