typescript - exercises 1일차

🔔 서론

데브코스 노션 클론 과제가 끝나고 잠깐의 숨 돌릴 틈이 주어진 어느 날, 같은 팀원이 한 가지 제안을 했다. 곧 typescript 강의가 시작되기 전 개념공부를 하면서 문제를 풀어보고 개념을 정리해 발표하는 스터디를 해보는게 어떻겠냐고.. typescript 공부를 안그래도 하려던 참이었기에 기쁜 마음으로 참여를 희망했다.

https://typescript-exercises.github.io/

TypeScript Exercises

팀원분이 "위 사이트의 문제를 그래도 최소 12번까지는 풀 수 있으면 내 기술 스택에 typescript를 자랑스럽게 적어도 된다"라는 아주 자극적이고 도전의식을 불태우는 발언을 해주셔서 이번 주 내에 모두 풀어볼 계획이다.

이번 포스트는 위 사이트의 1~4번 문제를 풀며 각 문제 풀이에 해당하는 핵심 키워드 개념을 정리하는 글이다.

---

🥁 1번

객체의 타입을 지정해주는 문제다.

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

console.log('Users:');
users.forEach(logPerson);

 

---

🥁 2번

Union type을 통해 프로퍼티가 다른 두 개의 타입을 하나의 타입에 지정해주는 문제다.

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(user: Person) {
    console.log(` - ${user.name}, ${user.age}`);
}

persons.forEach(logPerson);

 

---

🥁 3번

in 연산자를 통해 객체안에 프로퍼티가 있는지 확인하는 문제다.

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;
    // person 안에 프로퍼티 유무 확인,, 근데 왜 person?.role 안됨?
    if ('role' in person) {
        additionalInformation = person.role;
    } else {
        additionalInformation = person.occupation;
    }
    console.log(` - ${person.name}, ${person.age}, ${additionalInformation}`);
}

persons.forEach(logPerson);

 

---

🥁 4번

type predicates를 사용해서 custom한 type guard를 만드는 문제이다.

이러한 custom type guard는 파라미터로 받은 props를 판별하고자하는 타입인지 아닌지 구분하는 용도로 쓰인다.

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' }
];
// custom type guard
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);

---

💊 1일차 후기

16문제중 4번까지 풀어보았는데 typescript의 기본적인 개념부터 시작하다보니 초반에는 조금 쉽다는게 느껴졌다. 다만 잊고있던 개념들이 중간중간 있었고, 이번 문제풀이를 통해 다시 한번 정리할 수 있어 다행이다.