<div id="readability-page-1" class="page"><div>
<figure><img decoding="async" width="1290" height="334" data-attachment-id="1662" data-permalink="https://01010011.blog/2024/01/01/type-challenge-1-easy/2024-1-1-%ec%98%a4%ed%9b%84-4-44/" data-orig-file="https://i0.wp.com/01010011.blog/wp-content/uploads/2024/01/2024.-1.-1.-오후-4.44.jpeg?fit=1290%2C334&amp;ssl=1" data-orig-size="1290,334" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2024. 1. 1. 오후 4.44" data-image-description="" data-image-caption="" data-medium-file="https://i0.wp.com/01010011.blog/wp-content/uploads/2024/01/2024.-1.-1.-오후-4.44.jpeg?fit=300%2C78&amp;ssl=1" data-large-file="https://i0.wp.com/01010011.blog/wp-content/uploads/2024/01/2024.-1.-1.-오후-4.44.jpeg?fit=1024%2C265&amp;ssl=1" src="https://i0.wp.com/01010011.blog/wp-content/uploads/2024/01/2024.-1.-1.-%EC%98%A4%ED%9B%84-4.44.jpeg?resize=1290%2C334&amp;ssl=1" alt="" sizes="(max-width: 1000px) 100vw, 1000px" data-recalc-dims="1"></figure>



<div><p>미라클 글쓰기 2일차<br>Type Challenge 는 Anthony Fu 라는 개발자가 만든 Typescript 문제은행이다.<br>보통은 Typescript 기능 중 자주 쓰던 기능만 사용하게 되는데, 그러면 TS 만의 강력한 Type System을 배울 일이 없어진다.<br>TS 의 강력한 Type System을 이용하여 주어진 문제를 해결해 나가다 보면 자연스럽게 TS의 Type System을 익히게 된다.</p><p>처음 Type Challenge 의 문제를 풀었을 때는 상당히 많은 일을 compile time에 처리할 수 있다는 사실에 놀랐다.<br>꽤 오랫동안 TS를 사용해 왔는데 이렇게까지 TS의 type에 대해 몰랐다는 사실에 반성하며 Type Challenge 문제풀이를 올려볼까 한다.<br>정답은 워낙 많은 사이트에 공유가 되어 있으니, 나는 해설이나 다른 언어와의 차이점 등을 써볼까 한다.</p></div>



<h2>Type Challenge</h2>



<p>Type Challenge를 시작하려면 우선 다음 github url을 clone하자.<br>이후 pnpm install &amp; generate 하면 로컬 환경에 문제가 배포된다.</p>



<pre data-enlighter-language="bash" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">$ git clone https://github.com/type-challenges/type-challenges.git

# pnpm install &amp; generate 
$ pnpm install

#  문제가 업데이트 되더라도 나의 풀이를 유지하고 싶으면 -K 옵션을 설정, 문제를 generate 한다.
$ pnpm generate -K</pre>



<p>문제는 Easy / Medium / Hard / Extreme 의 4 단계로 나누어져 있는데, Easy 나 Medium 은 그닥 난이도 차이가 나는 것 같지는 않다.<br>Hard / Extreme 은 아직 안풀어봤다.</p>



<h2>easy – Pick</h2>



<p>문제 링크: <a href="https://github.com/type-challenges/type-challenges/blob/main/questions/00004-easy-pick/README.md">https://github.com/type-challenges/type-challenges/blob/main/questions/00004-easy-pick/README.md</a></p>



<pre data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">  4 - Pick
  -------
  by Anthony Fu (@antfu) #쉬움 #union #built-in

  ### 질문

  `T`에서 `K` 프로퍼티만 선택해 새로운 오브젝트 타입을 만드는
  내장 제네릭 `Pick&lt;T, K&gt;`을 이를 사용하지 않고 구현하세요.

  예시:

  ```ts
  interface Todo {
    title: string
    description: string
    completed: boolean
  }

  type TodoPreview = MyPick&lt;Todo, 'title' | 'completed'&gt;

  const todo: TodoPreview = {
      title: 'Clean room',
      completed: false,
  }
  ```

  &gt; GitHub에서 보기: https://tsch.js.org/4/ko</pre>



<p>Typescript 는 자주 쓰이는 타입 변환에 대한 built-in utility type을 제공한다.(<a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#picktype-keys">링크</a>)<br>이러한 built-in type 중 Pick&lt;T, K&gt; 를 직접 구현하는 문제다.</p>



<p>이 문제를 풀기 위해 사전에 알아야 할 지식은 다음과 같다.</p>



<ul>
<li>Union type</li>



<li><code data-enlighter-language="generic">keyof</code> Operator</li>



<li><code data-enlighter-language="generic">in Operator</code>와 Mapped type</li>



<li>Indexed access type</li>
</ul>



<h3>Union Type</h3>



<p>Union Type은 서로 다른 2개 이상의 타입을 조합하여 하나의 타입처럼 사용하는 것을 말한다.</p>



<pre data-enlighter-language="typescript" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">type MyPropertyKey = string | number | symbol;</pre>



<p>근데 Union Type을 잘 보면 type 의 array 처럼 생겼다. 실제로 Typescript 의 compiler 를 살펴보면 Union Type은 array로 관리되고 있음을 알 수 있다.<br>Union type 이 <strong>Array로 관리</strong>되고 있다는 사실을 잘 기억해 두자.</p>



<pre data-enlighter-language="typescript" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="compiler/checker.ts:line16894" data-enlighter-group="">    // Add the given types to the given type set. Order is preserved, duplicates are removed,
    // and nested types of the given kind are flattened into the set.
    function addTypesToUnion(typeSet: Type[], includes: TypeFlags, types: readonly Type[]): TypeFlags {
        let lastType: Type | undefined;
        for (const type of types) {
               ...</pre>



<h3>keyof Operator</h3>



<p>keyof Operator는 type operator로, object type의 key로 구성된 Union type을 생성한다.</p>



<pre data-enlighter-language="typescript" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">type Point = { x: number; y: number };
type P = keyof Point; // type P = "x" | "y";</pre>



<h3>Mapped Type</h3>



<p>Mapped Type의 Map은<code data-enlighter-language="generic"> Array.map(x =&gt; x * 2)</code> 의 그 Map function 이다.<br>in Operator 는 Union type을 구성하는 type의 Array를 Map function 처럼 변환하는 type Operator이다.(위에서 언급한 것 처럼 Union type은 Array처럼 취급한다.)<br>type 변환을 반복적으로 수행해야 할 때 아래와 같이 편리하게 쓸 수 있다.</p>



<pre data-enlighter-language="typescript" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">type Foo = 'A' | 'B' | 'C';
type MappedFoo = { [k in Foo]: string }; 

const mFoo: MappedFoo = {
  A: 'hello',
  B: 'world'
}</pre>



<h3>Indexed Access Type</h3>



<p>Indexed Access Type은 과거에는 lookup type으로 불렸던, 어떤 type의 property 에 index를 지정하여 접근, type을 조합하는 방식이다.</p>



<pre data-enlighter-language="typescript" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">type Person = { age: number; name: string; };
type Age = Person["age"]; // type Age = number</pre>



<h2>문제 풀이</h2>



<p>배운 것들을 종합하여 문제를 풀어보자.<br>문제는 1) Generic Type T 에서 2) Generic Type K property만을 선택하는 <code data-enlighter-language="generic">type MyPick</code>을 조합하는 것이다.</p>



<p>문제의 조건에 따라 T는 반드시 object type이다. <br>문제의 조건에 따라 K 는 반드시 T의 sub-property 집합이다. 따라서 K는 union type 이고, <code data-enlighter-language="generic">K extends keyof T</code> 가 성립한다.<br>object type T에서 K property 만을 포함하는 새로운 object type을 추려야 하므로 My Pick 은 다음과 같이 표현할 수 있다.</p>



<pre data-enlighter-language="typescript" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">type MyPick&lt;T, K extends keyof T&gt; = { [k in K]: T[k] }</pre>
</div></div>

01010011

미라클 글쓰기 2일차
Type Challenge 는 Anthony Fu 라는 개발자가 만든 Typescript 문제은행이다.
보통은 Typescript 기능 중 자주 쓰던 기능만 사용하게 되는데, 그러면 TS 만의 강력한 Type System을 배울 일이 없어진다.
TS 의 강력한 Type System을 이용하여 주어진 문제를 해결해 나가다 보면 자연스럽게 TS의 Type System을 익히게 된다.
처음 Type Challenge 의 문제를 풀었을 때는 상당히 많은 일을 compile time에 처리할 수 있다는 사실에 놀랐다.
꽤 오랫동안 TS를 사용해 왔는데 이렇게까지 TS의 type에 대해 몰랐다는 사실에 반성하며 Type Challenge 문제풀이를 올려볼까 한다.
정답은 워낙 많은 사이트에 공유가 되어 있으니, 나는 해설이나 다른 언어와의 차이점 등을 써볼까 한다.
Type Challenge
Type Challenge를 시작하려면 우선 다음 github url을 clone하자.
이후 pnpm install & generate 하면 로컬 환경에 문제가 배포된다.
$ git clone https://github.com/type-challenges/type-challenges.git
# pnpm install & generate 
$ pnpm install
#  문제가 업데이트 되더라도 나의 풀이를 유지하고 싶으면 -K 옵션을 설정, 문제를 generate 한다.
$ pnpm generate -K
문제는 Easy / Medium / Hard / Extreme 의 4 단계로 나누어져 있는데, Easy 나 Medium 은 그닥 난이도 차이가 나는 것 같지는 않다.
Hard / Extreme 은 아직 안풀어봤다.
easy – Pick
문제 링크: https://github.com/type-challenges/type-challenges/blob/main/questions/00004-easy-pick/README.md
  4 - Pick
  -------
  by Anthony Fu (@antfu) #쉬움 #union #built-in
  ### 질문
  `T`에서 `K` 프로퍼티만 선택해 새로운 오브젝트 타입을 만드는
  내장 제네릭 `Pick<T, K>`을 이를 사용하지 않고 구현하세요.
  예시:
  ```ts
  interface Todo {
    title: string
    description: string
    completed: boolean
  }
  type TodoPreview = MyPick<Todo, 'title' | 'completed'>
  const todo: TodoPreview = {
      title: 'Clean room',
      completed: false,
  }
  ```
  > GitHub에서 보기: https://tsch.js.org/4/ko
Typescript 는 자주 쓰이는 타입 변환에 대한 built-in utility type을 제공한다.(링크)
이러한 built-in type 중 Pick<T, K> 를 직접 구현하는 문제다.
이 문제를 풀기 위해 사전에 알아야 할 지식은 다음과 같다.
Union type
keyof Operator
in Operator와 Mapped type
Indexed access type
Union Type
Union Type은 서로 다른 2개 이상의 타입을 조합하여 하나의 타입처럼 사용하는 것을 말한다.
type MyPropertyKey = string | number | symbol;
근데 Union Type을 잘 보면 type 의 array 처럼 생겼다. 실제로 Typescript 의 compiler 를 살펴보면 Union Type은 array로 관리되고 있음을 알 수 있다.
Union type 이 Array로 관리되고 있다는 사실을 잘 기억해 두자.
    // Add the given types to the given type set. Order is preserved, duplicates are removed,
    // and nested types of the given kind are flattened into the set.
    function addTypesToUnion(typeSet: Type[], includes: TypeFlags, types: readonly Type[]): TypeFlags {
        let lastType: Type | undefined;
        for (const type of types) {
               ...
keyof Operator
keyof Operator는 type operator로, object type의 key로 구성된 Union type을 생성한다.
type Point = { x: number; y: number };
type P = keyof Point; // type P = "x" | "y";
Mapped Type
Mapped Type의 Map은 Array.map(x => x * 2) 의 그 Map function 이다.
in Operator 는 Union type을 구성하는 type의 Array를 Map function 처럼 변환하는 type Operator이다.(위에서 언급한 것 처럼 Union type은 Array처럼 취급한다.)
type 변환을 반복적으로 수행해야 할 때 아래와 같이 편리하게 쓸 수 있다.
type Foo = 'A' | 'B' | 'C';
type MappedFoo = { [k in Foo]: string }; 
const mFoo: MappedFoo = {
  A: 'hello',
  B: 'world'
}
Indexed Access Type
Indexed Access Type은 과거에는 lookup type으로 불렸던, 어떤 type의 property 에 index를 지정하여 접근, type을 조합하는 방식이다.
type Person = { age: number; name: string; };
type Age = Person["age"]; // type Age = number
문제 풀이
배운 것들을 종합하여 문제를 풀어보자.
문제는 1) Generic Type T 에서 2) Generic Type K property만을 선택하는 type MyPick을 조합하는 것이다.
문제의 조건에 따라 T는 반드시 object type이다. 
문제의 조건에 따라 K 는 반드시 T의 sub-property 집합이다. 따라서 K는 union type 이고, K extends keyof T 가 성립한다.
object type T에서 K property 만을 포함하는 새로운 object type을 추려야 하므로 My Pick 은 다음과 같이 표현할 수 있다.
type MyPick<T, K extends keyof T> = { [k in K]: T[k] }

Type Challenge #1 easy

댓글