jaenny.dev
article thumbnail
[타입챌린지/type-challenge] RequiredByKeys
Frontend/Type-Challenge 2023. 1. 31. 22:05

문제 인자로 T와 K 두 개를 받는 제네릭 타입 RequiredByKeys을 구현하세요. K는 T의 프로퍼티들로 필수 타입이 되어야 합니다. K가 전달되지 않는다면, Required와 동일하게 T의 모든 프로퍼티들을 필수로 만들어야 합니다. 예시: interface User { name?: string age?: number address?: string } type UserRequiredName = RequiredByKeys // { name: string; age?: number; address?: string } 풀이 먼저 error 케이스부터 처리해줍니다. K에는 T의 프로퍼티들만 전달되어야 합니다. 따라서 K extends keyof T 로 K의 값을 제한해줍니다. K로 인자가 전달되면 K를 필..

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..

article thumbnail
[타입챌린지/type-challenge] First of Array
Frontend/Type-Challenge 2023. 1. 23. 17:54

문제 배열 타입 T를 받아 그 배열의 첫 번째 원소의 타입을 리턴하는 제네릭 First를 구현하세요. type arr1 = ['a', 'b', 'c'] type arr2 = [3, 2, 1] type head1 = First // expected to be 'a' type head2 = First // expected to be 3 풀이 문제에서 배열 타입 T를 받는다고 했으니, 대괄호 안에는 any\[\]를 extends해야 한다. 여기까지 하면 errors의 빨간 줄이 사라진다. 이제 첫 번째 원소에 접근한다. TypeScript에서도 index를 활용해서 배열의 요소에 접근할 수 있다. 하지만 이 경우 빈 배열일 때의 예외처리가 불가능하다. 정답 스터디원들의 풀이가 포함되어있습니다! // =====..

article thumbnail
[타입챌린지/type-challenge] Hello World
Frontend/Type-Challenge 2023. 1. 23. 17:42

문제 HelloWorld 타입이 string이 되어야 합니다. // string이 되어야 합니다. type HelloWorld = any 풀이 // ============= Test Cases ============= import type { Equal, Expect, NotAny } from "./test-utils"; type cases = [Expect, Expect]; // ============= Your Code Here ============= type HelloWorld = string; // expected to be a string