TypeScript
-
[TS] 이펙티브 타입스크립트 : 2장 - 타입스크립트의 타입 시스템 (3)TypeScript 2022. 3. 24. 01:24
아이템 15 : 동적 데이터에 인덱스 시그니처 사용하기 타입스크립트에서는 타입에 '인덱스 시그니처'를 명시하여 유연하게 매핑을 표현할 수 있다. type Person = { [property: string]: string }; const person: Person = { name: 'jiwon'; phone: '010-1234-5678'; }; // OK 인덱스 시그니처 해석 : [property: string]: string → 키의 이름 : 키의 위치만 표시하는 용도 [property: string]: string → 키의 타입 : string, number, symbol 조합이어야 하며, 보통 string 사용 [property: string]: string → 값의 타입 : 어떤 타입이든 가능 인..
-
[TS] 이펙티브 타입스크립트 : 2장 - 타입스크립트의 타입 시스템 (2)TypeScript 2022. 3. 17. 16:11
아이템 11 : 잉여 속성 체크의 한계 인지하기 객체 리터럴을 변수에 할당하거나 함수에 매개변수로 전달할 때 잉여 속성 체크가 수행된다. 잉여 속성 체크는 해당 타입의 속성이 있는지, 그리고 '그 외의 속성은 없는지' 확인하는 과정을 뜻한다. 이는 타입스크립트에서 일반적으로 수행되는 '구조적 할당 가능성 체크'와는 별도로 이루어지는 동작이다. 잉여 속성 체크는 타입이 명시된 변수에 객체 리터럴을 할당할 때 실행된다. 이를 이용하면 객체 리터럴에 알 수 없는 속성을 허용하지 않음으로써, 아래와 같은 문제점을 해결할 수 있다. interface Docs { title: string; } /* 객체를 할당할 경우 나타나는 문제점 1 */ const obj = { title: 'Hello', subTitle: ..
-
[TS] 이펙티브 타입스크립트 : 2장 - 타입스크립트의 타입 시스템 (1)TypeScript 2022. 2. 28. 18:52
아이템 6 : 편집기를 사용하여 타입 시스템 탐색하기 편집기에서 타입스크립트 언어 서비스를 적극 활용해야 한다. 언어 서비스에는 코드 자동 완성, 명세(사양, specification) 검사, 검색, 리팩터링이 포함된다. 편집기를 사용하면 어떻게 타입 시스템이 동작하는지, 그리고 타입스크립트가 어떻게 타입을 추론하는지 개념을 잡을 수 있다. 일반적으로 심벌 (변수, 함수) 위에 마우스 커서를 대면 타입스크립트가 그 타입을 어떻게 판단(추론)하고 있는지 확인할 수 있다. 만약 타입이 기대한 것과 다르거나, 튜플 타입이어야 한다면 타입 구문을 명시해야 한다. 타입 오류를 살펴보는 것도 타입 시스템의 성향을 파악하는 데 좋은 방법이다. 언어 서비스는 'Go to Definition' 기능을 제공한다. 이는 라..
-
[TS] 이펙티브 타입스크립트 : 1장 - 타입스크립트 알아보기TypeScript 2022. 2. 3. 19:01
아이템 1 : 타입스크립트와 자바스크립트의 관계 이해하기 타입스크립트는 자바스크립트의 상위집합(superset)이다. 자바스크립트 프로그램에 문법 오류가 없다면, 유효한 타입스크립트 프로그램이라고 할 수 있다. 반면, 자바스크립트 프로그램에 어떤 이슈가 존재한다면 문법 오류가 아니더라도 타입 체커에게 지적당할 가능성이 높다. (문법의 유효성과 동작의 이슈는 독립적인 문제) 모든 자바스크립트 프로그램이 타입스크립트라는 명제는 참이지만, 그 반대는 성립하지 않는다. 타입 스크립트가 타입을 명시하는 추가적인 문법을 가지기 때문이다. function introduce(name: string) { // SyntaxError: Unexpected token : console.log('Hello, My name is..