[원티드 프리온보딩 챌린지 2월] Week 2-2 TypeScript's Type System - 강의 후기

Week 2-2 TypeScript's Type System

Type System, Duck Typing, Structural Typing

 

 

드디어 2월 프리온보딩 챌린지 타입스크립트 강의의 마지막 시간이 왔다. 멘토님이 차분한 어조로 설명을 너무 잘 해주셔서 배운 점이 많았다. 타입스크립트에 대한 접근도 그렇고, 공부 방법 가이드, 수업의 마지막 시간마다 진행된 취업 관련 Q&A도 모두 마음에 들었다. 매번 강의를 들을 때마다 기록을 남기려고 집중하다 보니 수업 내용이 머리에도 더 각인이 되었다. 마지막 시간이라 이번 챌린지에 참여한 분들과 스터디를 모집하거나 링크드인 주소를 공유할 수 있는 기회도 마련해 주셨다. 

 

 

---

 

 

1. 구조적 타입과 명목적 타입

구조적 타입 (Structural Type)

객체가 어떤 속성들을 가지는지 구조(집합)를 기준으로 타입을 따진다. 자바스크립트는 구조적 타입의 언어이다. 타입스크립트는 구조적 타이핑이기 때문에, 구조가 일치하면(집합이 일치하면) 타입을 인정한다. 예를 들어 SF 영화에서 자주 나오는 주제의 '내 기억을 가진 사람을 그대로 복사해서 만든다면, 그 사람은 나라고 할 수 있을까?' 라는 물음을 던질 수 있는데, 타입스크립트는 이것을 인정해준다. 

 

명목적 타입 (Nominal Type) 

타입스크립트와 다르다. C#, Java 등의 언어가 명목적 타입을 가진다. 각 타입이 고유하다는 것을 의미한다. 동일한 타입이나 데이터가 있더라도 타입을 공유할 수 없다. 주민등록증과 같이, 이름을 기반으로 타입을 따지며 작성한 타입이 런타임에 존재한다. 

 

덕 타이핑

덕 타이핑은 프로그래밍에서 많이 쓰이는 이론이다. 타입의 생김새가 오리와 같다면 바로 오리의 타입임을 뜻한다. 오리처럼 보이고, 오리처럼 수영하고, 오리처럼 꽥꽥거리면 그것은 오리일 것이다. 거위가 오리와 같은 속성을 가지고 있다면, 거위라고해도 오리 타입으로 인정해준다. 일반적으로 동적 타입 시스템을 설명하는 데에는 덕 타이핑이 사용된다. 오리와 거위가 한국인에게 친숙하지 않다면 '개냥이 타이핑'으로 이해해 볼 수 있다. 고양이가 개처럼 사람을 좋아하고, 애교가 많고, 적극적이면 고양이라고 해도 강아지로 인정한다는 뜻이다.

 

 

 

 

2. 타입 시스템 복습

Q1. 타입스크립트를 사용하면 런타임에 오류가 나지 않는다?

아니다. 런타임에 타입이 결정나는 경우가 많다. 이를 위해 타입 가드를 사용한다.

 

Q2. 타입스크립트는 왜 런타임에 타입이 결정되도록 허술하게 허용할까?

타입스크립트의 Soundness 때문이다. 타입스크립트는 특정 불건전한 상황을 허용한다. any, as, ! 등이 있다.

 

Q3. 타입스크립트의 타입은 명목적 vs 구조적이다

타입스크립트는 구조적 타이핑을 가진다. 집합의 특성을 가지며, 집합이 일치하면 타입을 인정한다.

 

Q4. 구조적 타이핑은 '어떤 타이핑'이라고도 유사 타이핑이라고 한다.

덕 타이핑 (=개냥이 타이핑)

 

Q5. 타입스크립트의 타입은 사실 XX이다.

집합이다. 구조적 하위 타입을 기반로 하며 타입스크립트에서의 모든 타입은 집합일 뿐이다.

 

Q6. TSC vs 타입 체커가 하는 일은 다른데, 개발자들은 TS를 사용할때 어떻게 대응할 수 있고 TSC, 타입체커 어떤 것들을 이용할까?

• 런타임 ⇒ 타입 가드 (다른 것이 있을 수 있다.)
• IDE ⇒ TSserver
  • 타입 힌트
  • 인텔리센스 ⇒ 다른 언어도 된다(마크다운도 가능하다.)
• 컴파일 ⇒ TSC, 로더
  • 대표적 로더는 바벨, TS
  • 둘의 차이를 학습해보자.

 

 

 

 

3. 상위 타입과 하위 타입

최상위 타입은 unknown이다.

any는 유지보수를 쉽게 하기 위한 백터널 같은 것이다.

never가 가장 자식 타입이다.

타입의 상하관계를 몰라서 오류 발생하기도 하므로, 잘 알아두어야 한다.

 

typescript hierarchy

 

• 모든 타입은 집합일 뿐이지만 타입 간에도 계층이 존재한다.
• 타입 간의 관계는 특정 관계로 선언되었는지 여부가 아닌, 포함된 속성에 의해 결정된다.
• 최상위 타입은 시스템에서 허용하는 모든 가능한 값을 설명하는 타입이다.
• 서브 타입은 슈퍼 타입에 할당할 수 있으며, 그 반대는 불가능하다.

 

type TureAndFalse = ‘하위’ extends ‘상위’ ?  true : false

 

상위 타입 (Super Type)

• any
• unknown

   

하위 타입 (Sub Type)

• 상위 타입과 하위 타입 사이에는 무수히 많은 타입들이 존재한다.
• never

    

타입 캐스트 

• 타입 변수를 다른 타입의 변수에 할당하며 생기는 타입 오류로 그 계층을 확인할 수 있음
• extends 이용

  

업 캐스트

• 상위 타입에 하위 타입을 할당
• 안전한 상황으로 인지하여 컴파일러 오류 없이 대부분 암시적으로 가능

  

다운 캐스트

• 안전하지 않은 상황으로 인지하여 컴파일러 오류 발생
• any는 예외

 

예시 코드

타입스크립트 playground

interface Animal {
	name: string;
}

interface Person {
	name: string;
	age: number;
}

type PersonAndAnimal = Animal extends Person ? true : false // false

 

위 코드와 같은 문제는 타입호환 관점에서 봐야 한다. Animal이 상위타입이기 때문에 결과는 false가 나온다. 

 

False, Animal extends Person

True, Person extends Animal

 

 

 

 

4. Q&A

배움의 4단계

내가 무엇이 부족한지를 아는 게 중요하다.

 

최소한 의식적 무지(Conscious Not Knowing)상태가 되도록 하자. 현업에서 새로운 기술을 도입해야 되는 경우도 그렇지만 모르는 부분만 공부하자. 두꺼운 책 사고 인터넷 강의를 결제해서 처음부터 끝까지 다 보려면 리소스가 많이 든다.

 

배움의 4단계

 

 

첫 직장의 중요성

첫 직장의 도메인은 앞으로의 커리어에 큰 영향을 미친다.

 

실력이 좋다면 도메인 혹은 업계를 더욱 더 이용할 수 있고, 도메인과 업계를 아주 쉽게 바꿀 수 있을 것이다.

다만 실력이 좋지않다면 훌륭한 도메인을 다니는 경우에는 도메인 덕에 실력에 비해 커리어를 잘 탈수도 있다. 잘 안 풀릴 경우엔 도메인이 마음에 들지 않는데 어쩔 수 없이 욕하면서 그 계열을 계속 다녀야 할 수 있다.

 

 

네트워크 공부 방법

프론트엔드 개발자가 꼭 알아야 할 범위를 직접 산정해보자. 필요한 것만 찾아 깊이있게 공부한다.

 

프론트 개발자가 네트워크에서 알아야 할 것은 OSI, HTTP, HTTPS, CORS, 쿠키, SSL, Session, Cache 등 여러가지가 있다. '프론트엔드 개발자가 네트워크에서 이걸 모를 수가 있어?'라고 할만한 범위를 직접 산정하는 것도 공부다. 모두 공부하려고 욕심내지말고 이렇게 추린 내용을 가지고 필요한 것만 찾아서 깊이있게 공부하면서 범위를 넓히자.