타입스크립트
-
아이템 24 - 일관성 있는 별칭 사용하기타입스크립트 2023. 3. 14. 21:02
interface Coordinate { x: number; y: number; } interface BoundingBox { x: [number, number]; y: [number, number]; } interface Polygon { exterior: Coordinate[]; holes: Coordinate[][]; bbox?: BoundingBox; } function isPointInPolygon(polygon: Polygon, pt: Coordinate) { if (polygon.bbox) { if (pt.x polygon.bbox.x[1] || pt.y polygon.bbox.y[1]..
-
아이템 23 - 한꺼번에 객체 생성하기타입스크립트 2023. 3. 14. 20:39
변수에 객체를 할당하는 방법 자바스크립트에서는 객체를 생성할 때 다음과 같이 생성할 수 있습니다. const pt = {}; pt.x = 3; pt.y = 4; 하지만 위의 예제를 타입스크립트에서 사용하면 다음과 같은 오류가 발생합니다. const pt = {}; pt.x = 3; // ~ Property 'x' does not exist on type '{}' pt.y = 4; // ~ Property 'y' does not exist on type '{}' 따라서 타입스크립트에서는 객체를 생성할 때, 속성을 하나씩 추가하기보다는 여러 속성을 포함해서 한꺼번에 생성하는 것이 좋습니다. 타입스트립트에서 객체 생성 방법 타입 선언 활용 (type 키..
-
아이템 22 - 타입 좁히기타입스크립트 2023. 3. 14. 18:05
여러가지 타입이 가능할 때, 문맥에 따라 특정 타입으로 추론하게 하는 방법 타입 좁히기는 타입스크립트가 넓은 타입으로부터 좁은 타입으로 추론하는 과정을 말하는데, 다음과 같은 방법으로 타입을 좁힐 수 있습니다. 조건문 const el = document.getElementById('foo'); // Type is HTMLElement | null if (el) { el // Type is HTMLElement } else { el // Type is null } 예외를 던지거나 함수를 반환(early return) // 예외를 던지는 방법 const el = document.getElementById('foo'); // Type is HTMLElement | null if (..
-
아이템 21 - 타입 넓히기타입스크립트 2023. 3. 14. 17:20
타입스크립트에서는 타입을 추론할 때, 지정된 단일 값을 가지고 할당 가능한 값들의 집합을 유추합니다. 이러한 과정을 넓히기(widening)라고 부릅니다. 넓히기 과정에서는 일반적으로 변수가 선언된 후로는 타입이 바뀌지 않는 것을 가정하고 명확성과 유연성 사이의 균형을 유지해서 타입을 추론하려고 합니다. 원시값의 넓히기 과정 예시 let x = 'x'; 변수 x 에는 타입을 명시하지 않았으므로 타입스크립트는 타입 추론을 하게 되는데, 할당 가능한 값들의 집합에는 다음과 같은 후보군이 존재합니다. any string 'x' 일반적으로 타입을 추론할 때, 변수가 선언된 후로는 타입이 바뀌지 않는 것을 가정하기 때문에 위 후보군 중에서 any 타입은 다른 타입도 할당할 수 있어 후..
-
아이템 20- 다른 타입에는 다른 변수 사용하기타입스크립트 2023. 3. 14. 15:35
타입스크립트에서는 변수에 값을 재할당할 때, 변수를 초기화할 때 지정한 타입과 다른 타입의 값을 할당하면 오류가 발생합니다. function fetchProduct(id: string) { /* ... */ } function fetchProductBySerialNumber(id: number) { /* ... */ } let id = "12-34-56"; fetchProduct(id); id = 123456; // '123456' is not assignable to type 'string'. fetchProductBySerialNumber(id); // ~~ Argument of type 'string' is not assignable to // parame..
-
아이템 19 - 추론 가능한 타입을 사용해 장황한 코드 방지하기타입스크립트 2023. 3. 14. 08:18
타입 추론이란? 타입스크립트에서 타입 구문을 명시하지 않는다면, 일반적으로 변수의 타입 혹은 함수가 반환하는 타입은 처음 등장할 때 결정되는데, 이것을 타입 추론이라고 합니다. 변수의 타입을 명시하지 않고 값을 할당할 경우 let x = 12; // number 타입으로 추론 const person = { name: 'Sojourner Truth', born: { where: 'Swartekill, NY', when: 'c.1797', } }; // { name: string; born: { where: string; when: string; }; } 타입으로 추론 함수의 반환 타입을 명시하지 않았을 경우 function square(nums: number[])..
-
아이템 13 - 타입과 인터페이스의 차이점 알기타입스크립트 2023. 3. 7. 09:28
타입스크립트에서 명명된 타입을 정의하는 방법은 두 가지가 있다. 타입을 사용하는 방법 type TState = { name: string; capital: string; } 인터페이스를 사용하는 방법 interface IState { name: string; capital: string; } 대부분의 경우에는 타입을 사용해도 되고 인터페이스를 사용해도 되는데, 타입과 인터페이스 사이에 존재하는 차이를 분명하게 인식함으로써 같은 상황에서 동일한 방법으로 명명된 타입을 정의해 코드의 일관성을 유지할 수 있도록 해야한다. 인터페이스 선언과 타입 선언의 비슷한 점 잉여 속성 체크할 수 있다. // type 키워드를 사용할 경우 type TState = { name: string; capital: string; ..
-
아이템 12 - 함수 표현식에 타입 적용하기타입스크립트 2023. 3. 7. 09:27
자바스크립트에서 함수를 선언하려면 다음 중 한 가지 방식을 선택할 수 있다. 함수 문장 (statement) function rollDice1(sides) { /* ... */ } // Statement 함수 표현식 (expression) const rollDice2 = function(sides) { /* ... */ }; // 무기명 함수를 변수에 할당 const rollDice3 = (sides) => { /* ... */ }; // 화살표 함수를 변수에 할당 타입스크립트에서 함수를 선언할 때, 함수 문장보다는 함수 표현식을 사용하는 것이 더 좋은데 이유는 다음과 같다. 함수 시그니처를 함수 표현식에 사용할 수 있기 때문에 불필요한 코드의 반복을 줄일 수 있다. 함수 구현부와 타입 선언부가 분리되어..