본문 바로가기

프로그래밍 공부내용/타입스크립트(TS)

타입스크립트 문제풀이 #2

문제

- Type "Person" is missing, please define it and use it in persons array and logPerson function in order to fix all the TS errors.


내 문제 풀이

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

 


해답 문제 풀이

 

1번 문제랑 거의 똑같은 유형이다.

 

unknown상태인 type을 설정해서 오류를 지우면 된다.

 

오류가 나는 부분을 보면 interface로 선언한 User와 Admin을 타입으로 하는 녀석들이 마구 섞여서 Person을 이룬다.

 

Person이 User와 Admin의 타입을 모두 포괄하면 될 것 같다!

 

빙고..! 풀었다.

 

대단하게도.... 내 문제풀이랑 토씨하나 안틀리고 똑같았다!!

 

 

 


해답에 대한 개념설명

- 선언병합 vs 합병합

 

지난 문제에 이어서 또 나온 개념이다. 지난 문제를 풀때 난 type을 썼는데 답지는 interface를 썼어서 봤었다.

 

interface는 선언병합이 가능하고

 

type은 합병합이 가능했다.

 

 

 

합병합은

export type Person = User | Admin;

이런식으로 'a | b' 와 같이 쓴다.

 

고등학교때 배웠던 합집합이랑 똑같다.

 

a와 b의 속성을 모두 가져간다.

 

 

- 신기했던 점

 

저번문제때  type으로 합병합이 선언 가능하다. 라고만 알고 있었는데

 

이번 문제를 통해서 새로 알게 됐다.

 

type myType = Atype | Btype;

일때 Atype과 Btype까지 type일 필요는 없고 interface여도 가능하다.

 


왜 이런걸 만들었을까?

 

'This page has been deprecated'

라는 문구가 있는 것을 봐서 아마 예전 버전에서는 이런식으로 interface와 type을 확장했었던 것 같다.

 

합병합이나 선언병합을 사용하는 현재의 모습에 비교하면 상당히 불편해 보인다.

 

처음에 설계한 의도를 나름대로 생각해 봤다.

 

 

interface는 extends를 사용하는 걸로 봐서 '상속' 이라는 개념에 최적화 되게 만들려고 한것 같고,

 

type은 선언 된 속성들을 집합처럼 자유롭게 묶으려고 만든 것 같다.

 

이렇게 보니까 코드의 의도는 interface가 잘 보여줬겠지만, 실제 사용은 type이 더 자유로웠을 것 같은 느낌이다.

 

 

 

지난시간에 봤던

 

'TypeScript 팀은 가능한 Type Alias보단 Interface를 사용하고, 합 타입 혹은 튜플 타입을 반드시 써야 되는

 

상황이 Type Alias를 사용하도록 권장하고 있습니다.'

 

라는 문구에 빗대어 생각해보면.. 현재는 interface는 선언병합을 지원하기 때문에 extends를 해주지 않아도

 

알아서 잘 합쳐주는 느낌이 강해졌다.

 

이건 나름대로 장점이 있겠는데, 배포할때나 플젝 규모가 클때 확실히 type보다 오류에 강해보인다.


사실 지금까지 미리 푼 문제들이 좀 있고 정리가 뒤따라 가고 있다.

 

한문제 한문제 난이도가 계단식으로 확확 올라가니까, 

 

페이스를 잘 맞춰서 풀어나가려고 한다.

 

 

참조 : https://typescript-exercises.github.io/#exercise=2&file=%2Findex.ts

https://www.typescriptlang.org/docs/handbook/advanced-types.html#union-types