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
[VSCode Extension] 타입챌린지 vscode에서 풀기
Tools & Productivity 2023. 1. 23. 19:20

타입챌린지를 매번 Github 레포지토리 → TypeScript Playground 가서 푸는건 귀찮다. 그럴 때 유용한 VSCode Extension ✨ 타입챌린지 문제들을 VSCod에서 바로 확인하고 VSCode 에디터를 활용해 풀 수 있다. 설치하면 왼쪽 사이드바에서 문제를 바로 확인할 수 있다. 푼 문제라면 체크 표시도 된다. 한국어로 문제 바꾸는 것도 바로 가능하고, Take the Challenge 버튼 클릭하면 바로 문제도 풀 수 있다~!