<div id="readability-page-1" class="page"><div id="kakaoContent">

                <div>
                                            <p><a href="/m/category/Programming%20Language/%F0%9F%9F%A6%20Typescript">Programming Language/🟦 Typescript</a></p><h2>Utility types : Partial, Record, Pick, Omit ...</h2>
                    <p><cite>
                        <span>DarrenKwonDev</span>
                    </cite>
                </p></div>
                <p><time>2021. 5. 30. 02:13</time>
                    <span>
                        
                                                    <a href="#comment" onclick="Utils.smoothScroll(this);return false">
                                
                            </a>
                        
                                                    <span id="title_daumlike">
                                
                                <span id="mobile-reaction"></span>
                                
                            </span>
                                            </span>
                </p>

                                    
                
                <div>
                    <p data-ke-size="size16">원본) <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html" target="_blank" rel="noopener">https://www.typescriptlang.org/docs/handbook/utility-types.html</a></p>
<p data-ke-size="size16"><a href="https://typescript-kr.github.io/pages/utility-types.html" target="_blank" rel="noopener">typescript-kr.github.io/pages/utility-types.html</a></p>
<figure id="og_1606483064196" contenteditable="false" data-ke-type="opengraph" data-og-type="website" data-og-title="TypeScript 한글 문서" data-og-description="TypeScript 한글 번역 문서입니다" data-og-host="typescript-kr.github.io" data-og-source-url="https://typescript-kr.github.io/pages/utility-types.html" data-og-url="https://typescript-kr.github.io/pages/utility-types.html" data-og-image="https://scrap.kakaocdn.net/dn/bhHZqj/hyIoMwFSMR/KMPNjNaSYjgV22qU1aNAr1/img.png?width=200&amp;height=200&amp;face=0_0_200_200"><a href="https://typescript-kr.github.io/pages/utility-types.html" target="_blank" rel="noopener" data-source-url="https://typescript-kr.github.io/pages/utility-types.html">

<div>
<p data-ke-size="size16">TypeScript 한글 문서</p>
<p data-ke-size="size16">TypeScript 한글 번역 문서입니다</p>
<p data-ke-size="size16">typescript-kr.github.io</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/bhHZqj/hyIoMwFSMR/KMPNjNaSYjgV22qU1aNAr1/img.png?width=200&amp;height=200&amp;face=0_0_200_200"></figure>


<p data-ke-size="size16"><span>우선 급하게 사용할 내용만 정리했습니다. 이후 시간이 날 때 나머지 유틸리티 타입을 살펴볼 계획입니다.</span></p>

<p data-ke-size="size16">TypeScript는 공통 타입 변환을 용이하게 하기 위해 몇 가지 유틸리티 타입을 제공합니다. 이런 유틸리티들은 전역으로 사용 가능합니다. * Nest의 Mapped Type의 개념과 비슷합니다. @<span>PartialType, @OmitType ...</span></p>

<h4 data-ke-size="size20"><b>- Parital&lt;T&gt;</b></h4>
<p data-ke-size="size16">T<span>의 모든 프로퍼티를 선택적으로 만드는 타입을 구성합니다</span></p>
<pre id="code_1606483801952" data-ke-language="javascript" data-ke-type="codeblock"><code>interface Book {
  category: string;
  name: string;
}

const hegel: Book = { category: "philo", name: "hegel" };
const episteme: Partial&lt;Book&gt; = { name: "foucault" };</code></pre>


<h4 data-ke-size="size20"><b>- Readonly&lt;T&gt;</b></h4>
<p data-ke-size="size16">readonly 속성</p>
<pre id="code_1606484440544" data-ke-language="javascript" data-ke-type="codeblock"><code>interface Todo {
  title: string;
}

const todo: Readonly&lt;Todo&gt; = {
  title: "You can't change me",
};

todo.title = "Hello"; // 오류: 읽기 전용 프로퍼티에 재할당할 수 없음</code></pre>

<h4 id="recordkt" data-ke-size="size20"><b>- Record&lt;K, T&gt;</b></h4>
<p data-ke-size="size16"><span>K타입을 Key값 타입으로, T타입을 밸류 값 타입으로 갖는 타입을 리턴합니다</span></p>
<p data-ke-size="size16">아래 예시로 설명하자면, 키는 Page여야하고 값은 PageInfo가 되어야 합니다.</p>
<pre id="code_1606484581925" data-ke-language="javascript" data-ke-type="codeblock"><code>interface PageInfo {
  title: string;
}

type Page = "home" | "about" | "contact";

const WebPage: Record&lt;Page, PageInfo&gt; = {
  home: { title: "home page" },
  about: { title: "about page" },
  contact: { title: "contact page" },
};
</code></pre>

<h4 id="picktk" data-ke-size="size20"><b>- Pick&lt;T, K&gt;</b></h4>
<p data-ke-size="size16">T&nbsp;타입으로부터&nbsp;K&nbsp;프로퍼티만&nbsp;추출합니다.</p>
<p data-ke-size="size16">쉽게말해 type에서 특정 부분만 pick할 수 있습니다. 아래의 경우 Todo 타입에서 "title" | "completed" 만 추출한 것입니다.</p>
<pre id="code_1606485023780" data-ke-language="javascript" data-ke-type="codeblock"><code>interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

type TodoPreview = Pick&lt;Todo, "title" | "completed"&gt;;

const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
};
</code></pre>


<h4 data-ke-size="size20"><b>- Omit&lt;T, K&gt;</b></h4>
<p data-ke-size="size16">T에서 K 프로퍼티를 생략함.</p>
<pre id="code_1606485141916" data-ke-language="javascript" data-ke-type="codeblock"><code>interface Todo {
    title: string;
    description: string;
    completed: boolean;
}

type TodoPreview = Omit&lt;Todo, 'description'&gt;;

const todo: TodoPreview = {
    title: 'Clean room',
    completed: false,
};
</code></pre>


<h4 data-ke-size="size20"><b>ReturnType&lt;Type&gt;</b></h4>
<pre id="code_1622308326971" data-ke-language="javascript" data-ke-type="codeblock"><code>// NodeJS.Timeout(노드환경), number(브라우저)를 쓰게되면 플랫폼 종속적이게 됨.
// ReturnType&lt;typeof setTimeout&gt;을 쓰면 브라우저, 노드 두 곳에서 작동할 것으로 예상

const debounce = (callback: Function, ms = 1000) =&gt; {
  let timeoutId: ReturnType&lt;typeof setTimeout&gt; | null = null;
  return (...args: any[]) =&gt; {
    if (timeoutId) clearTimeout(timeoutId);
    timeoutId = setTimeout(() =&gt; {
      callback.apply(null, args);
    }, ms);
  };
};
</code></pre>


<p data-ke-size="size16">ref)</p>
<p data-ke-size="size16"><a href="https://medium.com/harrythegreat/typescript-%EC%9C%A0%ED%8B%B8%EB%A6%AC%ED%8B%B0-%ED%81%B4%EB%9E%98%EC%8A%A4-%ED%8C%8C%ED%97%A4%EC%B9%98%EA%B8%B0-7ae8a786fb20" target="_blank" rel="noopener">medium.com/harrythegreat/typescript-%EC%9C%A0%ED%8B%B8%EB%A6%AC%ED%8B%B0-%ED%81%B4%EB%9E%98%EC%8A%A4-%ED%8C%8C%ED%97%A4%EC%B9%98%EA%B8%B0-7ae8a786fb20</a></p>




                                                            
                    
					
                    
                    
                </div>

                                    
                
                
                                    
                
                


                

                                    
                
                
            </div></div>

HotHandCoding

DarrenKwon

원본) https://www.typescriptlang.org/docs/handbook/utility-types.html
typescript-kr.github.io/pages/utility-types.html
 
 
우선 급하게 사용할 내용만 정리했습니다. 이후 시간이 날 때 나머지 유틸리티 타입을 살펴볼 계획입니다.
 
TypeScript는 공통 타입 변환을 용이하게 하기 위해 몇 가지 유틸리티 타입을 제공합니다. 이런 유틸리티들은 전역으로 사용 가능합니다. * Nest의 Mapped Type의 개념과 비슷합니다. @PartialType, @OmitType ...
 
- Parital<T>
T의 모든 프로퍼티를 선택적으로 만드는 타입을 구성합니다
interface Book {
  category: string;
  name: string;
}
const hegel: Book = { category: "philo", name: "hegel" };
const episteme: Partial<Book> = { name: "foucault" };
 
 
- Readonly<T>
readonly 속성
interface Todo {
  title: string;
}
const todo: Readonly<Todo> = {
  title: "You can't change me",
};
todo.title = "Hello"; // 오류: 읽기 전용 프로퍼티에 재할당할 수 없음
 
- Record<K, T>
K타입을 Key값 타입으로, T타입을 밸류 값 타입으로 갖는 타입을 리턴합니다
아래 예시로 설명하자면, 키는 Page여야하고 값은 PageInfo가 되어야 합니다.
interface PageInfo {
  title: string;
}
type Page = "home" | "about" | "contact";
const WebPage: Record<Page, PageInfo> = {
  home: { title: "home page" },
  about: { title: "about page" },
  contact: { title: "contact page" },
};
 
- Pick<T, K>
T 타입으로부터 K 프로퍼티만 추출합니다.
쉽게말해 type에서 특정 부분만 pick할 수 있습니다. 아래의 경우 Todo 타입에서 "title" | "completed" 만 추출한 것입니다.
interface Todo {
  title: string;
  description: string;
  completed: boolean;
}
type TodoPreview = Pick<Todo, "title" | "completed">;
const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
};
 
 
- Omit<T, K>
T에서 K 프로퍼티를 생략함.
interface Todo {
    title: string;
    description: string;
    completed: boolean;
}
type TodoPreview = Omit<Todo, 'description'>;
const todo: TodoPreview = {
    title: 'Clean room',
    completed: false,
};
 
 
ReturnType<Type>
// NodeJS.Timeout(노드환경), number(브라우저)를 쓰게되면 플랫폼 종속적이게 됨.
// ReturnType<typeof setTimeout>을 쓰면 브라우저, 노드 두 곳에서 작동할 것으로 예상
const debounce = (callback: Function, ms = 1000) => {
  let timeoutId: ReturnType<typeof setTimeout> | null = null;
  return (...args: any[]) => {
    if (timeoutId) clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      callback.apply(null, args);
    }, ms);
  };
};
 
 
ref)
medium.com/harrythegreat/typescript-%EC%9C%A0%ED%8B%B8%EB%A6%AC%ED%8B%B0-%ED%81%B4%EB%9E%98%EC%8A%A4-%ED%8C%8C%ED%97%A4%EC%B9%98%EA%B8%B0-7ae8a786fb20

Utility types : Partial, Record, Pick, Omit ...

댓글