전체 글
TS026. 타입스크립트 오브젝트의 Key-Value Mapping 알아보기
타입스크립트의 키 값 매핑 (Key-Value Mapping) 타입스크립트엔 키-값 매핑이라는 개념이 존재한다. 특정 타입의 키와 다른 타입의 값을 통해 타입을 정의할 수 있는 강력한 기능이다. 일반적으로 아래와 같은 문법을 띈다. interface MyObject { [key: KeyType]: ValueType; } 예제: 키-값 매핑으로 이전 타입 재활용하기 아래와 같이 User 타입, Post 타입, ApiResponse 타입을 정의했다. 여기서 UserApiResponse 라는 더 구체적인 타입을 새로 정의해야 하는데, 이 때 키-값 매핑을 활용하여 ApiResponse 에서 정의했던 내용을 재활용 할 수 있다. type User = { name: string; age: number; nickn..
TS025. 타입스크립트 옵셔널 vs Type | Undefined 의 차이
Optional vs Or undefined 옵셔널의 타입 추론이 number | undefined 로 되는데, 그러면 실제로 number | undefined 라고 쓰는 것과 무슨 차이일까? // 옵셔널 이용 interface Person1 { name: string; age?: number; } // 옵셔널 이용하지 않음 interface Person2 { name: string; age: number | undefined; } 아래 보면 추론된 타입이 number | undefined 인 것을 볼 수 있다. 결과 옵셔널을 이용하면 프로퍼티 입력 자체를 생략 가능하다. 옵셔널을 이용하지 않고 number | undefined 를 이용하면 undefined 를 입력하더라도 무조건 입력을 해야 한다. c..
TS024. 타입스크립트 중첩된 오브젝트 사용 시 주의점 (Nested Object)
중첩된 오브젝트 (Nested Object) 객체 안에 또 다른 객체가 있는 것을 중첩된 객체라고 한다. 중첩된 객체에서 유의해야 할 것은 중첩된 내부 객체를 잘 나누어줘야 나중에 디버깅할 때 훨씬 쉽고 재사용이 가능하다는 것이다. // 직접 Nested 정의하기 type Person = { address: { postalCode: number; detail: string; }; name: { firstName: string; lastName: string; }; }; const person: Person = { address: { postalCode: 111, detail: "서울특별시", }, name: { firstName: "jake", lastName: "seo", }, }; // 에러 내용 읽..
TS023. 타입스크립트 객체 초과 프로퍼티 검사 정리
초과 속성 검사 타입스크립트는 객체에 초과되거나 예상치 못한 프로퍼티가 있는지 검사한다. 예상보다 많은 프로퍼티가 있는 경우 오류를 포착하도록 설계됐다. 초과 프로퍼티 검사 예시 객체 리터럴 타입스크립트는 객체 리터럴의 초과 프로퍼티에 대해 가장 엄격하다. interface Person { name: string; age: number; } // 에러: nationality 라는 초과 프로퍼티가 발견됐다. let person: Person = { name: "Alice", age: 30, nationality: "Canadian", // 초과 프로퍼티 }; 초과 프로퍼티 검사가 느슨한 경우 변수 할당 변수 할당의 경우 초과 프로퍼티 검사에 느슨하다. 타입 Narrowing 이 되는 경우 할당이 가능하다...
TS022. 타입스크립트 튜플 정리
튜플이란? 길이와 타입을 알고 있는 배열의 한 유형을 말한다. ex) 좌표는 2의 길이를 가진 number 타입 배열로 [number, number] 로 표현 가능하다. 튜플은 일반 배열과 달리 길이에 대한 정보를 알고 있으므로 범위를 넘어서는 인덱스에 접근했을 때 컴파일 타임에 에러가 표기된다. 당연히 일반 배열처럼 디스트럭처링도 가능하다. 튜플에는 옵셔널 요소가 있을 수 있다. 특정한 형태로 된 고정된 데이터 구조를 나타내거나 DB 행과 같은 것을 나타낼 때 매우 유용하다. 기본 튜플 선언 방법 const tuple: [number, string] = [30, "Jake"]; tuple.push("abc"); // push 로 수정이 된다는 게 흠임 let person: [string, number]..
TS021. 타입스크립트 다차원 배열
타입스크립트 다차원 배열 타입스크립트 다차원 배열은 일반 타입스크립트 배열과 엄청나게 차이가 나진 않는다. 결국 array([]) 표시를 몇개를 해주냐가 다른 것이지 작동 방식은 일반 array 와 똑같다. const twoDArr: number[][] = [ [1, 2, 3], [4, 5, 6], ]; const twoDArr2: (string | number)[][] = [ [1, 2, 3], ["4", "5", "6"], ]; for (const arr of twoDArr) { for (const e of arr) { e; // number 로 타입 추론이 잘 됨 } }
TS020. 자바스크립트 배열의 문제점과 타입스크립트 배열의 특징
자바스크립트 배열의 문제점: 의도치 않은 동작 초래 타입스크립트와 비교했을 때 타입이 없다. 가끔 의도치 않은 동작을 초래할 수 있다. 자바스크립트 코드는 간혹 HTML Input Element 와 같은 곳에서 들어온 정제되지 않은 입력값을 타입과 상관없이 넣었다가 의도치 않은 연산을 초래할 수 있다. ex) number 와 string 타입의 + 연산 자체는 문제 없지만 기대했던 값이 나오지 않을 수 있다. let numbers = [1, 2, 3]; numbers.push(4); // OK numbers.push("5"); // OK, but may lead to unexpected behavior since the array is now mixed type let numbers: number[] =..
TS019. 타입스크립트 never 타입
Never 타입 never 타입을 보게되는 경우는 크게 두가지가 있다. 함수의 반환 값으로 보게 되는 경우 잘못된 인터섹션을 진행한 경우 함수의 반환 값으로 never 가 나오는 경우 함수에서 에러를 던지는 경우 function throwError(): never { throw Error(); } 무한루프가 끝나지 않는 경우 function infiniteLoop(): never { while (true) {} } 존재할 수 없는 인터섹션이 있는 경우 string 과 number 의 intersection 은 존재하지 않는다. never 가 된다. type never = string & number;
TS018. 타입스크립트 Unknown 타입과 Any 타입 비교
Unknown 타입 any 와 동작이 흡사하여 주로 any 와 비교된다. any 는 유형 검사를 우회한다. 반면, unknown 은 값에 대한 연산을 수행하기 전에 명시적 assertion 혹은 narrowing 을 통해 타입 안정성을 유지하는 것이 가능하다. unknown 은 타입스크립트 3.0 에서 도입되어, any 대신 사용했을 때 안정성이 더 뛰어나다. any, unknown 타입에 다른 값을 할당하는 예시 두 타입으로 선언된 변수라면 어떤 primitive 타입의 값이든 할당이 가능하다. let unknown: unknown; unknown = "ab"; // string 할당 unknown = 123; // number 할당 let any: any; any = "ab"; // string 할당..
TS017. 타입스크립트에서 Any 타입 사용의 문제점
Any 타입의 문제점 1: 타입 세이프티가 손실된다. Silent Type Errors: 컴파일 타임 타입 검사에서 에러를 받아보지 못하고 런타임에 에러가 발생하게 된다. 서비스 운영에 치명적이다. Masking Bugs: 타입 에러는 종종 잠재적 버그를 나타내주는 지표가 되는데 이런 지표가 마비된다. 결국 디버깅하기 어려운 버그가 발생할 수 있다. function addNumbers(a: any, b: any) { return a + b; } const result = addNumbers("10", 5); // Expected number, but gets string "105" 2: 자동완성과 툴링에 있어서 손해를 많이 본다. 아래와 같이 any 타입으로 변수를 선언하면 IDE 에서 primitive..
TS016. 타입스크립트 타입, 인터페이스 상속과 오버라이딩
인터페이스와 타입의 상속 타입스크립트에서 interface 와 type 둘 다 상속 기능이 있다. 사실 type 의 경우엔 extends 키워드를 직접 이용하는 것은 아니지만 거의 흡사하다. 인터페이스 상속 인터페이스 상속은 여타 언어처럼 extends 를 통해 가능하다. interface Person { name: string; age: number; } // 상속 가능 interface User extends Person { id: string; } const user: User = { id: "abc", name: "김모씨", age: 10, }; 타입 상속 타입의 상속은 intersection(&) 을 통해 가능하다. type PersonT = { name: string; age: number; ..
TS015. 타입스크립트에서 타입과 인터페이스의 차이
타입과 인터페이스의 차이 interface 는 시기상 type 보다 나중에 등장했다. 그렇다고 interface 가 type 의 상위호환은 아니고 각자만의 역할이 존재한다. 오브젝트 선언 방법 알아보기 type 의 경우 일반 자바스크립트에서 오브젝트를 선언하는 것과 흡사하다. 함수의 시그니처를 선언할 때는 표현식처럼 선언한다. // 일반 오브젝트 선언 type t = { x: number; y: number; }; // 함수 시그니처 type t = (x: number, y: number) => number; // 오브젝트 메서드 type t = { foo(x: number): number; }; interface 의 경우 인터페이스도 일반 자바스크립트에서 오브젝트를 정의하는 것과 흡사하게 선언한다. 타..