Typescript Study 5

러닝 타입스크립트 - 3장. 유니언과 리터럴

유니언(Union): 값에 허용된 타입을 두 개 이상의 가능한 타입으로 확장하는 것 내로잉(Narrowing): 값에 허용된 타입이 하나 이상의 가능한 타입이 되지 않도록 좁혀가는 것 1. 유니언 타입으로 두 개 이상의 타입 중 하나일 수 있는 값을 나타내는 방법 let math = Math.random() > 0.5 ? undefined : "math" //math type: string | undefined 이거 혹은 저거인 타입을 유니언 타입이라고 함 ` | (수직선 연산자)`를 이용해서 표시한다. 2. 타입 어노테이션으로 유니언 타입을 명시적으로 표시하는 방법 변수에 대한 명시적 타입 어노테이션을 제공하는 것이 유용할 때 사용하며, 사용자가 잠재적으로 다른 타입이 될 수 있음을 알고 있을 때 타입..

Frontend/Typescript 2023.07.04

러닝 타입스크립트 - 2장. 타입 시스템

1. '타입' 정의 - 타입(Type) : 자바스크립트에서 다루는 값의 형태 (값의 속성/메서드/내장되어 있는 type of 연산자) - 타입스크립트가 인식하는 원시 타입 (7가지) string number bigint boolean symbol null undefined - 타입스크립트는 구문에서 변수나 함수의 타입을 유추할 만큼 충분히 똑똑하다. 2. 타입 시스템 - 타입스크립트의 타입 시스템이 코드를 이해하는 방법 코드를 읽고 존재하는 모든 타입과 값을 이해한다. 각 값이 초기 선언에서 가질 수 있는 타입을 확인한다. 각 값이 추후 코드에서 어떻게 사용될 수 있는지 모든 방법을 확인한다. 값의 사용법이 타입과 일치하지 않으면 사용자에게 오류를 표시한다. 타입 추론 과정을 살펴보자. 다음은 속성을 잘..

Frontend/Typescript 2023.07.01

아이템 16. number 인덱스 시그니처보다는 Array, 튜플, ArrayLike 사용하기

자바스크립트에서 객체의 키는 보통 '문자열'이다. 배열은 객체이기 때문에, Object.keys를 이용해서 배열의 키를 나열할 수도 있다. 배열의 인덱스를 나열해보면 문자열로 변환되는 것을 쉽게 알 수 있다. 타입스크립트에서는 이러한 혼란을 방지하기 위해 숫자 'Key(키)'를 허용하고, 문자열 키와 다른 것으로 인식한다. interface Array { ... [n: number]: T; } 런타임 시점에서는 키를 모두 문자열로 인식할 것이므로, 이 코드는 타입 체크 시점에 오류를 잡는 용도로 사용할 수 있겠다. ** 여기서 사용된 number 타입은 버그를 잡기 위한 순수 타입스크립트 코드임을 명심하자! ** const x = [1, 2, 3]; const keys = Object.keys(x); c..

Frontend/Typescript 2023.04.23

아이템 15. 동적 데이터에 인덱스 시그니처 사용하기

타입스크립트에서는 타입에 '인덱스 시그니처'를 사용해서 유연하게 매핑을 표현할 수 있다. 예를 들어보자. 아래 객체는 키(key)값 만 다를 뿐 키와 쌍을 이루고 있는 값(value) 의 타입은 모두 'string'으로 동일하다. const rocket = { name: 'Falcon 9' variant: 'Block 5' thrust: '7,607 kN', }; 따라서 객체의 타입을 다음과 같이 정의할 수 있다. type RocketType = {[property: string]:string}; const rocket:RocketType = {..} //정상 [property: string]: string 이 형태가 인덱스 시그니처이며, 다음과 같은 특징을 가진다. 1. key의 이름 : 키의 위치만 ..

Frontend/Typescript 2023.04.22

아이템14. 타입 연산과 제네릭 사용으로 반복 줄이기

타입 중복은 간과하기 쉽지만 코드 중복만큼 많은 문제를 일으키며, 불필요하게 코드 라인을 늘리게 되는 원인 중 하나이기도 하다. interface Person { firstName: string; lastName: string; } interface PersonWithBirthDate { firstName: string; lastName: string; birth: Date; } 위 예시를 살펴보자. Person 타입과 PersonWithBirthDate 타입은 언뜻 보기에도 굉장히 유사하다. PersonWithBirthDate를 Person의 확장개념으로 보면 아래와 같이 중복을 제거할 수 있게 된다. interface PersonWithBirthDate extends Person { birth: Da..

Frontend/Typescript 2023.04.22