jaenny.dev
article thumbnail
[타입챌린지/type-challenge] Readonly
Frontend/Type-Challenge 2023. 1. 26. 23:26

문제 T의 모든 프로퍼티를 readonly로 바꾸는 내장 제네릭 Readonly를 직접 구현하세요. 예시: interface Todo { title: string description: string } const todo: MyReadonly = { title: "Hey", description: "foobar" } todo.title = "Hello" // Error: cannot reassign a readonly property todo.description = "barFoo" // Error: cannot reassign a readonly property 풀이 type MyReadonly = { readonly [key in keyof T]: T[key]; }; readonly readonly는..

article thumbnail
[타입챌린지/type-challenge] Pick
Frontend/Type-Challenge 2023. 1. 26. 23:18

문제 제네릭 T에서 프로퍼티 K만 선택해 새로운 객체 타입을 반환하는 내장 제네릭 Pick를 구현해보세요. 예시: interface Todo { title: string description: string completed: boolean } type TodoPreview = MyPick const todo: TodoPreview = { title: 'Clean room', completed: false, } 풀이 먼저 error 케이스를 처리해 줍니다. 제네릭 K에는 객체 타입 T의 프로퍼티들만 전달되어야 합니다. 유효하지 않은 키가 들어온다면 error를 반환합니다. keyof를 사용하여 객체 타입 T의 프로퍼티들만 뽑아옵니다. 정답 type MyPick = { [key in K]: T[key]; }..

article thumbnail
[타입챌린지/type-challenge] Includes
Frontend/Type-Challenge 2023. 1. 25. 21:43

문제 JavaScript의 Array.includes 함수를 타입 시스템에서 구현하세요. 배열과 인자를 받아서 인자가 배열에 속해있다면 true를, 속해있지 않다면 false를 반환해야 합니다. 예시: type isPillarMen = Includes // expected to be `false` 풀이 type Includes = T extends [infer K, ...infer R] ? Equal extends true ? true : Includes : false; T extends [infer K, ...infer R] 배열 안에서 spread operator를 사용해서 배열 내부의 원소에 접근합니다. 배열의 첫 원소를 infer K로 변수 선언 해줍니다. Equal extends true 첫 원..

article thumbnail
[타입챌린지/type-challenge] Awaited
Frontend/Type-Challenge 2023. 1. 25. 21:14

문제 Promise와 같은 타입에 감싸진 타입이 있을 때, Promise 내부에 감싸진 타입이 무엇인지 어떻게 알 수 있을까요? 예를 들어, Promise이 있을 때 ExampleType을 어떻게 얻을 수 있을까요? type ExampleType = Promise type Result = MyAwaited // string 풀이 먼저 error를 내야하는 케이스를 고려해줍니다. 제네릭 타입으로는 Promise에 감싸진 타입 혹은, then을 메서드로 가지는 Promise와 같은 타입을 받아야 합니다. 이 경우가 아니라면 error를 내도록 Promise를 extends하도록 제네릭 T를 제한해줍니다. 그 다음 Promise 내부의 타입에 접근합니다. infer를 사용해줍니다. 먼저 T extends Pr..

-Like 타입은 뭘까? Array vs. ArrayLike / Promise vs. PromiseLike
Frontend 2023. 1. 24. 16:05

타입스크립트에는 -Like 타입이 있다. Array와 ArrayLike, Promise와 PromiseLike -Like postFix가 붙여진 타입이 왜 필요한지 알아보자. Array vs. ArrayLike Array lib.es2015.core.ts 파일에서는 Array 타입을 다음과 같이 정의하고 있다. 자주 사용하는 find, fill 등의 메소드도 찾아볼 수 있다. interface Array { /** * Returns the value of the first element in the array where predicate is true, and undefined * otherwise. * @param predicate find calls predicate once for each elem..