반응형

TypeScript 3

타입스크립트 - Mapped Types

[타입스크립트] 맵드 타입타입스크립트의 고급 타입인 맵드 타입(mapped type)이란 기존에 정의되어 있는 타입을 새로운 타입으로 변환해 주는 기능을 말한다. 예를 들어 인터페이스에 있는 모든 속성을 루프문 같이 순회해서 optional(?) 로 바꾸거나 readonly 로 지정할수 있으며 아예 지정된 타입을 바꿔서 변경된 타입을 반환할 수도 있다.   아직 맵드 타입에 대해 문법을 배우지는 않았지만 간단하게 살펴보자면 다음과 같다.interface Obj { prop1: string; prop2: string;}type ChangeType = { [K in keyof T]: number;};type Result = ChangeType;/*{ prop1: number; prop2: nu..

Frontend 2025.04.03

타입스크립트 - Conditional Types

[타입스크립트] 조건부 타입조건부 타입(conditional type)이란 입력된 제네릭 타입에 따라 타입을 결정하는 기능을 말한다.위와 같이 조건부 타입 문법은 extends 키워드와 물음표 ? 기호를 사용하는데 보자마자 삼항 연산자가 생각 났을 것이다.유추한 바와 같이 자바스크립트의 삼항 연산자는 변수의 값을 조건에 따라 결정하는 것이라면, 타입스크립트의 조건부 타입은 값 대신 타입을 조건에 따라 결정하는 것이라고 보면 된다. 위의 조건부 타입 코드 문법을 풀이해보자면 타입은 T가 U에 할당될 수 있으면 타입은 X가 되고 그렇지 않다면 타입이 Y가 된다는 것을 의미한다.착각하지 말아야 할점은 조건부 타입도 유니온처럼 하나의 타입이라는 것이다.extends 키워드가 들어가서 제네릭 꺾쇠 괄호  안에 써..

Frontend 2025.04.02

타입스크립트 - Utility Types

[타입스크립트] 유틸리티 타입TypeScript는 공통 타입 변환을 용이하게 하기 위해 몇 가지 유틸리티 타입을 제공한다.예를 들어 JS에서 배열을 다룰 때 for, while문이면 충분하겠지만 따로 forEach문이나 배열 생성하는 map, 배열요소를 찾는 find나 filter와 같이 배열을 다루는데 편리하게 이용가능한 루프 헬퍼 함수를 지원하듯이, 타입스크립트에서도 타입 변경을 쉽고 용이하게 하기위해 헬퍼함수처럼 Utility Type을 제공한다고 생각하면 된다. 유틸리티 타입을 쓰지 않더라도 기존의 인터페이스, 제네릭 등의 기본 문법으로 충분히 타입 변환이 가능하지만 유틸리티 타입을 사용하면 훨씬 더 간결한 문법으로 타입 정의가 가능할 뿐 아니라 이미 정의한 타입을 변환할 때 유용하게 쓸 수 있다..

Frontend 2025.04.02
반응형