섹션 3 타입스크립트 이해하기
타입스크립트 이해하기
![](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
타입은 집합이다
![](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
![](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
![](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
![](https://blog.kakaocdn.net/dn/QNCwq/btsplOHVHDd/m0tMbUTQL3CFXyvLQ7U4u0/img.png)
![](https://blog.kakaocdn.net/dn/bqG3r9/btsplO2e1cV/t9oaPJJpHKooxAFL0um0p0/img.png)
![](https://blog.kakaocdn.net/dn/9hiFq/btspjWUbXSs/D6EmRPuOQNGJDilEhEkJv0/img.png)
![](https://blog.kakaocdn.net/dn/baVO9c/btspgnrhaOa/7PoF06oBBIZUxoFiUe2wIK/img.png)
![](https://blog.kakaocdn.net/dn/bzg1Kn/btsplp9EWtp/T29CrWda57eKjKRalWg0ok/img.png)
![](https://blog.kakaocdn.net/dn/bnCcBk/btsplbcnRuK/3qUAoH6WdheK6KxaVilRzK/img.png)
![](https://blog.kakaocdn.net/dn/YHLEZ/btspgnY6HPk/vkElO8THwErp5T83wFxScK/img.png)
![](https://blog.kakaocdn.net/dn/dXRiM2/btspeHQU0VQ/mXajadvoqiBOrbzzKz52JK/img.png)
![](https://blog.kakaocdn.net/dn/vL4P9/btspkJUSqIz/poU0GuZZrncCdArsjS90Qk/img.png)
![](https://blog.kakaocdn.net/dn/Gyw0m/btsplPNNqC0/zKOU8TwpxlHhIYdLc3Y9c0/img.png)
![](https://blog.kakaocdn.net/dn/bocQGj/btsplQ0horp/5vcYZZ7Kf67K0ibkYKliMk/img.png)
타입 계층도와 함께 기본타입 살펴보기
![](https://blog.kakaocdn.net/dn/LF0Lw/btspk7OzZrs/wfphLvy5xxcI55KrweIv51/img.png)
unknown 타입 (전체 집합)
unknown 타입은 타입 계층도의 최 상단에 위치합니다.
![](https://blog.kakaocdn.net/dn/bf0CeY/btsplaLhZLi/akabYlB6i4sboR3kmw2lCk/img.png)
unknown 타입 변수에는 모든 타입의 값을 할당할 수 있습니다. 바꿔 말하면 모든 타입은 unknown 타입으로 업 캐스트 할 수 있습니다.
never 타입 (공집합 타입)
never 타입은 타입 계층도에서 가장 아래에 위치합니다.
![](https://blog.kakaocdn.net/dn/bkoXRS/btsplrl6p56/DnsNRoPK8q3sZK6ge3g9gk/img.png)
void 타입
![](https://blog.kakaocdn.net/dn/baSjW5/btsplMwBzCr/v0yhk2P07LEANLpvYFX0hk/img.png)
![](https://blog.kakaocdn.net/dn/bE78im/btsppJFPuph/qEts7CK42v2Kb7J2RgLbF0/img.png)
any 타입
어떤 곳으로 가든 어떤 곳에서 오든 모든 업캐스팅 다운 캐스팅이 가능하다 ==> 치트키
단, never 타입에서의 다운 캐스팅으 예외이다.
객체 타입의 호환성
![](https://blog.kakaocdn.net/dn/5mkpX/btspk8fBReF/kjaGATmkp3xkgK5nsPh5qK/img.png)
![](https://blog.kakaocdn.net/dn/dbm93M/btsplQsqFFW/3KLYkUkmSCcnMDASc1RUjK/img.png)
![](https://blog.kakaocdn.net/dn/yGUY9/btsplRkzyYb/QXkBP83BFIymHCtmRPFlMk/img.png)
![](https://blog.kakaocdn.net/dn/cdkATu/btsplbJ8hVe/lDHKZFSTQjGwxqFZszwVk0/img.png)
초과 프로퍼티 검사 : 변수를 초기화(및 함수 인자 전달) 할때 초기화 하는값으로 객체 리터럴을 사용하면 발동
대수 타입
합집합(Union) 타입
![](https://blog.kakaocdn.net/dn/cNvf4x/btspmhb2G2N/Vn647t2UVn5fFdWJz5KFvk/img.png)
교집합(Intersection) 타입
![](https://blog.kakaocdn.net/dn/by9HkL/btsplPUBeJZ/u8n1bEiGnH0RzRas0f84Q1/img.png)
![](https://blog.kakaocdn.net/dn/AitWy/btspnkGjL6h/fVGfCD6oOtgjfCGZCpwPkK/img.png)
![](https://blog.kakaocdn.net/dn/76D3H/btsppHOMZmD/vxkpa4o660PcCQjp8Y2EC0/img.png)
타입 추론
1. 변수 선언
일반적인 변수 선언의 경우 초기값을 기준으로 타입이 잘 추론됩니다.
![](https://blog.kakaocdn.net/dn/t8YJS/btspmgEcyMw/xkyZwWRiTI4DQJXSDWxdMK/img.png)
2. 구조 분해 할당
객체와 배열을 구조 분해 할당하는 상황에서도 타입이 잘 추론됩니다.
![](https://blog.kakaocdn.net/dn/bAi63m/btspsF4fJHm/97X3ERiFhPCVLegFl2aYl1/img.png)
3. 함수의 반환값
함수 반환값의 타입은 return 문을 기준으로 잘 추론됩니다.
![](https://blog.kakaocdn.net/dn/bWWtzF/btsplbDpk7Z/oGHP26pKXDnH2CTcwE00k1/img.png)
4. 기본값이 설정된 매개변수
기본값이 설정된 매개변수의 타입은 기본값을 기준으로 추론됩니다.
![](https://blog.kakaocdn.net/dn/ofS90/btspmLRHarK/eSRcrzJWVETie9KNzYgib0/img.png)
주의해야 할 상황들
1. 암시적으로 any 타입으로 추론
![](https://blog.kakaocdn.net/dn/0txm6/btsplLYKWX2/OBxwP2srkEJkJJJAZOga8k/img.png)
변수를 선언할때 초기값을 생략하면 암시적인 any 타입으로 추론됩니다.
d = 10; 다음 라인부터는 d가 number 타입이 되고, d = “hello” 다음 라인부터는 d가 string 타입이 됩니다.
따라서 마지막 라인에서 d가 string 타입일 때 toFixed 같은 number 타입의 메서드를 사용하려고 하면 오류가 발생합니다.
이렇게 암시적으로 추론된 any 타입은 코드의 흐름에 따라 타입이 계속 변화합니다.
이를 any의 진화라고 표현하기도 합니다.
2. const 상수의 추론 ==> 리터럴 타입으로 추론
타입 단언 as사용
![](https://blog.kakaocdn.net/dn/HGvDB/btspl8M9nuP/KJNPHoXQJ9R8Gk9ceA2rtk/img.png)
타입 단언의 예시
![](https://blog.kakaocdn.net/dn/GbBsV/btsplNbdCYR/4fKYRPjVYQ33AQxECHhuJk/img.png)
타입 단언의 규칙
const 단언
![](https://blog.kakaocdn.net/dn/PC16h/btspkLLWKFD/4JUXCpAfR1QhDELb5aTDl0/img.png)
non null 단언
![](https://blog.kakaocdn.net/dn/bbI1Wt/btsph8Hwptr/CHBPyYTd0aeIFep6EttsO0/img.png)
옵셔널 체이닝이 발생하면 원하는 작업을 할수 없을 때 non null단언 사용
![](https://blog.kakaocdn.net/dn/bqrKeO/btspmWS1RzY/4HO4Qi26KyIxKRwgM4Qrl0/img.png)
null이 아니라고 믿게한다.
하지만 단언은 업캐스팅과 다운캐스팅과 다르게 타입을 바꾸는게 아니라 컴파일러의 눈을 잠시 가리는 것이어서
조심해서 사용 해야한다.
타입 좁히기
![](https://blog.kakaocdn.net/dn/c9SWE8/btspg1VCMeG/rk1qCQ5gFUlSJgmG9Zf7CK/img.png)
![](https://blog.kakaocdn.net/dn/BmmqT/btspeJHWr1l/fGmm6mIYVIEfAxlcdIfSO1/img.png)
오른쪾은 클래스 왼쪽은 그 클래스 내에 있는 인스턴스
서로소 유니온 타입
집합이 없는 타입들 즉 서로소 관계에 있는 타입들을 모아 만든 유니온 타입
![](https://blog.kakaocdn.net/dn/D0cdz/btsplRx8Uhj/DIdrnuquNSVvwLrgwB6c81/img.png)
![](https://blog.kakaocdn.net/dn/J4RSi/btspeGxFeJd/NQvvuGlskKPEKK3q89y87K/img.png)
![](https://blog.kakaocdn.net/dn/cEk8MA/btspfPVq9be/CZKKYREkzh1gFp0IUu1w7k/img.png)
'모카 스터디 > JavaScript' 카테고리의 다른 글
한입크기로 잘라먹는 타입스크립트 - 인터페이스와 클래스 - [인프런] (0) | 2023.07.29 |
---|---|
한입크기로 잘라먹는 타입스크립트 - 함수와 타입 - [인프런] (0) | 2023.07.29 |
한입크기로 잘라먹는 타입스크립트 - 기본타입 - [인프런] (0) | 2023.07.29 |
한입크기로 잘라먹는 타입스크립트- 소개 및 개론- [인프런] (0) | 2023.07.29 |
한입 크기로 잘라 먹는 리액트 -Promise - 콜백 지옥에서 탈출하기 + async&await- [인프런] (0) | 2023.07.17 |