-
typescript - exercises 1일차Typescript 2023. 7. 11. 03:41
🔔 서론
데브코스 노션 클론 과제가 끝나고 잠깐의 숨 돌릴 틈이 주어진 어느 날, 같은 팀원이 한 가지 제안을 했다. 곧 typescript 강의가 시작되기 전 개념공부를 하면서 문제를 풀어보고 개념을 정리해 발표하는 스터디를 해보는게 어떻겠냐고.. typescript 공부를 안그래도 하려던 참이었기에 기쁜 마음으로 참여를 희망했다.
https://typescript-exercises.github.io/
팀원분이 "위 사이트의 문제를 그래도 최소 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의 기본적인 개념부터 시작하다보니 초반에는 조금 쉽다는게 느껴졌다. 다만 잊고있던 개념들이 중간중간 있었고, 이번 문제풀이를 통해 다시 한번 정리할 수 있어 다행이다.
'Typescript' 카테고리의 다른 글
Effective Typescript - type을 value들의 집합이라 생각하기 (2) 2023.09.03 typescript - exercises 4일차 (0) 2023.07.13 typescript - exercises 3일차 (0) 2023.07.12 typescript - exercises 2일차 (0) 2023.07.11 useRef current 객체의 생성 시점에 따른 ref 접근방식 (0) 2023.05.08