TypeScript
-
이펙티브 타입스크립트- 4장 타입설계 (2)TypeScript 2022. 4. 25. 23:37
아이템 31. 타입 주변에 null 값 배치하기 strictNullChecks 설정을 한 경우 null이나 undefined에 대한 처리가 많아 지지만 null에 대한 문제점을 찾을 수 있기에 꼭 필요하다. function extend(nums: number[]) { let min, max; // type : undefined for(const num of nums) { if(!min) { min = num; max = num; } else { min = Math.min(min, num); max = Math.max(max, num); // error : max is undefined } return [min, max]; } 위 코드는 타입 체커를 통과하고(strictNullChecks없이), 반환 타..
-
이펙티브 타입스크립트- 4장 타입설계 (1)TypeScript 2022. 4. 24. 22:10
아이템 28. 유효한 상태만 표현하는 타입을 지향하기 타입을 잘 설계하면 코드를 직관적으로 작성할 수 있는 반면 엉망이라면 어떠한 기억이나 문서도 도움이 되지 못한다. 아래의 예시를 통해 잘못된 타입 설계를 알아보자. 예시는 페이지를 선택하면 페이지의 내용을 로드하고 화면에 표시한다. interface State { pageText: string; isLoading: boolean; error?: string; } //페이지 그리는 함수 function renderPage(state: State) { if(state.error) { return `Error!` } else if (state. isLoading) { return `Loading` } return `Render` } // 위 코드의 문제점..
-
이펙티브 타입스크립트- 3장 타입추론 (5)TypeScript 2022. 4. 23. 11:34
아이템 26. 타입 추론에 문맥이 어떻게 사용되는지 이해하기 타입스크립트는 타입을 추론할 때 단순히 값만 고려하지 않고 값이 존재하는 곳의 문맥까지 살핀다. 그런데 문맥을 고려해 타입을 추론하면 가끔 값이 이상하게 나온다. function setLanguage(language) { /*...*/ } setLanguage('JavaScript'); // 정상 let language = 'JavaScript'; setLanguage(language); // 정상 type Language = 'JavaScript' | 'TypeScript' | 'Python'; function setLanguage(language: Language) { /*...*/ } setLanguage('JavaScript'); /..
-
이펙티브 타입스크립트- 3장 타입추론 (4)TypeScript 2022. 4. 18. 20:55
아이템 24. 일관성 있는 별칭 사용하기 객체의 프로퍼티를 코드 내에서 간결하게 사용하기 위해 별칭(Alias)을 추가하는 경우, 일관되지 않은 이름으로 혼란을 줄 수 있다. function isPointInPolygon(polygon: Polygon, pt: Coordinate) { const box = polygon.bbox; // bbox, box라는 서로 다른 이름이 쓰이고 있다. if (box) { // ... } } 일관된 이름을 사용하기 위해서는 구조분해 할당(destructuring)을 사용하는 것이 좋다. 단, 여전히 별칭을 사용하고 있기 때문에, polygon.bbox와 지역변수 bbox의 타입은 같더라도 값은 서로 달라질 수 있다는 점을 알아두자. function isPointIn..
-
이펙티브 타입스크립트- 3장 타입추론 (3)TypeScript 2022. 4. 17. 17:17
아이템 22. 타입 좁히기 타입 좁히기는 타입 넓히기의 반대로 타입스크립트가 넓은 타입으로부터 좁은 타임으로 진행하는 과정이다. // 1. 가장 일반적인 예시인 null check const el = document.getElementById('foo'); // 타입이 HTMLElement | null if (el) { el // 타입이 HTMLElement el.innerHTML = 'Party Time'.blink(); } else { el // 타입이 null alert('No element #foo'); } // 2. 예외 던져서 타입 좁히기 const el = document.getElementById('foo'); // 타입이 HTMLElement | null if (!el) throw ne..
-
이펙티브 타입스크립트- 3장 타입추론 (2)TypeScript 2022. 4. 10. 12:35
아이템 20. 다른 타입에는 다른 변수 사용하기 한 변수를 다른 타입으로 재사용해도 되는 자바스크립트와 달리 타입스크립트는 에러가 난다. let id = '12-34-56'; fetchProduct(id); // string으로 사용 id = 123456; // '123456' 형식은 'string'형식에 할당할 수 없습니다. fetchProductBySerialNumber(id); // number로 사용 //'string' 형식의 인수는 'number' 형식의 매개변수에 할당될 수 없습니다. 이때 에러를 고치기 위해서는 id가 string과 number를 모두 포함할 수 있도록 string | number로 유니온 id 타입을 사용해 확장할 수 있다. let id: string|number = '1..
-
이펙티브 타입스크립트- 3장 타입추론 (1)TypeScript 2022. 4. 3. 14:47
아이템 19. 추론 가능한 타입을 사용해 장황한 코드 방지하기 타입스크립트를 처음 접한 개발자는 변수를 선언할 때마다 타입을 명시해야 한다고 생각하여 모든 변수에 타입을 선언하는 실수를 자주 범한다. //X let x:number = 12; 다음처럼만 해도 충분하다. //O let x = 12; 편집기에 x에 마우스를 올려 보면, 타입이 이미 number로 추론되어 있음을 확인할 수 있다. 타입 추론이 된다면 명시적 타입 구문은 필요하지 않다. 아래 예시를 보자. Product 타입과 기록을 위한 함수를 작성했는데 나중에 id에 문자가 들어 있음을 알게 됐다. interface Product { id: number; name: string; price: number; } interface Product..
-
이펙티브 타입스크립트- 2장 타입시스템 (4)TypeScript 2022. 4. 2. 23:37
아이템 15. 동적 데이터에 인덱스 시그니처 사용하기 자바스크립트 객체는 문자열 키를 타입의 값에 관계없이 매핑한다. 타입스크립트에서는 타입에 인덱스 시그니처를 명시하여 유연하게 매핑을 표현할 수 있다. type Rocket = {[property: string]: string}; const rocket: Rocket = { name: 'Falcon 9', variant: 'v1.0', thrust: '4,940 kN', }; // 정상 인덱스 시그니처는 다음 타입 문법을 의미한다. type Rocket = {[property: string]: string}; const rocket: Rocket = { name: 'Falcon 9', variant: 'v1.0', thrust: '4,940 kN', ..