타입스크립트는 왜 그럴까?
집합으로 이해하는 타입스크립트
이정환
타입스크립트는 왜 그럴까?
집합으로 이해하는 타입스크립트
발표자 소개
3가지 문장으로 소개해 드릴게요 !
이정환 winterlood
무엇이든 쉽게 설명할 방법이 있다고 믿는 사람
• 🎞 강의 한 입 크기로 잘라먹는 리액트
• 🎞 강의 한 입 크기로 잘라먹는 타입스크립트
• 📚 도서 한 입 크기로 잘라먹는 리액트
이정환 winterlood
따뜻한 개발자 커뮤니티를 만들고 싶어하는 사람
• 오픈채팅, 디스코드 한입 FE 커뮤니티 운영 중
현재 약 700분 참가
이정환 winterlood
이름이 많은 사람
• 윈터우드, 윈터로드, 원터로드, 워터루드, 워터로드 등 …
대상 청중 이런 분들을 위해 준비했어요
1. 타입스크립트를 배웠지만 아직 헷갈리시는 개념이 많은 분들
• Any, Unkown, Never 등의 타입들이 아직 혼란스럽게 느껴지는 분들
• 타입간의 호환성이나 유니온, 인터섹션 등의 대수 타입 등을 확실히 이해하기 어려운 분들
2. 타입스크립트를 이제 막 배워보려고 하시는 분들
• 프로그래밍에서 타입이 무엇을 의미하는지 아시는 분
• C 또는 Java 등의 강 타입 언어를 사용해본 경험이 있으신 분
3. 타입스크립트 고수님들
• 귀엽게 들어주세요 😢
목차 이런 이야기들을 할 거에요
1. 타입을 집합으로 이해하기
2. 타입 호환성 이해하기
3. 타입 계층도 살펴보기
4. 객체 타입과 집합
5. 대수 타입과 집합
1. 타입을 집합으로 이해하기
2. 타입 호환성 이해하기
3. 타입 계층도와 함께 특수한 타입들 이해하기
4. 객체 타입을 집합으로 바라보기
5. 대수 타입을 집합으로 바라보기
타입을 집합으로 이해하기
집합 Set
특정 조건에 맞는 원소들의 모임
ex 강아지, 고양이 동물 집합
타입을 집합으로 이해하기
Hello
infcon
winterlood
이정환
true
false
-
20
729
0.25
-
0.123
0
타입을 집합으로 이해하기
-
20
729
0.25
-
0.123
Hello
infcon
winterlood
이정환
0
true
false
String 타입
타입을 집합으로 이해하기
Hello
infcon
winterlood
이정환
true
false
String 타입 Number 타입
-
20
729
0.25
-
0.123
0
타입을 집합으로 이해하기
Hello
infcon
winterlood
이정환
true
false
String 타입 Number 타입
-
20
729
0.25
-
0.123
0
Boolean 타입
20
Infinity
729
0.25
-
0.123
타입을 집합으로 이해하기
Number 타입
hello
20
Infinity
729
0.25
-
0.123
타입을 집합으로 이해하기
Number 타입
hello
오류 : 집합에 속하지 않는 값을 대입하려고 했음
20
Infinity
729
0.25
-
타입을 집합으로 이해하기
Number 리터럴 타입
20
Infinity
729
0.25
-
타입을 집합으로 이해하기
오류 : 집합에 속하지 않는 값을 대입하려고 했음
Number 리터럴 타입
20
Infinity
729
0.25
-
0.123
타입을 집합으로 이해하기
Number 리터럴 타입
Number 타입
20
Infinity
729
0.25
-
0.123
타입을 집합으로 이해하기
Number 타입
Number 리터럴 타입
타입을 집합으로 이해하기
슈퍼 타입 부모
서브 타입 자식
Number
Number 리터럴 타입
타입을 집합으로 이해하기
Number 타입
Number 리터럴 타입
String 타입
String 리터럴 타입
Unknown 타입
타입을 집합으로 이해하기 타입 계층도
*위에 있을 수록 슈퍼타입
Null Void
Undefined
Number String Boolean Object
Unknown
Never
Any 치트키
1. 타입을 집합으로 이해하기
2. 타입 호환성 이해하기
3. 타입 계층도와 함께 특수한 타입들 이해하기
4. 객체 타입을 집합으로 바라보기
5. 대수 타입을 집합으로 바라보기
타입 호환성
Number
Number 리터럴
특정 타입의 값을 다른 타입으로 취급해도 괜찮은지 판단하는 것
타입 호환성
다운 캐스팅
Down Casting
타입 호환성은 타입간의 슈퍼 서브 관계를 기준으로 판단 됨
슈퍼 타입
서브 타입
업 캐스팅
Up Casting
타입 호환성
모든 동물 강아지
ex 동물과 강아지의 관계
동물
강아지
모든 강아지 동물
타입 호환성
타입 호환성
Number 타입 Number 리터럴 타입
<
타입 호환성
Number 타입 Number 리터럴 타입
<
Number
Number 리터럴
업 캐스팅 가능
타입 호환성
Number 리터럴 타입 Number 타입
<
타입 호환성
Number 리터럴 타입 Number 타입
<
Number
Number 리터럴
다운 캐스팅 불가능
1. 타입을 집합으로 이해하기
2. 타입 호환성 이해하기
3. 타입 계층도와 함께 특수한 타입들 이해하기
4. 객체 타입을 집합으로 바라보기
5. 대수 타입을 집합으로 바라보기
타입 계층도와 함께 특수한 타입들 이해하기
Null Void
Undefined
Number String Boolean Object
Unknown
Never
Any 치트키
1. Unknown 타입 전체 집합
Null Void
Undefined
Number String Boolean Object
Unknown
Never
Any 치트키 전체 집합
1. Unknown 타입 전체 집합
모든 타입의 값을 저장할 수 있음
1. Unknown 타입 전체 집합
모든 타입의 값을 저장할 수 있음
Unknown
Number String …
어떤 타입의 변수에도 저장할 수 없음
1. Unknown 타입 전체 집합
1. Unknown 타입 전체 집합
Unknown
Number String …
어떤 타입의 변수에도 저장할 수 없음
1. Unknown 타입 전체 집합
🤔 언제 사용할 수 있을까?
• 현재 정확한 타입을 알기 어려울 때 사용
1. Unknown 타입 전체 집합
🤔 언제 사용할 수 있을까?
• 현재 정확한 타입을 알기 어려울 때 사용
• 타입 좁히기와 함께 값을 유연하게 사용 가능
2. Never 타입 공집합
Null Void Number String Boolean Object
Unknown
Never
Any 치트키
공집합
Undefined
2. Never 타입 공집합
모든 타입의 변수에 저장 가능
2. Never 타입 공집합
Number String …
Never
모든 타입의 변수에 저장 가능
2. Never 타입 공집합
어떤 타입의 값도 저장할 수 없음
2. Never 타입 공집합
Number String …
Never
어떤 타입의 값도 저장할 수 없음
2. Never 타입 공집합
🤔 언제 사용할 수 있을까?
• 호출되지 않아야 하는 함수를 만들 때
2. Never 타입 공집합
🤔 언제 사용할 수 있을까?
• 호출되지 않아야 하는 함수를 만들 때
• Switch의 완전성을 보장하기 위해 활용 가능
2. Never 타입 공집합
🤔 언제 사용할 수 있을까?
• 호출되지 않아야 하는 함수를 만들 때
• Switch의 완전성을 보장하기 위해 활용 가능
완전성이 보장되지 않은 Switch
2. Never 타입 공집합
🤔 언제 사용할 수 있을까?
• 호출되지 않아야 하는 함수를 만들 때
• Switch의 완전성을 보장하기 위해 활용 가능
완전성이 보장된 Switch
3. Any 타입 치트키
Null Void Number String Boolean Object
Unknown
Never
Any 치트키
Undefined
3. Any 타입 치트키
타입 검사를 받지 않음
3. Any 타입 치트키
Any
Any
Number String …
타입 검사를 받지 않음
3. Any 타입 치트키
예외적으로 Never 타입의 변수에는 저장 불가
3. Any 타입 치트키
🤔 언제 사용할 수 있을까?
• 불가능 한 타입 단언을 가능케 할 수 있음
number
->
string
단언 불가
3. Any 타입 치트키
🤔 언제 사용할 수 있을까?
• 불가능 한 타입 단언을 가능케 할 수 있음
number
->
any
any
->
string
3. Any 타입 치트키
🤔 언제 사용할 수 있을까?
• 불가능 한 타입 단언을 가능케 할 수 있음
• Unknown을 이용해도 가능 함
number
->
unknown
unknown
->
string
타입 계층도와 함께 특수한 타입들 이해하기
Null Void
Undefined
Number String Boolean Object
Unknown
Never
Any 치트키
Quiz.
• A, B, C, D는 각각 어떤 타입으로 추론될까요?
Quiz.
A
=
never
• A ∩
• 모든 집합 A에 대해 A ∩ 는 이다.
• 어떤 집합과 공집합간의 교집합은 공집합이다
Quiz.
• A ∪
=
A
• 모든 집합 A에 대해 A ∪ 는 A이다.
• 어떤 집합과 공집합의 합집합은 해당 집합이다
B
=
string
Quiz.
• A ∩ U
=
A
• 모든 집합 A에 대해 A ∩ U는 A이다.
• U 전체 집합 과 어떤 집합의 합집합은 해당 집합이다
C
=
string
Quiz.
• A ∪ U
=
U
• 모든 집합 A에 대해 A ∪ U는 U이다.
• U 전체 집합 와 어떤 집합의 합집합은 해당 집합이다
D
=
unknown
1. 타입을 집합으로 이해하기
2. 타입 호환성 이해하기
3. 타입 계층도와 함께 특수한 타입들 이해하기
4. 객체 타입을 집합으로 바라보기
5. 대수 타입을 집합으로 바라보기
객체 타입과 집합
구조적 타입 시스템
• 프로퍼티를 기준으로 타입을 정의함
객체 타입과 집합
구조적 타입 시스템
• 프로퍼티를 기준으로 타입을 정의함
name: 이정환
name: 이정환 , job: 개발자
… 등등
Person 타입
객체 타입과 집합
구조적 타입 시스템
• 프로퍼티를 기준으로 타입을 정의함
name: 이정환
name: 이정환 , job: 개발자
… 등등
Person 타입
이 타입에 포함되기 위한
제약 사항, 조건
객체 타입과 집합
구조적 타입 시스템
• 프로퍼티를 기준으로 타입을 정의함
name: 이정환 , school: 가톨릭대
… 등등
Student 타입
객체 타입과 집합
Person 타입
Student 타입
객체 타입과 집합
Person 타입
Student 타입
name: 이정환 , school: 가톨릭대학교
객체 타입과 집합
name: 이정환
name: 홍길동 , job: 의적
Person 타입
Student 타입
name: 이정환 , school: 가톨릭대학교
객체 타입과 집합
Person 타입
Student 타입
1. 타입을 집합으로 이해하기
2. 타입 호환성 이해하기
3. 타입 계층도와 함께 특수한 타입들 이해하기
4. 객체 타입을 집합으로 바라보기
5. 대수 타입을 집합으로 바라보기
대수 타입 Algebraic Data Types
대수 타입이란?
• 둘 이상의 타입을 합쳐 만든 타입
*유니온 *인터섹션
유니온 Union 타입 with 객체 타입
Person 타입 Student 타입
name school
유니온 Union 타입 with 객체 타입
Person 타입 Student 타입
name school
???
유니온 Union 타입 with 객체 타입
Person 타입 Student 타입
1. Person 타입에만 포함되는 값
name school
유니온 Union 타입 with 객체 타입
Person 타입 Student 타입
1. Person 타입에만 포함되는 값
2. Student 타입에만 포함되는 값
name school
유니온 Union 타입 with 객체 타입
Person 타입 Student 타입
1. Person 타입에만 포함되는 값
2. Student 타입에만 포함되는 값
3. Person, Student 타입 모두에 속하는 값
name school
인터섹션 Intersection 타입 with 객체 타입
Person 타입 Student 타입
name school
인터섹션 Intersection 타입 with 객체 타입
Person 타입 Student 타입
1. Person, Student 타입 모두에 속하는 값
name school
대수 타입 Algebraic Data Types
유니온 타입 인터섹션 타입
감사합니다 진짜 끝!

인프콘-타입스크립트는 왜 그럴까?-이정환.pdf