[Typescript] exercise 3

원티드 타입스크립트 챌린지를 듣고, 추천 받은 공부 방법 중에 exercise를 통해서 1부터 10까지 풀 수 있어야 된다고 해서, exercises를 풀면서 타입스크립트를 학습해보기로 했다.

사이트 : TypeScript Exercises

exercise 3

문제 3: logPerson 함수에 type Error를 수정하기
logPerson 함수는 User와 Admin을 허용해야 되고, Input(User의 occupation과 Admin의 role)에 따라 관련 정보를 출력해야 된다.

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);

in operator narrowing

javascript에서 in 연산자는 객체가 특정 속성을 갖고 있는지 검사를 해서 boolean 값으로 반환한다. typescript에서는 type을 좁히는 방법으로 in 연산자를 사용한다.

interface Dog {
  name: string;
  bark(): '멍멍';
}

interface Cat {
  name: string;
  meow(): '야옹';
}

function sayAnimal(animal: Dog | Cat) {
  if('bark' in animal) {
    animal.bark();
  }
  
  if('meow' in animal) {
    animal.meow();
  }
}

• in operator를 이용해서 exercise 3 풀기

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 ('role' in person) {
        additionalInformation = person.role;
    } else {
        additionalInformation = person.occupation;
    }
    console.log(` - ${person.name}, ${person.age}, ${additionalInformation}`);
}

persons.forEach(logPerson);

참고 주소 : https://www.typescriptlang.org/docs/handbook/2/narrowing.html#the-in-operator-narrowing

---

exercise 2에서 의문을 가지고 풀었던 부분이 exercise 3으로 나올 줄 몰랐다.