TypeScript exercises

목표
TS의 다양한 특징들과 함께 기능과 원리에 대한 개요 얻기

다룰 내용
1. Basic typing.
2. Refining types.
3. Union types.
4. Merged types.
5. Generics.
6. Type declarations.
7. Module augmentation.
8. Advanced type mapping.

규칙 및 원칙
1. 어떤 경우에도 any 유형을 사용하지 말 것
2. 난이도는 빠르게 올라감
3. 개선점이 있다면 언제든 PR 날리기
4. 작성자에게 피드백을 주세요
5. Enjoy

---

1. data가 주어지면 interface User 를 정의하고 그에 따라 사용하기

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

export const users: User[] = [
    {
        name: 'Max Mustermann',
        age: 25,
        occupation: 'Chimney sweep'
    },
    {
        name: 'Kate Müller',
        age: 23,
        occupation: 'Astronaut'
    }
];

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

Object Types | TypeScript

풀이(Possible solution)를 보고 interface로 고쳤다.

2. Type Person을 정의하고 배열 및 함수 logPerson에 사용하기

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'
    }
];

Creating Types from Types | TypeScript

export type Person = {
    name: string;
    age: number;
    occupation?: string;
    role?: string;
};

원래 이렇게 풀었는데 3번을 풀려고 보니 출제 의도를 이해 못한 거였다.

3. 함수 logPerson 구현부 type error 고치기.

함수 logPerson은 User와 Admin 모두 수용해야 하고
입력(User의 occupation, Admin의 role)에 따라 관련 정보를 출력해야 한다.

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

The in operator narrowing | TypeScript