Pandaman Blog

6. Exclude Exclude은 UnionType중에서 ExcludedMembers를 제외한 타입을 반환한다. 링크 즉 아래와 같다. type Person = { name: string; age: number; } type PersonExcludeName = Exclude; type PersonExcludeAge = Exclude; 한번 확인해보자. type Exclude = U extends E ? never : U; U extends E ? never : U 표현은 타입스크립트에서 Conditional Type 이라고 한다. U가 E를 extends 하고 있다면 never를 반환(생략)하고 아닐 겨우 타입 U를 반환한다. 7. Extract type Extract = T extends U ? T ..

Conditional Types Conditional Types은 조건에 따라서 타입 변수에 할당할 수 있는 타입을 결정할 수 있다. T extends U ? X : Y Conditional Type은 3항 연산자 구문을 사용하고 있다. T extends U 조건이 충족되면 타입 X가 되고, 그렇지 않으면 타입 Y가 된다. 한번 예제를 살펴보자. interface Animal { live(): void; } interface Dog extends Animal { woof(): void; } type Example1 = Dog extends Animal ? number : string; Dog 인터페이스는 Animal를 확장해서 생성한 타입이다. Example1를 확인해보면 Dog extends Anima..

Utility 타입에 대한 궁금증에 내부 코드를 보았고, 내부 코드를 보는 순간 아 잘 모르겠다. 라는 생각으로 Mapped types 이란 것을 공부하기로 했다. Mapped Types 자바스크립트에서 map 메서드는 배열 내의 모든 요소 각각에 대해 순회하며 새로운 배열을 반환한다. ['1', '2', '3'].map(value => Number(value)); // [1, 2, 3] map 메서드를 통해서 각 문자열을 숫자로 맵핑하여 새로운 배열을 반환했다. 타입스크립트의 mapped type도 위와 마찬가지로 타입을 순회하며 새로운 타입으로 변환하는것을 의미한다. index signature 인덱스 시그니처는 타입의 속성 이름을 잘 모르지만 값의 타입을 알 경우 사용된다. 링크 type Perso..

타입스크립트에서는 여러 유틸리티 타입을 제공한다. 이 유틸리티 타입은 Global 하게 사용가능하다. 이번 시간에는 유틸리티 타입의 종류와 왜 사용하는지? 어떻게 구현할 수 있는지 확인해 보려고 한다. 1. Partial 제네릭을 통해 넘겨받은 타입의 모든 속성을 optional로 변형해 반환하는 타입이다. 매우 간단하다. 링크 interface Person { name: string; age: number; } function introduce(person: Partial) { return `my name is ${person.name} and ${person.age} years old.` } introduce({ name: 'coo' }); introduce({ age: 33 }); i..

함수 목표 함수를 설명하는 타입을 작성하는 방법에 대해 알아보고, 실제로 어떻게 적용하면 효과적인지 알아보자. 호출 시그니쳐 타입스크립트의 함수 타입 문법을 호출 시그니처라고 부른다. 그렇다면 함수 타입 문법은 무엇일까? 우리가 흔히 사용하고 있다. 예를 들어 아래와 같이 sum이라는 함수가 있다고 가정하자. function sum(a: number, b: number) { return a + b; } 이걸 타입 문법으로 변경하면? 아래와 같이 표현할 수 있다. (a: number, b: number) => number; (a: number, b: number): number; 매우 쉽다. 화살표 함수와 매우 유사하다. 함수에 함수를 인수로 전달하거나, React에서는 컴포넌트의 props로 함수를 전달..

1. Type Guard (타입 가드) 목표 타입 가드에 대해서 학습을 통해서 타입의 안전성을 높일 수 있는 방법들에 대해 알아보자. Type Guard 란? Type guard는 TypeScript만의 독특한 기능으로, 분기한 블록 안에서 해당 변수의 타입을 한정시켜주는 기능을 말한다. 다음은 타입 가드의 방법이다. 1) typeof 타입 스크립트는 typeof 연산자를 이해할 수 있다. 즉 조건문에 typeof를 사용하면 해당 조건문 블록 내에서 해당 변수의 타입이 다르다는 것을 이해한다. 타입 스크립트 컴파일러 과정에서 typeof를 타입 가드로 이해한다. 예를 들면 아래와 같다. 링크 const trimData = (data: string | number) => { if (typeof data =..