| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 |
- collapsibletabview
- 불변식
- IAP
- 코드 푸시
- 정처기 자격
- 타입스크립트
- DDD
- 이펙티브 타입스크립트
- rniap
- Expo
- in app purchase
- rn
- typeScript
- expo updates
- ui thread
- js
- BOUNDED CONTEXT
- HTML
- 비동기
- 속도개선
- React Native
- sharedvalue
- react natvie
- 빌딩 블록
- TS
- 애그리게이트
- nextJS
- 정처기 준비물
- Aggregate
- 정보처리기사
- Today
- Total
nika-blog
타입추론 - 이펙티브 타입스크립트 본문
19. 추론 가능한 타입을 사용해 장황한 코드 방지하기
타입 추론의 장점
리팩토링에 용이하다.
타입 추론을 잘 이용하는 법
새로운 변수 선언대신 비구조화 할당문 사용
-> 모든 지역 변수의 타입 추론
타입스크립트가 스스로 타입을 판단하기 어려운 경우
매개변수
- 타입스크립트에서 변수의 타입은 처음 등장할 때 결정. 최종 사용처까지 고려되지 않기 때문이다.
- 생략하는 경우
- 기본값이 있는 경우
함수의 반환
- 타입 추론이 가능할지라도 구현상의 오류가 함수를 호출한 곳까지 영향을 미치지 않도록 하기 위해서
- 구현상의 오류가 사용자 코드의 오류로 표시되지 않음
객체 리터널 정의
- 추론 가능하지만, 타입 구문을 명시하면 실제로 실수가 발생한 부분에 오류 표시
Linter
eslint 규칙 중 no-inferrable-types 을 사용해서 작성된 모든 타입 구문이 정말로 필요한지 확인 가능하다.
20. 다른 타입에는 다른 변수 사용하기
자바스크립트 : 한 변수를 다른 목적을 가지는 다른 타입으로 재사용가능하다.
타입스크립트 : 변수의 값은 바뀔 수 있지만 그 타입은 보통 바뀌지 않는다는 관점에 의해 오류 발생
-> 해결 : 유니온 타입 사용해서 확장
-> 문제 : 사용할 때마다 어떤 타입인지 확인해야 해서 다루기가 더 어렵다.
다른 타입에는 별도의 변수를 사용하는 게 바람직한 이유
- 서로 관련이 없는 두 개의 값을 분리합니다.
- 변수명을 더 구체적으로 지을 수 있습니다.
- 타입 추론을 향상시키며, 타입 구문이 불필요해집니다.
- 타입이 좀 더 간결해집니다.
- let 대신 const 로 변수를 선언하게 됩니다. const로 변수를 선언하면 코드가 간결해지고 타입체커가 타입을 추론하기도 좋습니다.
21. 타입 넓히기
넓히기 과정을 제어할 수 있는 방법
- const로 변수 선언하기
타입 추론의 강도 제어
- 명시적 타이 구문 제공
- 타입 체커에 추가적인 문맥 제공
ex. 함수의 매개변수로 값을 전달 - const 단언문 사용
값 뒤에 as const 를 작성하면 타입스크립트는 최대한 좁은 타입으로 추론합니다.
22. 타입 좁히기
- null 체크
- instaceof 사용
- Array.isArray
- 명시적 태그 붙이기
type AppEvent = UploadEvent | DownloadEvent;
function handleEvent(e: AppEvent) {
switch (e.type) {
case 'download':
e; // 타입이 DownloadEvent
break;
case 'upload':
e; // 타입이 UploadEvent
break;
}
}
23. 한꺼번에 객체 생성하기
- 객체를 한번에 정의하는 것이 좋습니다.
- 객체를 반드시 제각각 나눠서 만들어야 한다면, 타입 단언문을 사용해 타입 체커를 통과할 수 있습니다.
- 또한 spread 연산자를 이용하여 작은 객체 n개로 큰 객체를 생성할 수도 있습니다. 이때, 모든 업데이트마다 새 변수를 사용하여 각각 새로운 타입을 얻도록 하는게 중요합니다.
24. 일관성 있는 별칭 사용하기
별칭은 타입스크립트가 타입을 좁히는 것을 방해합니다. 따라서 변수에 별칭을 사용할 때는 일관되게 사용해야 합니다.
25. 비동기 코드에는 콜백 대신 async 함수 사용하기
병렬로 페이지를 로드하고 싶다면 Promise.all을 사용해서 프로미스 조합 가능
async function fetchPages() {
const [response1, response2, response3] = await Promise.all([
fetch(url1),
fetch(url2),
fetch(url3),
]);
// ...
}
선택의 여지가 있다면 일반적으로는 프로미스를 생성하기보다는 async/await 를 사용해야 합니다.
<이유 >
- 일반적으로 더 간결하고 직관적인 코드가 됩니다.
- async 함수는 항상 프로미스를 반환하도록 강제됩니다.
async 함수에서 프로미스를 반환하면 또 다른 프로미스로 래핑되지 않습니다. = Promise<T>
26. 타입 추론에 문맥이 어떻게 사용되는지 이해하기
27. 함수형 기법과 라이브러리로 타입 흐름 유지하기
내장형 함수형 기법들과 로대시 같은 라이브러리에 타입 정보가 잘 유지되는 이유
-> 함수 호출 시 전달된 매개변수 값을 건드리지 않고 매번 새로운 값을 반환함으로써 새로운 타입으로 안전하게 반환.
참고: 이펙티브 타입스크립트

http://www.yes24.com/Product/Goods/102124327
이펙티브 타입스크립트 - YES24
타입스크립트는 타입 정보를 지닌 자바스크립트의 상위 집합으로, 자바스크립트의 골치 아픈 문제점들을 해결해 준다. 이 책은 《이펙티브 C++》와 《이펙티브 자바》의 형식을 차용해 타입스
www.yes24.com
'FE > typescript' 카테고리의 다른 글
| any다루기 - 이펙티브 타입스크립트 (0) | 2023.02.28 |
|---|---|
| 타입설계 - 이펙티브 타입스크립트 (0) | 2023.02.14 |
| 타입스크립트의 타입 시스템1 - 이펙티브 타입스크립트 (0) | 2023.02.02 |
| 타입스크립트의 타입시스템2 - 이펙티브 타입스크립트 (0) | 2023.02.02 |
| 타입스크립트 알아보기 - 이펙티브 타입스크립트 (0) | 2022.12.27 |