jaenny.dev
article thumbnail
[타입챌린지/type-challenge] Flatten
Frontend 2023. 2. 4. 16:17

문제 배열을 받아, 배열을 평탄화하여 반환하시오. 예제: type flatten = Flatten // [1, 2, 3, 4, 5] 풀이 제네릭 타입으로 배열을 받아야 하니 T extends any[]로 배열만 받도록 제한해 줍니다. infer와 spread를 사용해서 T 배열의 첫 원소를 First로 가져옵니다. 만약 빈 배열이라면 First로 가져올 수 없으니 바로 T를 리턴해줍니다. 그런데 지금 구현하려는 Flatten은 1 depth만 평탄화하는 것이 아니고, 모든 배열을 평탄화해야 합니다. 따라서 재귀로 구현해 줄 것입니다. First가 배열이 아니여서, 더 이상 평탄화가 필요없는 경우부터 생각해줍니다. First가 배열이 아니라면, 리턴하려는 배열의 첫 번째 자리에 두고, 나머지 원소들을 확인..

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

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

article thumbnail
[VSCode Extension] 타입챌린지 vscode에서 풀기
Tools & Productivity 2023. 1. 23. 19:20

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