pages/advanced-types.html


<!DOCTYPE HTML>
<html lang="" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>고급 타입 · GitBook</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
				<meta name="generator" content="GitBook 3.2.3">
				<meta property="og:title" content="TypeScript 한글 문서">
        <meta property="og:image" content="https://avatars1.githubusercontent.com/u/37781342?s=200&v=4">
        <meta property="og:description" content="TypeScript 한글 번역 문서입니다">
        
        
    <link rel="stylesheet" href="../gitbook/style.css">

    
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight-1/website.css">
                
            
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-forkmegithub/plugin.css">
                
            
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
                
            
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
                
            
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
        <link rel="stylesheet" href="../assets/css/website.css">
        
    
    <link rel="stylesheet" type="text/css" href="../assets/css/atom-one-dark.css" />
    

    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="declaration-merging.html" />
    
    
    <link rel="prev" href="generics.html" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search" />
</div>

            
                <nav role="navigation">
                

<ul class="summary">
    
    
        <li class="chapter " data-level="1.1" data-path="../">
            
                <a href="../">
            
                    
                    소개
            
                </a>
            

        </li>
    

        <li class="header">시작하기</li>
        
        
        <li class="chapter " data-level="2.1" data-path="tutorials/ts-for-the-new-programmer.html">
            
                <a href="tutorials/ts-for-the-new-programmer.html">
            
                    
                    TS for the New Programmer
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="2.2" data-path="tutorials/ts-for-js-programmers.html">
            
                <a href="tutorials/ts-for-js-programmers.html">
            
                    
                    TS for JS Programmers
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="2.3" data-path="tutorials/ts-for-oopers.html">
            
                <a href="tutorials/ts-for-oopers.html">
            
                    
                    TS for OOP Programmers(en)
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="2.4" data-path="tutorials/ts-for-functional-programmers.html">
            
                <a href="tutorials/ts-for-functional-programmers.html">
            
                    
                    TS for Functional Programmers
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="2.5" data-path="tutorials/typescript-in-5-minutes.html">
            
                <a href="tutorials/typescript-in-5-minutes.html">
            
                    
                    5분 안에 보는 TypeScript
            
                </a>
            

        </li>
    

        <li class="header">핸드북</li>
        
        
        <li class="chapter " data-level="3.1" data-path="the-handbook.html">
            
                <a href="the-handbook.html">
            
                    
                    핸드북이란(en)
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="3.2" data-path="basic-types.html">
            
                <a href="basic-types.html">
            
                    
                    기본 타입
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="3.3" data-path="interfaces.html">
            
                <a href="interfaces.html">
            
                    
                    인터페이스
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="3.4" data-path="functions.html">
            
                <a href="functions.html">
            
                    
                    함수
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="3.5" data-path="literal-types.html">
            
                <a href="literal-types.html">
            
                    
                    리터럴 타입
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="3.6" data-path="unions-and-intersections.html">
            
                <a href="unions-and-intersections.html">
            
                    
                    유니언과 교차 타입
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="3.7" data-path="classes.html">
            
                <a href="classes.html">
            
                    
                    클래스
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="3.8" data-path="enums.html">
            
                <a href="enums.html">
            
                    
                    열거형
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="3.9" data-path="generics.html">
            
                <a href="generics.html">
            
                    
                    제네릭
            
                </a>
            

        </li>
    

        <li class="header">핸드북 레퍼런스</li>
        
        
        <li class="chapter active" data-level="4.1" data-path="advanced-types.html">
            
                <a href="advanced-types.html">
            
                    
                    고급 타입
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="4.2" data-path="declaration-merging.html">
            
                <a href="declaration-merging.html">
            
                    
                    선언 병합
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="4.3" data-path="decorators.html">
            
                <a href="decorators.html">
            
                    
                    데코레이터
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="4.4" data-path="utility-types.html">
            
                <a href="utility-types.html">
            
                    
                    유틸리티 타입
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="4.5" data-path="iterators-and-generators.html">
            
                <a href="iterators-and-generators.html">
            
                    
                    이터레이터와 제네레이터
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="4.6" data-path="jsx.html">
            
                <a href="jsx.html">
            
                    
                    JSX
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="4.7" data-path="mixins.html">
            
                <a href="mixins.html">
            
                    
                    믹스인
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="4.8" data-path="modules.html">
            
                <a href="modules.html">
            
                    
                    모듈
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="4.9" data-path="module-resolution.html">
            
                <a href="module-resolution.html">
            
                    
                    모듈 해석
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="4.10" data-path="namespaces.html">
            
                <a href="namespaces.html">
            
                    
                    네임스페이스
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="4.11" data-path="namespaces-and-modules.html">
            
                <a href="namespaces-and-modules.html">
            
                    
                    네임스페이스와 모듈
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="4.12" data-path="symbols.html">
            
                <a href="symbols.html">
            
                    
                    심볼
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="4.13" data-path="triple-slash-directives.html">
            
                <a href="triple-slash-directives.html">
            
                    
                    트리플-슬래시 지시자
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="4.14" data-path="type-compatibility.html">
            
                <a href="type-compatibility.html">
            
                    
                    타입 호환성
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="4.15" data-path="type-inference.html">
            
                <a href="type-inference.html">
            
                    
                    타입 추론
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="4.16" data-path="tutorials/dom-manipulation.html">
            
                <a href="tutorials/dom-manipulation.html">
            
                    
                    타입스크립트와 DOM(en)
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="4.17" data-path="variable-declarations.html">
            
                <a href="variable-declarations.html">
            
                    
                    변수 선언
            
                </a>
            

        </li>
    

        <li class="header">튜토리얼</li>
        
        
        <li class="chapter " data-level="5.1" data-path="tutorials/asp.net-core.html">
            
                <a href="tutorials/asp.net-core.html">
            
                    
                    ASP.NET Core
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="5.2" data-path="tutorials/gulp.html">
            
                <a href="tutorials/gulp.html">
            
                    
                    걸프
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="5.3" data-path="tutorials/migrating-from-javascript.html">
            
                <a href="tutorials/migrating-from-javascript.html">
            
                    
                    JavaScript에서 마이그레이션
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="5.4" data-path="tutorials/babel-with-typescript.html">
            
                <a href="tutorials/babel-with-typescript.html">
            
                    
                    TypeScript와 Babel 사용하기
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="5.5" data-path="tutorials/react-&-webpack.html">
            
                <a href="tutorials/react-&-webpack.html">
            
                    
                    리액트 & 웹팩
            
                </a>
            

        </li>
    

        <li class="header">릴리즈 노트</li>
        
        
        <li class="chapter " data-level="6.1" data-path="release-notes/typescript-4.0.html">
            
                <a href="release-notes/typescript-4.0.html">
            
                    
                    TypeScript 4.0
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="6.2" data-path="release-notes/typescript-3.9.html">
            
                <a href="release-notes/typescript-3.9.html">
            
                    
                    TypeScript 3.9
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="6.3" data-path="release-notes/typescript-3.8.html">
            
                <a href="release-notes/typescript-3.8.html">
            
                    
                    TypeScript 3.8
            
                </a>
            

        </li>
    

        <li class="header">선언 파일</li>
        
        
        <li class="chapter " data-level="7.1" data-path="declaration-files/introduction.html">
            
                <a href="declaration-files/introduction.html">
            
                    
                    소개
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="7.2" data-path="declaration-files/by-example.html">
            
                <a href="declaration-files/by-example.html">
            
                    
                    By Example
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="7.3" data-path="declaration-files/dos-and-don-ts.html">
            
                <a href="declaration-files/dos-and-don-ts.html">
            
                    
                    Do's and Don'ts
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="7.4" data-path="declaration-files/deep-dive.html">
            
                <a href="declaration-files/deep-dive.html">
            
                    
                    Deep Dive
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="7.5" data-path="declaration-files/library-structures.html">
            
                <a href="declaration-files/library-structures.html">
            
                    
                    Library Structures
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="7.6" data-path="declaration-files/templates.html">
            
                <a href="declaration-files/templates.html">
            
                    
                    Templates
            
                </a>
            

            <ul class="articles">
                
    
        <li class="chapter " data-level="7.6.1" data-path="declaration-files/templates/global-modifying-module.d.ts.html">
            
                <a href="declaration-files/templates/global-modifying-module.d.ts.html">
            
                    
                    global-modifying-module.d.ts
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="7.6.2" data-path="declaration-files/templates/global-plugin.d.ts.html">
            
                <a href="declaration-files/templates/global-plugin.d.ts.html">
            
                    
                    global-plugin.d.ts
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="7.6.3" data-path="declaration-files/templates/global.d.ts.html">
            
                <a href="declaration-files/templates/global.d.ts.html">
            
                    
                    global.d.ts
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="7.6.4" data-path="declaration-files/templates/module-class.d.ts.html">
            
                <a href="declaration-files/templates/module-class.d.ts.html">
            
                    
                    module-class.d.ts
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="7.6.5" data-path="declaration-files/templates/module-function.d.ts.html">
            
                <a href="declaration-files/templates/module-function.d.ts.html">
            
                    
                    module-function.d.ts
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="7.6.6" data-path="declaration-files/templates/module-plugin.d.ts.html">
            
                <a href="declaration-files/templates/module-plugin.d.ts.html">
            
                    
                    module-plugin.d.ts
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="7.6.7" data-path="declaration-files/templates/module.d.ts.html">
            
                <a href="declaration-files/templates/module.d.ts.html">
            
                    
                    module.d.ts
            
                </a>
            

        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="7.7" data-path="declaration-files/publishing.html">
            
                <a href="declaration-files/publishing.html">
            
                    
                    Publishing
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="7.8" data-path="declaration-files/consumption.html">
            
                <a href="declaration-files/consumption.html">
            
                    
                    Consumption
            
                </a>
            

        </li>
    

        <li class="header">자바스크립트</li>
        
        
        <li class="chapter " data-level="8.1" data-path="intro-to-js-with-ts.html">
            
                <a href="intro-to-js-with-ts.html">
            
                    
                    JavaScript에 TypeScript 적용하기
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="8.2" data-path="type-checking-javaScript-files.html">
            
                <a href="type-checking-javaScript-files.html">
            
                    
                    JavaScript 파일 타입 검사
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="8.3" data-path="jsdoc-reference.html">
            
                <a href="jsdoc-reference.html">
            
                    
                    JSDoc 레퍼런스(en)
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="8.4" data-path="declaration-files/creating-dts-files-from-js.html">
            
                <a href="declaration-files/creating-dts-files-from-js.html">
            
                    
                    .js 파일에서 d.ts 파일 만들기
            
                </a>
            

        </li>
    

        <li class="header">프로젝트 환경설정</li>
        
        
        <li class="chapter " data-level="9.1" data-path="tsconfig.json.html">
            
                <a href="tsconfig.json.html">
            
                    
                    tsconfig.json
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="9.2" data-path="compiler-options.html">
            
                <a href="compiler-options.html">
            
                    
                    컴파일러 옵션
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="9.3" data-path="project-references.html">
            
                <a href="project-references.html">
            
                    
                    프로젝트 레퍼런스
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="9.4" data-path="compiler-options-in-msbuild.html">
            
                <a href="compiler-options-in-msbuild.html">
            
                    
                    MSBuild에서의 컴파일러 옵션
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="9.5" data-path="integrating-with-build-tools.html">
            
                <a href="integrating-with-build-tools.html">
            
                    
                    빌드 도구와 통합
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="9.6" data-path="configuring-watch.html">
            
                <a href="configuring-watch.html">
            
                    
                    configuring-watch
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="9.7" data-path="nightly-builds.html">
            
                <a href="nightly-builds.html">
            
                    
                    Nightly 빌드
            
                </a>
            

        </li>
    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            Published with GitBook
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    
<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href=".." >고급 타입</a>
    </h1>
</div>


                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <h1 id="&#xBAA9;&#xCC28;-table-of-contents">&#xBAA9;&#xCC28; (Table of contents)</h1>
<p><a href="#&#xAD50;&#xCC28;-&#xD0C0;&#xC785;-intersection-types">&#xAD50;&#xCC28; &#xD0C0;&#xC785; (Intersection Types)</a></p>
<p><a href="#&#xC720;&#xB2C8;&#xC5B8;-&#xD0C0;&#xC785;-union-types">&#xC720;&#xB2C8;&#xC5B8; &#xD0C0;&#xC785; (Union Types)</a></p>
<p><a href="#&#xD0C0;&#xC785;-&#xAC00;&#xB4DC;&#xC640;-&#xCC28;&#xBCC4;-&#xD0C0;&#xC785;-type-guards-and-differentiating-types">&#xD0C0;&#xC785; &#xAC00;&#xB4DC;&#xC640; &#xCC28;&#xBCC4; &#xD0C0;&#xC785; (Type Guards and Differentiating Types)</a></p>
<ul>
<li><a href="#&#xC0AC;&#xC6A9;&#xC790;-&#xC815;&#xC758;-&#xD0C0;&#xC785;-&#xAC00;&#xB4DC;-user-defined-type-guards">&#xC0AC;&#xC6A9;&#xC790;-&#xC815;&#xC758; &#xD0C0;&#xC785; &#xAC00;&#xB4DC; (User-Defined Type Guards)</a><ul>
<li><a href="#&#xD0C0;&#xC785;-&#xC11C;&#xC220;&#xC5B4;-&#xC0AC;&#xC6A9;&#xD558;&#xAE30;-using-type-predicates">&#xD0C0;&#xC785; &#xC11C;&#xC220;&#xC5B4; &#xC0AC;&#xC6A9;&#xD558;&#xAE30; (Using type predicates)</a></li>
<li><a href="#in-&#xC5F0;&#xC0B0;&#xC790;-&#xC0AC;&#xC6A9;&#xD558;&#xAE30;-using-the-in-operator"><code>in</code> &#xC5F0;&#xC0B0;&#xC790; &#xC0AC;&#xC6A9;&#xD558;&#xAE30; (Using the <code>in</code> operator)</a></li>
</ul>
</li>
<li><a href="#typeof-&#xD0C0;&#xC785;-&#xAC00;&#xB4DC;-typeof-type-guards"><code>typeof</code> &#xD0C0;&#xC785; &#xAC00;&#xB4DC; (<code>typeof</code> type guards)</a></li>
<li><a href="#instanceof-&#xD0C0;&#xC785;-&#xAC00;&#xB4DC;-instanceof-type-guards"><code>instanceof</code> &#xD0C0;&#xC785; &#xAC00;&#xB4DC; (<code>instanceof</code> type guards)</a></li>
</ul>
<p><a href="#&#xB110;&#xB7EC;&#xBE14;-&#xD0C0;&#xC785;-nullable-types">&#xB110;&#xB7EC;&#xBE14; &#xD0C0;&#xC785; (Nullable types)</a></p>
<ul>
<li><a href="#&#xC120;&#xD0DD;&#xC801;-&#xB9E4;&#xAC1C;&#xBCC0;&#xC218;&#xC640;-&#xD504;&#xB85C;&#xD37C;&#xD2F0;-optional-parameters-and-properties">&#xC120;&#xD0DD;&#xC801; &#xB9E4;&#xAC1C;&#xBCC0;&#xC218;&#xC640; &#xD504;&#xB85C;&#xD37C;&#xD2F0; (Optional parameters and properties)</a></li>
<li><a href="#&#xD0C0;&#xC785;-&#xAC00;&#xB4DC;&#xC640;-&#xD0C0;&#xC785;-&#xB2E8;&#xC5B8;-type-guards-and-type-assertions">&#xD0C0;&#xC785; &#xAC00;&#xB4DC;&#xC640; &#xD0C0;&#xC785; &#xB2E8;&#xC5B8; (Type guards and type assertions)</a></li>
</ul>
<p><a href="#&#xD0C0;&#xC785;-&#xBCC4;&#xCE6D;-type-aliases">&#xD0C0;&#xC785; &#xBCC4;&#xCE6D; (Type Aliases)</a></p>
<ul>
<li><a href="#&#xC778;&#xD130;&#xD398;&#xC774;&#xC2A4;-vs-&#xD0C0;&#xC785;-&#xBCC4;&#xCE6D;-interfaces-vs-type-aliases">&#xC778;&#xD130;&#xD398;&#xC774;&#xC2A4; vs. &#xD0C0;&#xC785; &#xBCC4;&#xCE6D; (Interfaces vs. Type Aliases)</a></li>
</ul>
<p><a href="#&#xBB38;&#xC790;&#xC5F4;-&#xB9AC;&#xD130;&#xB7F4;-&#xD0C0;&#xC785;-string-literal-types">&#xBB38;&#xC790;&#xC5F4; &#xB9AC;&#xD130;&#xB7F4; &#xD0C0;&#xC785; (String Literal Types)</a></p>
<p><a href="#&#xC22B;&#xC790;-&#xB9AC;&#xD130;&#xB7F4;-&#xD0C0;&#xC785;-numeric-literal-types">&#xC22B;&#xC790; &#xB9AC;&#xD130;&#xB7F4; &#xD0C0;&#xC785; (Numeric Literal Types)</a></p>
<p><a href="#&#xC5F4;&#xAC70;&#xD615;-&#xBA64;&#xBC84;-&#xD0C0;&#xC785;-enum-member-types">&#xC5F4;&#xAC70;&#xD615; &#xBA64;&#xBC84; &#xD0C0;&#xC785; (Enum Member Types)</a></p>
<p><a href="#&#xD310;&#xBCC4;-&#xC720;&#xB2C8;&#xC5B8;-discriminated-unions">&#xD310;&#xBCC4; &#xC720;&#xB2C8;&#xC5B8;</a></p>
<ul>
<li><a href="#&#xC5C4;&#xACA9;&#xD55C;-&#xAC80;&#xC0AC;-exhaustiveness-checking">&#xC5C4;&#xACA9;&#xD55C; &#xAC80;&#xC0AC;</a></li>
</ul>
<p><a href="#&#xB2E4;&#xD615;&#xC131;-this-&#xD0C0;&#xC785;-polymorphic-this-types">&#xB2E4;&#xD615;&#xC131; <code>this</code> &#xD0C0;&#xC785;</a></p>
<p><a href="#&#xC778;&#xB371;&#xC2A4;-&#xD0C0;&#xC785;-index-types">&#xC778;&#xB371;&#xC2A4; &#xD0C0;&#xC785;</a></p>
<ul>
<li><a href="#&#xC778;&#xB371;&#xC2A4;-&#xD0C0;&#xC785;&#xACFC;-&#xC778;&#xB371;&#xC2A4;-&#xC2DC;&#xADF8;&#xB2C8;&#xCC98;-index-types-and-index-signatures">&#xC778;&#xB371;&#xC2A4; &#xD0C0;&#xC785;&#xACFC; &#xC778;&#xB371;&#xC2A4; &#xC2DC;&#xADF8;&#xB2C8;&#xCC98;</a></li>
</ul>
<p><a href="#&#xB9E4;&#xD551;-&#xD0C0;&#xC785;-mapped-types">&#xB9E4;&#xD551; &#xD0C0;&#xC785;</a></p>
<ul>
<li><a href="#&#xB9E4;&#xD551;-&#xD0C0;&#xC785;&#xC758;-&#xCD94;&#xB860;-inference-from-mapped-types">&#xB9E4;&#xD551; &#xD0C0;&#xC785;&#xC758; &#xCD94;&#xB860;</a></li>
</ul>
<p><a href="#&#xC870;&#xAC74;&#xBD80;-&#xD0C0;&#xC785;-conditional-types">&#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785;</a></p>
<ul>
<li><a href="#&#xBD84;&#xC0B0;-&#xC870;&#xAC74;&#xBD80;-&#xD0C0;&#xC785;-distributive-conditional-types">&#xBD84;&#xC0B0; &#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785;</a></li>
<li><a href="#&#xC870;&#xAC74;&#xBD80;-&#xD0C0;&#xC785;&#xC758;-&#xD0C0;&#xC785;-&#xCD94;&#xB860;-type-inference-in-conditional-types">&#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785;&#xC758; &#xD0C0;&#xC785; &#xCD94;&#xB860;</a></li>
<li><a href="#&#xBBF8;&#xB9AC;-&#xC815;&#xC758;&#xB41C;-&#xC870;&#xAC74;&#xBD80;-&#xD0C0;&#xC785;-predefined-conditional-types">&#xBBF8;&#xB9AC; &#xC815;&#xC758;&#xB41C; &#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785;</a></li>
</ul>
<h1 id="&#xAD50;&#xCC28;-&#xD0C0;&#xC785;-intersection-types">&#xAD50;&#xCC28; &#xD0C0;&#xC785; (Intersection Types)</h1>
<p>&#xAD50;&#xCC28; &#xD0C0;&#xC785;&#xC740; &#xC5EC;&#xB7EC; &#xD0C0;&#xC785;&#xC744; &#xD558;&#xB098;&#xB85C; &#xACB0;&#xD569;&#xD569;&#xB2C8;&#xB2E4;.
&#xAE30;&#xC874; &#xD0C0;&#xC785;&#xC744; &#xD569;&#xCCD0; &#xD544;&#xC694;&#xD55C; &#xBAA8;&#xB4E0; &#xAE30;&#xB2A5;&#xC744; &#xAC00;&#xC9C4; &#xD558;&#xB098;&#xC758; &#xD0C0;&#xC785;&#xC744; &#xC5BB;&#xC744; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xC608;&#xB97C; &#xB4E4;&#xC5B4;, <code>Person &amp; Serializable &amp; Loggable</code>&#xC740; <code>Person</code> <em>&#xACFC;</em> <code>Serializable</code> <em>&#xADF8;&#xB9AC;&#xACE0;</em> <code>Loggable</code>&#xC785;&#xB2C8;&#xB2E4;.
&#xC989;, &#xC774; &#xD0C0;&#xC785;&#xC758; &#xAC1D;&#xCCB4;&#xB294; &#xC138; &#xAC00;&#xC9C0; &#xD0C0;&#xC785;&#xC758; &#xBAA8;&#xB4E0; &#xBA64;&#xBC84;&#xB97C; &#xAC16;&#xAC8C; &#xB429;&#xB2C8;&#xB2E4;.</p>
<p>&#xAE30;&#xC874; &#xAC1D;&#xCCB4;-&#xC9C0;&#xD5A5; &#xD2C0;&#xACFC;&#xB294; &#xB9DE;&#xC9C0; &#xC54A;&#xB294; &#xBBF9;&#xC2A4;&#xC778;&#xC774;&#xB098; &#xB2E4;&#xB978; &#xCEE8;&#xC149;&#xB4E4;&#xC5D0;&#xC11C; &#xAD50;&#xCC28; &#xD0C0;&#xC785;&#xC774; &#xC0AC;&#xC6A9;&#xB418;&#xB294; &#xAC83;&#xC744; &#xBCFC; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
(JavaScript&#xC5D0;&#xB294; &#xC774;&#xB7F0; &#xAC83;&#xB4E4;&#xC774; &#xB9CE;&#xC2B5;&#xB2C8;&#xB2E4;!)
&#xBBF9;&#xC2A4;&#xC778; &#xB9CC;&#xB4DC;&#xB294; &#xBC29;&#xBC95;&#xC744; &#xAC04;&#xB2E8;&#xD55C; &#xC608;&#xC81C;&#xB97C; &#xD1B5;&#xD574; &#xC0B4;&#xD3B4;&#xBCF4;&#xACA0;&#xC2B5;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-keyword">function</span> <span class="cm-variable">extend</span><span class="cm-operator">&lt;</span><span class="cm-variable">First</span>, <span class="cm-variable">Second</span><span class="cm-operator">&gt;</span>(<span class="cm-variable">first</span>: <span class="cm-variable">First</span>, <span class="cm-variable">second</span>: <span class="cm-variable">Second</span>): <span class="cm-variable">First</span> <span class="cm-operator">&amp;</span> <span class="cm-variable">Second</span> {
    <span class="cm-keyword">const</span> <span class="cm-variable">result</span>: <span class="cm-variable-3">Partial</span><span class="cm-operator">&lt;</span><span class="cm-variable">First</span> <span class="cm-operator">&amp;</span> <span class="cm-variable">Second</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> {};
    <span class="cm-keyword">for</span> (<span class="cm-keyword">const</span> <span class="cm-variable">prop</span> <span class="cm-keyword">in</span> <span class="cm-variable">first</span>) {
        <span class="cm-keyword">if</span> (<span class="cm-variable">first</span>.<span class="cm-property">hasOwnProperty</span>(<span class="cm-variable">prop</span>)) {
            (<span class="cm-variable">result</span> <span class="cm-variable">as</span> <span class="cm-variable">First</span>)[<span class="cm-variable">prop</span>] <span class="cm-operator">=</span> <span class="cm-variable">first</span>[<span class="cm-variable">prop</span>];
        }
    }
    <span class="cm-keyword">for</span> (<span class="cm-keyword">const</span> <span class="cm-variable">prop</span> <span class="cm-keyword">in</span> <span class="cm-variable">second</span>) {
        <span class="cm-keyword">if</span> (<span class="cm-variable">second</span>.<span class="cm-property">hasOwnProperty</span>(<span class="cm-variable">prop</span>)) {
            (<span class="cm-variable">result</span> <span class="cm-variable">as</span> <span class="cm-variable">Second</span>)[<span class="cm-variable">prop</span>] <span class="cm-operator">=</span> <span class="cm-variable">second</span>[<span class="cm-variable">prop</span>];
        }
    }
    <span class="cm-keyword">return</span> <span class="cm-variable">result</span> <span class="cm-variable">as</span> <span class="cm-variable">First</span> <span class="cm-operator">&amp;</span> <span class="cm-variable">Second</span>;
}

<span class="cm-keyword">class</span> <span class="cm-variable">Person</span> {
    <span class="cm-keyword">constructor</span>(<span class="cm-keyword">public</span> <span class="cm-variable">name</span>: <span class="cm-variable-3">string</span>) { }
}

<span class="cm-keyword">interface</span> <span class="cm-variable">Loggable</span> {
    <span class="cm-variable">log</span>(<span class="cm-variable">name</span>: <span class="cm-variable-3">string</span>): <span class="cm-variable">void</span>;
}

<span class="cm-keyword">class</span> <span class="cm-variable">ConsoleLogger</span> <span class="cm-variable">implements</span> <span class="cm-variable">Loggable</span> {
    <span class="cm-variable">log</span>(<span class="cm-variable">name</span>) {
        <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-string-2">`Hello, I&apos;m ${</span><span class="cm-variable">name</span><span class="cm-string-2">}</span><span class="cm-string-2">.`</span>);
    }
}

<span class="cm-keyword">const</span> <span class="cm-variable">jim</span> <span class="cm-operator">=</span> <span class="cm-variable">extend</span>(<span class="cm-keyword">new</span> <span class="cm-variable">Person</span>(<span class="cm-string">&apos;Jim&apos;</span>), <span class="cm-variable">ConsoleLogger</span>.<span class="cm-property">prototype</span>);
<span class="cm-variable">jim</span>.<span class="cm-property">log</span>(<span class="cm-variable">jim</span>.<span class="cm-property">name</span>);
</code></pre>
<h1 id="&#xC720;&#xB2C8;&#xC5B8;-&#xD0C0;&#xC785;-union-types">&#xC720;&#xB2C8;&#xC5B8; &#xD0C0;&#xC785; (Union Types)</h1>
<p>&#xC720;&#xB2C8;&#xC5B8; &#xD0C0;&#xC785;&#xC740; &#xAD50;&#xCC28; &#xD0C0;&#xC785;&#xACFC; &#xBC00;&#xC811;&#xD558;&#xAC8C; &#xAD00;&#xB828;&#xB418;&#xC5B4; &#xC788;&#xC9C0;&#xB9CC;, &#xB9E4;&#xC6B0; &#xB2E4;&#xB974;&#xAC8C; &#xC0AC;&#xC6A9;&#xB429;&#xB2C8;&#xB2E4;.
&#xAC00;&#xB054;, <code>&#xC22B;&#xC790;</code>&#xB098; <code>&#xBB38;&#xC790;&#xC5F4;</code>&#xC744; &#xB9E4;&#xAC1C;&#xBCC0;&#xC218;&#xB85C; &#xAE30;&#xB300;&#xD558;&#xB294; &#xB77C;&#xC774;&#xBE0C;&#xB7EC;&#xB9AC;&#xB97C; &#xC0AC;&#xC6A9;&#xD560; &#xB54C;&#xAC00; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xC608;&#xB97C; &#xB4E4;&#xC5B4;, &#xB2E4;&#xC74C; &#xD568;&#xC218;&#xB97C; &#xC0AC;&#xC6A9;&#xD560; &#xB54C;&#xC785;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-comment">/**</span>
<span class="cm-comment"> * &#xBB38;&#xC790;&#xC5F4;&#xC744; &#xBC1B;&#xACE0; &#xC67C;&#xCABD;&#xC5D0; &quot;padding&quot;&#xC744; &#xCD94;&#xAC00;&#xD569;&#xB2C8;&#xB2E4;.</span>
<span class="cm-comment"> * &#xB9CC;&#xC57D; &apos;padding&apos;&#xC774; &#xBB38;&#xC790;&#xC5F4;&#xC774;&#xB77C;&#xBA74;, &apos;padding&apos;&#xC740; &#xC67C;&#xCABD;&#xC5D0; &#xB354;&#xD574;&#xC9C8; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;.</span>
<span class="cm-comment"> * &#xB9CC;&#xC57D; &apos;padding&apos;&#xC774; &#xC22B;&#xC790;&#xB77C;&#xBA74;, &#xADF8; &#xC22B;&#xC790;&#xB9CC;&#xD07C;&#xC758; &#xACF5;&#xBC31;&#xC774; &#xC67C;&#xCABD;&#xC5D0; &#xB354;&#xD574;&#xC9C8; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;.</span>
<span class="cm-comment"> */</span>
<span class="cm-keyword">function</span> <span class="cm-variable">padLeft</span>(<span class="cm-def">value</span>: <span class="cm-variable-3">string</span>, <span class="cm-def">padding</span>: <span class="cm-variable-3">any</span>) {
    <span class="cm-keyword">if</span> (<span class="cm-keyword">typeof</span> <span class="cm-variable-2">padding</span> <span class="cm-operator">===</span> <span class="cm-string">&quot;number&quot;</span>) {
        <span class="cm-keyword">return</span> <span class="cm-variable">Array</span>(<span class="cm-variable-2">padding</span> <span class="cm-operator">+</span> <span class="cm-number">1</span>).<span class="cm-property">join</span>(<span class="cm-string">&quot; &quot;</span>) <span class="cm-operator">+</span> <span class="cm-variable-2">value</span>;
    }
    <span class="cm-keyword">if</span> (<span class="cm-keyword">typeof</span> <span class="cm-variable-2">padding</span> <span class="cm-operator">===</span> <span class="cm-string">&quot;string&quot;</span>) {
        <span class="cm-keyword">return</span> <span class="cm-variable-2">padding</span> <span class="cm-operator">+</span> <span class="cm-variable-2">value</span>;
    }
    <span class="cm-keyword">throw</span> <span class="cm-keyword">new</span> <span class="cm-variable">Error</span>(<span class="cm-string-2">`Expected string or number, got &apos;${</span><span class="cm-variable-2">padding</span><span class="cm-string-2">}</span><span class="cm-string-2">&apos;.`</span>);
}

<span class="cm-variable">padLeft</span>(<span class="cm-string">&quot;Hello world&quot;</span>, <span class="cm-number">4</span>); <span class="cm-comment">// &quot;    Hello world&quot;&#xB97C; &#xBC18;&#xD658;&#xD569;&#xB2C8;&#xB2E4;.</span>
</code></pre>
<p><code>padLeft</code>&#xC758; &#xBB38;&#xC81C;&#xB294; &#xB9E4;&#xAC1C;&#xBCC0;&#xC218; <code>padding</code>&#xC774; <code>any</code> &#xD0C0;&#xC785;&#xC73C;&#xB85C; &#xB418;&#xC5B4;&#xC788;&#xB2E4;&#xB294; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;.
&#xC989;, <code>&#xC22B;&#xC790;</code>&#xB098; <code>&#xBB38;&#xC790;&#xC5F4;</code> &#xB458; &#xB2E4; &#xC544;&#xB2CC; &#xC778;&#xC218;&#xB85C; &#xD638;&#xCD9C;&#xD560; &#xC218; &#xC788;&#xB2E4;&#xB294; &#xAC83;&#xC774;&#xACE0;, TypeScript&#xB294; &#xC774;&#xB97C; &#xAD1C;&#xCC2E;&#xB2E4;&#xACE0; &#xBC1B;&#xC544;&#xB4E4;&#xC77C; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-keyword">let</span> <span class="cm-variable">indentedString</span> <span class="cm-operator">=</span> <span class="cm-variable">padLeft</span>(<span class="cm-string">&quot;Hello world&quot;</span>, <span class="cm-atom">true</span>); <span class="cm-comment">// &#xCEF4;&#xD30C;&#xC77C; &#xD0C0;&#xC784;&#xC5D0; &#xD1B5;&#xACFC;&#xB418;&#xACE0;, &#xB7F0;&#xD0C0;&#xC784;&#xC5D0; &#xC624;&#xB958;.</span>
</code></pre>
<p>&#xC804;&#xD1B5;&#xC801;&#xC778; &#xAC1D;&#xCCB4;&#xC9C0;&#xD5A5; &#xCF54;&#xB4DC;&#xC5D0;&#xC11C;, &#xD0C0;&#xC785;&#xC758; &#xACC4;&#xCE35;&#xC744; &#xC0DD;&#xC131;&#xD558;&#xC5EC; &#xB450; &#xD0C0;&#xC785;&#xC744; &#xCD94;&#xC0C1;&#xD654;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xC774;&#xB294; &#xB354; &#xBA85;&#xC2DC;&#xC801;&#xC77C; &#xC218;&#xB294; &#xC788;&#xC9C0;&#xB9CC;, &#xC880; &#xACFC;&#xD558;&#xB2E4;&#xACE0; &#xD560; &#xC218;&#xB3C4; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xC804;&#xD1B5;&#xC801;&#xC778; &#xBC29;&#xBC95;&#xC758; <code>padLeft</code>&#xC5D0;&#xC11C; &#xC88B;&#xC740; &#xC810;&#xC740; &#xADF8;&#xB0E5; &#xC6D0;&#xC2DC; &#xAC12;&#xC744; &#xC804;&#xB2EC;&#xD560; &#xC218; &#xC788;&#xB2E4;&#xB294; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;.
&#xC989; &#xC0AC;&#xC6A9;&#xBC95;&#xC774; &#xAC04;&#xB2E8;&#xD558;&#xACE0; &#xAC04;&#xACB0;&#xD569;&#xB2C8;&#xB2E4;.
&#xC774; &#xC0C8;&#xB85C;&#xC6B4; &#xBC29;&#xBC95;&#xC740; &#xB2E4;&#xB978; &#xACF3;&#xC5D0;&#xC11C; &#xC774;&#xBBF8; &#xC874;&#xC7AC;&#xD558;&#xB294; &#xD568;&#xC218;&#xB97C; &#xC0AC;&#xC6A9;&#xD558;&#xB824; &#xD560; &#xB54C;, &#xB3C4;&#xC6C0;&#xC774; &#xB418;&#xC9C0; &#xC54A;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<p><code>any</code> &#xB300;&#xC2E0;&#xC5D0;, <em>&#xC720;&#xB2C8;&#xC5B8; &#xD0C0;&#xC785;</em>&#xC744; &#xB9E4;&#xAC1C;&#xBCC0;&#xC218; <code>padding</code>&#xC5D0; &#xC0AC;&#xC6A9;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-comment">/**</span>
<span class="cm-comment"> * &#xBB38;&#xC790;&#xC5F4;&#xC744; &#xBC1B;&#xACE0; &#xC67C;&#xCABD;&#xC5D0; &quot;padding&quot;&#xC744; &#xCD94;&#xAC00;&#xD569;&#xB2C8;&#xB2E4;.</span>
<span class="cm-comment"> * &#xB9CC;&#xC57D; &apos;padding&apos;&#xC774; &#xBB38;&#xC790;&#xC5F4;&#xC774;&#xB77C;&#xBA74;, &apos;padding&apos;&#xC740; &#xC67C;&#xCABD;&#xC5D0; &#xB354;&#xD574;&#xC9C8; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;.</span>
<span class="cm-comment"> * &#xB9CC;&#xC57D; &apos;padding&apos;&#xC774; &#xC22B;&#xC790;&#xB77C;&#xBA74;, &#xADF8; &#xC22B;&#xC790;&#xB9CC;&#xD07C;&#xC758; &#xACF5;&#xBC31;&#xC774; &#xC67C;&#xCABD;&#xC5D0; &#xB354;&#xD574;&#xC9C8; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;.</span>
<span class="cm-comment"> */</span>
<span class="cm-keyword">function</span> <span class="cm-variable">padLeft</span>(<span class="cm-def">value</span>: <span class="cm-variable-3">string</span>, <span class="cm-def">padding</span>: <span class="cm-variable-3">string</span> <span class="cm-operator">|</span> <span class="cm-variable-3">number</span>) {
    <span class="cm-comment">// ...</span>
}

<span class="cm-keyword">let</span> <span class="cm-variable">indentedString</span> <span class="cm-operator">=</span> <span class="cm-variable">padLeft</span>(<span class="cm-string">&quot;Hello world&quot;</span>, <span class="cm-atom">true</span>); <span class="cm-comment">// &#xCEF4;&#xD30C;&#xC77C; &#xC911;&#xC5D0; &#xC624;&#xB958;</span>
</code></pre>
<p>&#xC720;&#xB2C8;&#xC5B8; &#xD0C0;&#xC785;&#xC740; &#xAC12;&#xC774; &#xC5EC;&#xB7EC; &#xD0C0;&#xC785; &#xC911; &#xD558;&#xB098;&#xC784;&#xC744; &#xC124;&#xBA85;&#xD569;&#xB2C8;&#xB2E4;.
&#xC138;&#xB85C; &#xB9C9;&#xB300; (<code>|</code>)&#xB85C; &#xAC01; &#xD0C0;&#xC785;&#xC744; &#xAD6C;&#xBD84;&#xD558;&#xC5EC; <code>number | string | boolean</code>&#xC740; &#xAC12;&#xC758; &#xD0C0;&#xC785;&#xC774; <code>number</code>, <code>string</code> &#xD639;&#xC740; <code>boolean</code>&#xC774; &#xB420; &#xC218; &#xC788;&#xC74C;&#xC744; &#xB098;&#xD0C0;&#xB0C5;&#xB2C8;&#xB2E4;.</p>
<p>&#xC720;&#xB2C8;&#xC5B8; &#xD0C0;&#xC785;&#xC744; &#xAC12;&#xC73C;&#xB85C; &#xAC00;&#xC9C0;&#xACE0; &#xC788;&#xC73C;&#xBA74;, &#xC720;&#xB2C8;&#xC5B8;&#xC5D0; &#xC788;&#xB294; &#xBAA8;&#xB4E0; &#xD0C0;&#xC785;&#xC5D0; &#xACF5;&#xD1B5;&#xC778; &#xBA64;&#xBC84;&#xC5D0;&#xB9CC; &#xC811;&#xADFC;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-keyword">interface</span> <span class="cm-variable">Bird</span> {
    <span class="cm-variable">fly</span>();
    <span class="cm-variable">layEggs</span>();
}

<span class="cm-keyword">interface</span> <span class="cm-variable">Fish</span> {
    <span class="cm-variable">swim</span>();
    <span class="cm-variable">layEggs</span>();
}

<span class="cm-keyword">function</span> <span class="cm-variable">getSmallPet</span>(): <span class="cm-variable">Fish</span> <span class="cm-operator">|</span> <span class="cm-variable">Bird</span> {
    <span class="cm-comment">// ...</span>
}

<span class="cm-keyword">let</span> <span class="cm-variable">pet</span> <span class="cm-operator">=</span> <span class="cm-variable">getSmallPet</span>();
<span class="cm-variable">pet</span>.<span class="cm-property">layEggs</span>(); <span class="cm-comment">// &#xC131;&#xACF5;</span>
<span class="cm-variable">pet</span>.<span class="cm-property">swim</span>();    <span class="cm-comment">// &#xC624;&#xB958;</span>
</code></pre>
<p>&#xC720;&#xB2C8;&#xC5B8; &#xD0C0;&#xC785;&#xC740; &#xC5EC;&#xAE30;&#xC11C; &#xC57D;&#xAC04; &#xAE4C;&#xB2E4;&#xB85C;&#xC6B8; &#xC218; &#xC788;&#xC73C;&#xB098;, &#xC775;&#xC219;&#xD574;&#xC9C0;&#xB294;&#xB370; &#xC57D;&#xAC04;&#xC758; &#xC9C1;&#xAD00;&#xB9CC; &#xC788;&#xC73C;&#xBA74; &#xB429;&#xB2C8;&#xB2E4;.
&#xB9CC;&#xC57D; &#xAC12;&#xC774; <code>A | B</code> &#xD0C0;&#xC785;&#xC744; &#xAC00;&#xC9C0;&#xACE0; &#xC788;&#xC73C;&#xBA74;, <em>&#xD655;&#xC2E0;&#xD560;</em> &#xC218; &#xC788;&#xB294; &#xAC83;&#xC740; <code>A</code> <em>&#xC640;</em> <code>B</code> &#xB458; &#xB2E4; &#xAC00;&#xC9C0;&#xACE0; &#xC788;&#xB294; &#xBA64;&#xBC84;&#xAC00; &#xC788;&#xB2E4;&#xB294; &#xAC83;&#xBFD0;&#xC785;&#xB2C8;&#xB2E4;.
&#xC774; &#xC608;&#xC81C;&#xC5D0;&#xC11C;, <code>Bird</code>&#xB294; <code>fly</code>&#xB97C; &#xBA64;&#xBC84;&#xB85C; &#xAC00;&#xC9C0;&#xACE0; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
<code>Bird | Fish</code>&#xB85C; &#xD0C0;&#xC785;&#xC774; &#xC9C0;&#xC815;&#xB41C; &#xBCC0;&#xC218;&#xAC00; <code>fly</code> &#xBA54;&#xC11C;&#xB4DC;&#xB97C; &#xAC00;&#xC9C0;&#xACE0; &#xC788;&#xB294;&#xC9C0; &#xD655;&#xC2E0;&#xD560; &#xC218; &#xC5C6;&#xC2B5;&#xB2C8;&#xB2E4;
&#xB9CC;&#xC57D; &#xBCC0;&#xC218;&#xAC00; &#xC2E4;&#xC81C;&#xB85C; &#xB7F0;&#xD0C0;&#xC784;&#xC5D0; <code>Fish</code>&#xC774;&#xBA74;, <code>pet.fly()</code>&#xB97C; &#xD638;&#xCD9C;&#xD558;&#xB294; &#xAC83;&#xC740; &#xC624;&#xB958;&#xC785;&#xB2C8;&#xB2E4;.</p>
<h1 id="&#xD0C0;&#xC785;-&#xAC00;&#xB4DC;&#xC640;-&#xCC28;&#xBCC4;-&#xD0C0;&#xC785;-type-guards-and-differentiating-types">&#xD0C0;&#xC785; &#xAC00;&#xB4DC;&#xC640; &#xCC28;&#xBCC4; &#xD0C0;&#xC785; (Type Guards and Differentiating Types)</h1>
<p>&#xC720;&#xB2C8;&#xC5B8; &#xD0C0;&#xC785;&#xC740; &#xAC12;&#xC758; &#xD0C0;&#xC785;&#xC774; &#xACB9;&#xCCD0;&#xC9C8; &#xC218; &#xC788;&#xB294; &#xC0C1;&#xD669;&#xC744; &#xBAA8;&#xB378;&#xB9C1;&#xD558;&#xB294;&#xB370; &#xC720;&#xC6A9;&#xD569;&#xB2C8;&#xB2E4;.
<code>Fish</code>&#xAC00; &#xC788;&#xB294;&#xC9C0; &#xAD6C;&#xCCB4;&#xC801;&#xC73C;&#xB85C; &#xC54C;&#xACE0; &#xC2F6;&#xC744; &#xB54C;, &#xBB34;&#xC2A8;&#xC77C;&#xC774; &#xBC8C;&#xC5B4;&#xC9C8;&#xAE4C;&#xC694;?
JavaScript&#xC5D0;&#xC11C; &#xAC00;&#xB2A5;&#xD55C; &#xB450; &#xAC12;&#xC744; &#xAD6C;&#xBD84;&#xD558;&#xB294; &#xD754;&#xD55C; &#xBC29;&#xBC95;&#xC740; &#xBA64;&#xBC84;&#xC758; &#xC874;&#xC7AC;&#xB97C; &#xAC80;&#xC0AC;&#xD558;&#xB294; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;.
&#xC55E;&#xC5D0;&#xC11C; &#xB9D0;&#xD588;&#xB4EF;&#xC774;, &#xC720;&#xB2C8;&#xC5B8; &#xD0C0;&#xC785;&#xC758; &#xBAA8;&#xB4E0; &#xAD6C;&#xC131; &#xC131;&#xBD84;&#xC744; &#xAC00;&#xC9C0;&#xACE0; &#xC788;&#xB2E4;&#xACE0; &#xBCF4;&#xC7A5;&#xB418;&#xB294; &#xBA64;&#xBC84;&#xC5D0;&#xB9CC; &#xC811;&#xADFC;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-keyword">let</span> <span class="cm-variable">pet</span> <span class="cm-operator">=</span> <span class="cm-variable">getSmallPet</span>();

<span class="cm-comment">// &#xC774;&#xB807;&#xAC8C; &#xAC01; &#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xB4E4;&#xC5D0; &#xC811;&#xADFC;&#xD558;&#xB294; &#xAC83;&#xC740; &#xC624;&#xB958;&#xB97C; &#xBC1C;&#xC0DD;&#xC2DC;&#xD0B5;&#xB2C8;&#xB2E4;</span>
<span class="cm-keyword">if</span> (<span class="cm-variable">pet</span>.<span class="cm-property">swim</span>) {
    <span class="cm-variable">pet</span>.<span class="cm-property">swim</span>();
}
<span class="cm-keyword">else</span> <span class="cm-keyword">if</span> (<span class="cm-variable">pet</span>.<span class="cm-property">fly</span>) {
    <span class="cm-variable">pet</span>.<span class="cm-property">fly</span>();
}
</code></pre>
<p>&#xAC19;&#xC740; &#xCF54;&#xB4DC;&#xB97C; &#xB3D9;&#xC791;&#xD558;&#xAC8C; &#xD558;&#xB824;&#xBA74;, &#xD0C0;&#xC785; &#xB2E8;&#xC5B8;&#xC744; &#xC0AC;&#xC6A9;&#xD574;&#xC57C; &#xD569;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-keyword">let</span> <span class="cm-variable">pet</span> <span class="cm-operator">=</span> <span class="cm-variable">getSmallPet</span>();

<span class="cm-keyword">if</span> ((<span class="cm-variable">pet</span> <span class="cm-variable">as</span> <span class="cm-variable">Fish</span>).<span class="cm-property">swim</span>) {
    (<span class="cm-variable">pet</span> <span class="cm-variable">as</span> <span class="cm-variable">Fish</span>).<span class="cm-property">swim</span>();
} <span class="cm-keyword">else</span> <span class="cm-keyword">if</span> ((<span class="cm-variable">pet</span> <span class="cm-variable">as</span> <span class="cm-variable">Bird</span>).<span class="cm-property">fly</span>) {
    (<span class="cm-variable">pet</span> <span class="cm-variable">as</span> <span class="cm-variable">Bird</span>).<span class="cm-property">fly</span>();
}
</code></pre>
<h2 id="&#xC0AC;&#xC6A9;&#xC790;-&#xC815;&#xC758;-&#xD0C0;&#xC785;-&#xAC00;&#xB4DC;-user-defined-type-guards">&#xC0AC;&#xC6A9;&#xC790;-&#xC815;&#xC758; &#xD0C0;&#xC785; &#xAC00;&#xB4DC; (User-Defined Type Guards)</h2>
<p>&#xD0C0;&#xC785; &#xB2E8;&#xC5B8;&#xC744; &#xC5EC;&#xB7EC; &#xBC88; &#xC0AC;&#xC6A9;&#xD55C; &#xAC83;&#xC744; &#xC8FC;&#xBAA9;&#xD558;&#xC138;&#xC694;.
&#xB9CC;&#xC57D; &#xAC80;&#xC0AC;&#xB97C; &#xC2E4;&#xC2DC;&#xD588;&#xC744; &#xB54C;, &#xAC01; &#xBE0C;&#xB79C;&#xCE58;&#xC5D0;&#xC11C; <code>pet</code>&#xC758; &#xD0C0;&#xC785;&#xC744; &#xC54C; &#xC218; &#xC788;&#xB2E4;&#xBA74; &#xD6E8;&#xC52C; &#xC88B;&#xC744; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;.</p>
<p>&#xB9C8;&#xCE68; TypeScript&#xC5D0;&#xB294; <em>&#xD0C0;&#xC785; &#xAC00;&#xB4DC;</em>&#xB77C;&#xB294; &#xAC83;&#xC774; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xD0C0;&#xC785; &#xAC00;&#xB4DC;&#xB294; &#xC2A4;&#xCF54;&#xD504; &#xC548;&#xC5D0;&#xC11C;&#xC758; &#xD0C0;&#xC785;&#xC744; &#xBCF4;&#xC7A5;&#xD558;&#xB294; &#xB7F0;&#xD0C0;&#xC784; &#xAC80;&#xC0AC;&#xB97C; &#xC218;&#xD589;&#xD55C;&#xB2E4;&#xB294; &#xD45C;&#xD604;&#xC2DD;&#xC785;&#xB2C8;&#xB2E4;.</p>
<h3 id="&#xD0C0;&#xC785;-&#xC11C;&#xC220;&#xC5B4;-&#xC0AC;&#xC6A9;&#xD558;&#xAE30;-using-type-predicates">&#xD0C0;&#xC785; &#xC11C;&#xC220;&#xC5B4; &#xC0AC;&#xC6A9;&#xD558;&#xAE30; (Using type predicates)</h3>
<p>&#xD0C0;&#xC785; &#xAC00;&#xB4DC;&#xB97C; &#xC815;&#xC758;&#xD558;&#xAE30; &#xC704;&#xD574;, &#xBC18;&#xD658; &#xD0C0;&#xC785;&#xC774; <em>&#xD0C0;&#xC785; &#xC11C;&#xC220;&#xC5B4;</em>&#xC778; &#xD568;&#xC218;&#xB97C; &#xC815;&#xC758;&#xB9CC; &#xD558;&#xBA74; &#xB429;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-keyword">function</span> <span class="cm-variable">isFish</span>(<span class="cm-def">pet</span>: <span class="cm-variable-3">Fish</span> <span class="cm-operator">|</span> <span class="cm-variable">Bird</span>): <span class="cm-variable">pet</span> <span class="cm-variable">is</span> <span class="cm-variable">Fish</span> {
    <span class="cm-keyword">return</span> (<span class="cm-variable">pet</span> <span class="cm-variable">as</span> <span class="cm-variable">Fish</span>).<span class="cm-property">swim</span> <span class="cm-operator">!==</span> <span class="cm-atom">undefined</span>;
}
</code></pre>
<p><code>pet is Fish</code>&#xB294; &#xC774; &#xC608;&#xC81C;&#xC5D0;&#xC11C;&#xC758; &#xD0C0;&#xC785; &#xC11C;&#xC220;&#xC5B4;&#xC785;&#xB2C8;&#xB2E4;.
&#xC11C;&#xC220;&#xC5B4;&#xB294; <code>parameterName is Type</code> &#xD615;&#xD0DC;&#xC774;&#xACE0;, <code>parameterName</code>&#xB294; &#xBC18;&#xB4DC;&#xC2DC; &#xD604;&#xC7AC; &#xD568;&#xC218; &#xC2DC;&#xADF8;&#xB2C8;&#xCC98;&#xC758; &#xB9E4;&#xAC1C;&#xBCC0;&#xC218; &#xC774;&#xB984;&#xC774;&#xC5B4;&#xC57C; &#xD569;&#xB2C8;&#xB2E4;.</p>
<p><code>isFish</code>&#xAC00; &#xBCC0;&#xC218;&#xC640; &#xD568;&#xAED8; &#xD638;&#xCD9C;&#xB420; &#xB54C;&#xB9C8;&#xB2E4;, TypeScript&#xB294; &#xAE30;&#xC874; &#xD0C0;&#xC785;&#xACFC; &#xD638;&#xD658;&#xB41C;&#xB2E4;&#xBA74; &#xADF8; &#xBCC0;&#xC218;&#xB97C; &#xD2B9;&#xC815; &#xD0C0;&#xC785;&#xC73C;&#xB85C; <em>&#xC81C;&#xD55C;</em>&#xD560; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-comment">// &#xC774;&#xC81C; &apos;swim&apos;&#xACFC; &apos;fly&apos;&#xC5D0; &#xB300;&#xD55C; &#xBAA8;&#xB4E0; &#xD638;&#xCD9C;&#xC740; &#xD5C8;&#xC6A9;&#xB429;&#xB2C8;&#xB2E4;</span>

<span class="cm-keyword">if</span> (<span class="cm-variable">isFish</span>(<span class="cm-variable">pet</span>)) {
    <span class="cm-variable">pet</span>.<span class="cm-property">swim</span>();
}
<span class="cm-keyword">else</span> {
    <span class="cm-variable">pet</span>.<span class="cm-property">fly</span>();
}
</code></pre>
<p>TypeScript&#xAC00; <code>pet</code>&#xC774; <code>if</code>&#xBB38; &#xC548;&#xC5D0;&#xC11C; <code>Fish</code>&#xB77C;&#xB294; &#xAC83;&#xC744; &#xC54C;&#xACE0; &#xC788;&#xC744;&#xBFD0;&#xB9CC; &#xC544;&#xB2C8;&#xB77C;;
<code>else</code>&#xBB38; &#xC548;&#xC5D0;&#xC11C; <code>Fish</code>&#xAC00; <em>&#xC5C6;&#xB2E4;</em>&#xB294; &#xAC83;&#xC744; &#xC54C;&#xACE0; &#xC788;&#xC73C;&#xBBC0;&#xB85C;, <code>Bird</code>&#xB97C; &#xBC18;&#xB4DC;&#xC2DC; &#xAC00;&#xC9C0;&#xACE0; &#xC788;&#xC5B4;&#xC57C;&#xD569;&#xB2C8;&#xB2E4;.</p>
<h3 id="in-&#xC5F0;&#xC0B0;&#xC790;-&#xC0AC;&#xC6A9;&#xD558;&#xAE30;-using-the-in-operator"><code>in</code> &#xC5F0;&#xC0B0;&#xC790; &#xC0AC;&#xC6A9;&#xD558;&#xAE30; (Using the <code>in</code> operator)</h3>
<p><code>in</code> &#xC5F0;&#xC0B0;&#xC790;&#xB294; &#xD0C0;&#xC785;&#xC744; &#xC881;&#xD788;&#xB294; &#xD45C;&#xD604;&#xC73C;&#xB85C; &#xC791;&#xC6A9;&#xD569;&#xB2C8;&#xB2E4;.</p>
<p><code>n in x</code> &#xD45C;&#xD604;&#xC5D0;&#xC11C;, <code>n</code>&#xC740; &#xBB38;&#xC790;&#xC5F4; &#xB9AC;&#xD130;&#xB7F4; &#xD639;&#xC740; &#xBB38;&#xC790;&#xC5F4; &#xB9AC;&#xD130;&#xB7F4; &#xD0C0;&#xC785;&#xC774;&#xACE0; <code>x</code>&#xB294; &#xC720;&#xB2C8;&#xC5B8; &#xD0C0;&#xC785;&#xC785;&#xB2C8;&#xB2E4;. &quot;true&quot; &#xBD84;&#xAE30;&#xC5D0;&#xC11C;&#xB294; &#xC120;&#xD0DD;&#xC801; &#xD639;&#xC740; &#xD544;&#xC218; &#xD504;&#xB85C;&#xD37C;&#xD2F0; <code>n</code>&#xC744; &#xAC00;&#xC9C0;&#xB294; &#xD0C0;&#xC785;&#xC73C;&#xB85C; &#xC881;&#xD788;&#xACE0;, &quot;false&quot; &#xBD84;&#xAE30;&#xC5D0;&#xC11C;&#xB294; &#xC120;&#xD0DD;&#xC801; &#xD639;&#xC740; &#xB204;&#xB77D;&#xB41C; &#xD504;&#xB85C;&#xD37C;&#xD2F0; <code>n</code>&#xC744; &#xAC00;&#xC9C0;&#xB294; &#xD0C0;&#xC785;&#xC73C;&#xB85C; &#xC881;&#xD600;&#xC9D1;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-keyword">function</span> <span class="cm-variable">move</span>(<span class="cm-def">pet</span>: <span class="cm-variable-3">Fish</span> <span class="cm-operator">|</span> <span class="cm-variable">Bird</span>) {
    <span class="cm-keyword">if</span> (<span class="cm-string">&quot;swim&quot;</span> <span class="cm-keyword">in</span> <span class="cm-variable-2">pet</span>) {
        <span class="cm-keyword">return</span> <span class="cm-variable-2">pet</span>.<span class="cm-property">swim</span>();
    }
    <span class="cm-keyword">return</span> <span class="cm-variable-2">pet</span>.<span class="cm-property">fly</span>();
}
</code></pre>
<h2 id="typeof-&#xD0C0;&#xC785;-&#xAC00;&#xB4DC;-typeof-type-guards"><code>typeof</code> &#xD0C0;&#xC785; &#xAC00;&#xB4DC; (<code>typeof</code> type guards)</h2>
<p>&#xB2E4;&#xC2DC; &#xB3CC;&#xC544;&#xC640;&#xC11C; &#xC720;&#xB2C8;&#xC5B8; &#xD0C0;&#xC785;&#xC744; &#xC0AC;&#xC6A9;&#xD558;&#xB294; &#xBC84;&#xC804;&#xC758; <code>padLeft</code> &#xCF54;&#xB4DC;&#xB97C; &#xC791;&#xC131;&#xD574;&#xBCF4;&#xACA0;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xB2E4;&#xC74C;&#xACFC; &#xAC19;&#xC774; &#xD0C0;&#xC785; &#xC11C;&#xC220;&#xC5B4;&#xB97C; &#xC0AC;&#xC6A9;&#xD574;&#xC11C; &#xC791;&#xC131;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-keyword">function</span> <span class="cm-variable">isNumber</span>(<span class="cm-def">x</span>: <span class="cm-variable-3">any</span>): <span class="cm-variable">x</span> <span class="cm-variable">is</span> <span class="cm-variable-3">number</span> {
    <span class="cm-keyword">return</span> <span class="cm-keyword">typeof</span> <span class="cm-variable">x</span> <span class="cm-operator">===</span> <span class="cm-string">&quot;number&quot;</span>;
}

<span class="cm-keyword">function</span> <span class="cm-variable">isString</span>(<span class="cm-def">x</span>: <span class="cm-variable-3">any</span>): <span class="cm-variable">x</span> <span class="cm-variable">is</span> <span class="cm-variable-3">string</span> {
    <span class="cm-keyword">return</span> <span class="cm-keyword">typeof</span> <span class="cm-variable">x</span> <span class="cm-operator">===</span> <span class="cm-string">&quot;string&quot;</span>;
}

<span class="cm-keyword">function</span> <span class="cm-variable">padLeft</span>(<span class="cm-def">value</span>: <span class="cm-variable-3">string</span>, <span class="cm-def">padding</span>: <span class="cm-variable-3">string</span> <span class="cm-operator">|</span> <span class="cm-variable-3">number</span>) {
    <span class="cm-keyword">if</span> (<span class="cm-variable">isNumber</span>(<span class="cm-variable-2">padding</span>)) {
        <span class="cm-keyword">return</span> <span class="cm-variable">Array</span>(<span class="cm-variable-2">padding</span> <span class="cm-operator">+</span> <span class="cm-number">1</span>).<span class="cm-property">join</span>(<span class="cm-string">&quot; &quot;</span>) <span class="cm-operator">+</span> <span class="cm-variable-2">value</span>;
    }
    <span class="cm-keyword">if</span> (<span class="cm-variable">isString</span>(<span class="cm-variable-2">padding</span>)) {
        <span class="cm-keyword">return</span> <span class="cm-variable-2">padding</span> <span class="cm-operator">+</span> <span class="cm-variable-2">value</span>;
    }
    <span class="cm-keyword">throw</span> <span class="cm-keyword">new</span> <span class="cm-variable">Error</span>(<span class="cm-string-2">`Expected string or number, got &apos;${</span><span class="cm-variable-2">padding</span><span class="cm-string-2">}</span><span class="cm-string-2">&apos;.`</span>);
}
</code></pre>
<p>&#xADF8;&#xB7EC;&#xB098; &#xD0C0;&#xC785;&#xC774; &#xC6D0;&#xC2DC; &#xAC12;&#xC778;&#xC9C0; &#xD655;&#xC778;&#xD558;&#xB294; &#xD568;&#xC218;&#xB97C; &#xC815;&#xC758;&#xD558;&#xB294; &#xAC83;&#xC740; &#xB108;&#xBB34;&#xB098; &#xADC0;&#xCC2E;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xC6B4; &#xC88B;&#xAC8C;&#xB3C4;, TypeScript&#xB294; <code>typeof</code>&#xB97C; &#xD0C0;&#xC785; &#xAC00;&#xB4DC;&#xB85C; &#xC778;&#xC2DD;&#xD558;&#xAE30; &#xB54C;&#xBB38;&#xC5D0; <code>typeof x === &quot;number&quot;</code>&#xB97C; &#xD568;&#xC218;&#xB85C; &#xCD94;&#xC0C1;&#xD560; &#xD544;&#xC694;&#xAC00; &#xC5C6;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xC989; &#xD0C0;&#xC785; &#xAC80;&#xC0AC;&#xB97C; &#xC778;&#xB77C;&#xC778;&#xC73C;&#xB85C; &#xC791;&#xC131;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-keyword">function</span> <span class="cm-variable">padLeft</span>(<span class="cm-def">value</span>: <span class="cm-variable-3">string</span>, <span class="cm-def">padding</span>: <span class="cm-variable-3">string</span> <span class="cm-operator">|</span> <span class="cm-variable-3">number</span>) {
    <span class="cm-keyword">if</span> (<span class="cm-keyword">typeof</span> <span class="cm-variable-2">padding</span> <span class="cm-operator">===</span> <span class="cm-string">&quot;number&quot;</span>) {
        <span class="cm-keyword">return</span> <span class="cm-variable">Array</span>(<span class="cm-variable-2">padding</span> <span class="cm-operator">+</span> <span class="cm-number">1</span>).<span class="cm-property">join</span>(<span class="cm-string">&quot; &quot;</span>) <span class="cm-operator">+</span> <span class="cm-variable-2">value</span>;
    }
    <span class="cm-keyword">if</span> (<span class="cm-keyword">typeof</span> <span class="cm-variable-2">padding</span> <span class="cm-operator">===</span> <span class="cm-string">&quot;string&quot;</span>) {
        <span class="cm-keyword">return</span> <span class="cm-variable-2">padding</span> <span class="cm-operator">+</span> <span class="cm-variable-2">value</span>;
    }
    <span class="cm-keyword">throw</span> <span class="cm-keyword">new</span> <span class="cm-variable">Error</span>(<span class="cm-string-2">`Expected string or number, got &apos;${</span><span class="cm-variable-2">padding</span><span class="cm-string-2">}</span><span class="cm-string-2">&apos;.`</span>);
}
</code></pre>
<p><em><code>typeof</code> &#xD0C0;&#xC785; &#xAC00;&#xB4DC;</em>&#xB294; &#xB450; &#xAC00;&#xC9C0; &#xB2E4;&#xB978; &#xD615;&#xC2DD;&#xC778; <code>typeof v === &quot;typename&quot;</code> &#xC640; <code>typeof v !== &quot;typename&quot;</code>&#xC774; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;. &#xC5EC;&#xAE30;&#xC11C; <code>typename</code>&#xC740; <code>&quot;number&quot;</code>, <code>&quot;string&quot;</code>, <code>&quot;boolean&quot;</code> &#xADF8;&#xB9AC;&#xACE0; <code>&quot;symbol&quot;</code>&#xC774;&#xC5EC;&#xC57C; &#xD569;&#xB2C8;&#xB2E4;.
TypeScript&#xC5D0;&#xC11C; &#xC704;&#xC5D0; &#xC5C6;&#xB294; &#xB2E4;&#xB978; &#xBB38;&#xC790;&#xC5F4;&#xACFC; &#xBE44;&#xAD50;&#xD558;&#xB294; &#xAC83;&#xC744; &#xB9C9;&#xC9C0;&#xB294; &#xC54A;&#xC9C0;&#xB9CC;, &#xD0C0;&#xC785; &#xAC00;&#xB4DC;&#xC758; &#xD45C;&#xD604;&#xC2DD;&#xC73C;&#xB85C; &#xC778;&#xC9C0;&#xB418;&#xC9C0; &#xC54A;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<h2 id="instanceof-&#xD0C0;&#xC785;-&#xAC00;&#xB4DC;-instanceof-type-guards"><code>instanceof</code> &#xD0C0;&#xC785; &#xAC00;&#xB4DC; (<code>instanceof</code> type guards)</h2>
<p>&#xC704;&#xC758; <code>typeof</code> &#xD0C0;&#xC785; &#xAC00;&#xB4DC;&#xB97C; &#xC77D;&#xC5C8;&#xACE0; JavaScript&#xC758; <code>instanceof</code> &#xC5F0;&#xC0B0;&#xC790;&#xC5D0; &#xC775;&#xC219;&#xD558;&#xB2E4;&#xBA74; &#xC774;&#xBBF8; &#xC54C;&#xACE0; &#xC788;&#xC744; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;.</p>
<p><em><code>instanceof</code> &#xD0C0;&#xC785; &#xAC00;&#xB4DC;</em> &#xB294; &#xC0DD;&#xC131;&#xC790; &#xD568;&#xC218;&#xB97C; &#xC0AC;&#xC6A9;&#xD558;&#xC5EC; &#xD0C0;&#xC785;&#xC744; &#xC881;&#xD788;&#xB294; &#xBC29;&#xBC95;&#xC785;&#xB2C8;&#xB2E4;.
&#xC704;&#xC758; string-padder &#xC608;&#xC81C;&#xB97C; &#xB2E4;&#xC2DC; &#xBCF4;&#xACA0;&#xC2B5;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-keyword">interface</span> <span class="cm-variable">Padder</span> {
    <span class="cm-variable">getPaddingString</span>(): <span class="cm-variable-3">string</span>
}

<span class="cm-keyword">class</span> <span class="cm-variable">SpaceRepeatingPadder</span> <span class="cm-variable">implements</span> <span class="cm-variable">Padder</span> {
    <span class="cm-keyword">constructor</span>(<span class="cm-keyword">private</span> <span class="cm-variable">numSpaces</span>: <span class="cm-variable-3">number</span>) { }
    <span class="cm-variable">getPaddingString</span>() {
        <span class="cm-keyword">return</span> <span class="cm-variable">Array</span>(<span class="cm-keyword">this</span>.<span class="cm-property">numSpaces</span> <span class="cm-operator">+</span> <span class="cm-number">1</span>).<span class="cm-property">join</span>(<span class="cm-string">&quot; &quot;</span>);
    }
}

<span class="cm-keyword">class</span> <span class="cm-variable">StringPadder</span> <span class="cm-variable">implements</span> <span class="cm-variable">Padder</span> {
    <span class="cm-keyword">constructor</span>(<span class="cm-keyword">private</span> <span class="cm-variable">value</span>: <span class="cm-variable-3">string</span>) { }
    <span class="cm-variable">getPaddingString</span>() {
        <span class="cm-keyword">return</span> <span class="cm-keyword">this</span>.<span class="cm-property">value</span>;
    }
}

<span class="cm-keyword">function</span> <span class="cm-variable">getRandomPadder</span>() {
    <span class="cm-keyword">return</span> <span class="cm-variable">Math</span>.<span class="cm-property">random</span>() <span class="cm-operator">&lt;</span> <span class="cm-number">0.5</span> <span class="cm-operator">?</span>
        <span class="cm-keyword">new</span> <span class="cm-variable">SpaceRepeatingPadder</span>(<span class="cm-number">4</span>) :
        <span class="cm-keyword">new</span> <span class="cm-variable">StringPadder</span>(<span class="cm-string">&quot;  &quot;</span>);
}

<span class="cm-comment">// &#xD0C0;&#xC785;&#xC740; &apos;SpaceRepeatingPadder | StringPadder&apos; &#xC785;&#xB2C8;&#xB2E4;</span>
<span class="cm-keyword">let</span> <span class="cm-variable">padder</span>: <span class="cm-variable-3">Padder</span> <span class="cm-operator">=</span> <span class="cm-variable">getRandomPadder</span>();

<span class="cm-keyword">if</span> (<span class="cm-variable">padder</span> <span class="cm-keyword">instanceof</span> <span class="cm-variable">SpaceRepeatingPadder</span>) {
    <span class="cm-variable">padder</span>; <span class="cm-comment">// &#xD0C0;&#xC785;&#xC740; &apos;SpaceRepeatingPadder&apos;&#xC73C;&#xB85C; &#xC881;&#xD600;&#xC9D1;&#xB2C8;&#xB2E4;</span>
}
<span class="cm-keyword">if</span> (<span class="cm-variable">padder</span> <span class="cm-keyword">instanceof</span> <span class="cm-variable">StringPadder</span>) {
    <span class="cm-variable">padder</span>; <span class="cm-comment">// &#xD0C0;&#xC785;&#xC740; &apos;StringPadder&apos;&#xC73C;&#xB85C; &#xC881;&#xD600;&#xC9D1;&#xB2C8;&#xB2E4;</span>
}
</code></pre>
<p><code>instanceof</code>&#xC758; &#xC624;&#xB978;&#xCABD;&#xC740; &#xC0DD;&#xC131;&#xC790; &#xD568;&#xC218;&#xC5EC;&#xC57C; &#xD558;&#xBA70;, TypeScript&#xB294; &#xB2E4;&#xC74C;&#xACFC; &#xAC19;&#xC774; &#xC881;&#xD799;&#xB2C8;&#xB2E4;:</p>
<ol>
<li>&#xD568;&#xC218;&#xC758; <code>prototype</code> &#xD504;&#xB85C;&#xD37C;&#xD2F0; &#xD0C0;&#xC785;&#xC774; <code>any</code>&#xAC00; &#xC544;&#xB2CC; &#xACBD;&#xC6B0;</li>
<li>&#xD0C0;&#xC785;&#xC758; &#xC0DD;&#xC131;&#xC790; &#xC2DC;&#xADF8;&#xB2C8;&#xCC98;&#xC5D0;&#xC11C; &#xBC18;&#xD658;&#xB41C; &#xC720;&#xB2C8;&#xC5B8; &#xD0C0;&#xC785;&#xC77C; &#xACBD;&#xC6B0;</li>
</ol>
<p>&#xC704;&#xC640; &#xAC19;&#xC740; &#xC21C;&#xC11C;&#xB300;&#xB85C; &#xC9C4;&#xD589;&#xB429;&#xB2C8;&#xB2E4;.</p>
<h1 id="&#xB110;&#xB7EC;&#xBE14;-&#xD0C0;&#xC785;-nullable-types">&#xB110;&#xB7EC;&#xBE14; &#xD0C0;&#xC785; (Nullable types)</h1>
<p>TypeScript&#xB294; &#xAC01;&#xAC01; &#xAC12;&#xC774; null&#xACFC; undefined&#xB97C; &#xAC16;&#xB294; &#xD2B9;&#xC218;&#xD55C; &#xD0C0;&#xC785;&#xC778; <code>null</code>&#xACFC; <code>undefined</code>&#xAC00; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
<a href="basic-types.html">&#xAE30;&#xBCF8; &#xD0C0;&#xC785;</a>&#xC5D0;&#xC11C; &#xC9E7;&#xAC8C; &#xC5B8;&#xAE09;&#xD55C; &#xBC14; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xAE30;&#xBCF8;&#xC801;&#xC73C;&#xB85C;, &#xD0C0;&#xC785; &#xAC80;&#xC0AC; &#xC2DC; <code>null</code>&#xACFC; <code>undefined</code>&#xB97C; &#xC544;&#xBB34;&#xAC83;&#xC5D0;&#xB098; &#xD560;&#xB2F9;&#xD560; &#xC218; &#xC788;&#xB2E4;&#xACE0; &#xAC04;&#xC8FC;&#xD569;&#xB2C8;&#xB2E4;.
&#xC2E4;&#xC81C;&#xB85C; <code>null</code>&#xACFC; <code>undefined</code>&#xB294; &#xBAA8;&#xB4E0; &#xD0C0;&#xC785;&#xC5D0;&#xC11C; &#xC720;&#xD6A8;&#xD55C; &#xAC12;&#xC785;&#xB2C8;&#xB2E4;.
&#xC989;, &#xBC29;&#xC9C0;&#xD558;&#xACE0; &#xC2F6;&#xC5B4;&#xB3C4; &#xC5B4;&#xB5A4; &#xD0C0;&#xC785;&#xC5D0; &#xD560;&#xB2F9;&#xB418;&#xB294; &#xAC83;&#xC744; <em>&#xBC29;&#xC9C0;&#xD560;</em> &#xC5C6;&#xC2B5;&#xB2C8;&#xB2E4;.
<code>null</code>&#xC758; &#xAC1C;&#xBC1C;&#xC790;&#xC778; Tony Hoare&#xB294; &#xC774;&#xB97C; &#xB450;&#xACE0;<a href="https://en.wikipedia.org/wiki/Null_pointer#History" target="_blank">&quot;&#xC2ED;&#xC5B5; &#xBD88;&#xC9DC;&#xB9AC; &#xC2E4;&#xC218; (billion dollar mistake)&quot;</a>&#xB77C;&#xACE0; &#xBD80;&#xB985;&#xB2C8;&#xB2E4;.</p>
<p>&#xC774;&#xAC74; <code>--strictNullChecks</code> &#xD50C;&#xB798;&#xADF8;&#xB85C; &#xD574;&#xACB0;&#xD569;&#xB2C8;&#xB2E4;: &#xBCC0;&#xC218;&#xB97C; &#xC120;&#xC5B8;&#xD560; &#xB54C;, &#xC790;&#xB3D9;&#xC73C;&#xB85C; <code>null</code>&#xC774;&#xB098; <code>undefined</code>&#xB97C; &#xD3EC;&#xD568;&#xD558;&#xC9C0; &#xC54A;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xC720;&#xB2C8;&#xC5B8; &#xD0C0;&#xC785;&#xC744; &#xC0AC;&#xC6A9;&#xD558;&#xC5EC; &#xBA85;&#xC2DC;&#xC801;&#xC73C;&#xB85C; &#xD3EC;&#xD568;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-keyword">let</span> <span class="cm-variable">s</span> <span class="cm-operator">=</span> <span class="cm-string">&quot;foo&quot;</span>;
<span class="cm-variable">s</span> <span class="cm-operator">=</span> <span class="cm-atom">null</span>; <span class="cm-comment">// &#xC624;&#xB958;, &apos;null&apos;&#xC740; &apos;string&apos;&#xC5D0; &#xD560;&#xB2F9;&#xD560; &#xC218; &#xC5C6;&#xC2B5;&#xB2C8;&#xB2E4;</span>
<span class="cm-keyword">let</span> <span class="cm-variable">sn</span>: <span class="cm-variable-3">string</span> <span class="cm-operator">|</span> <span class="cm-atom">null</span> <span class="cm-operator">=</span> <span class="cm-string">&quot;bar&quot;</span>;
<span class="cm-variable">sn</span> <span class="cm-operator">=</span> <span class="cm-atom">null</span>; <span class="cm-comment">// &#xC131;&#xACF5;</span>

<span class="cm-variable">sn</span> <span class="cm-operator">=</span> <span class="cm-atom">undefined</span>; <span class="cm-comment">// &#xC624;&#xB958;, &apos;undefined&apos;&#xB294; &apos;string | null&apos;&#xC5D0; &#xD560;&#xB2F9;&#xD560; &#xC218; &#xC5C6;&#xC2B5;&#xB2C8;&#xB2E4;.</span>
</code></pre>
<p>TypeScript&#xB294; JavaScript&#xC640; &#xB9DE;&#xCD94;&#xAE30; &#xC704;&#xD574; <code>null</code>&#xACFC; <code>undefined</code>&#xB97C; &#xB2E4;&#xB974;&#xAC8C; &#xCC98;&#xB9AC;&#xD569;&#xB2C8;&#xB2E4;.
<code>string | null</code>&#xC740; <code>string | undefined</code>&#xC640; <code>string | undefined | null</code>&#xACFC;&#xB294; &#xB2E4;&#xB978; &#xD0C0;&#xC785;&#xC785;&#xB2C8;&#xB2E4;.</p>
<p>TypeScript 3.7 &#xC774;&#xD6C4;&#xBD80;&#xD130;&#xB294; &#xB110;&#xB7EC;&#xBE14; &#xD0C0;&#xC785;&#xC744; &#xAC04;&#xB2E8;&#xD558;&#xAC8C; &#xB2E4;&#xB8F0; &#xC218; &#xC788;&#xAC8C; <a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chaining" target="_blank">optional chaining</a>&#xB97C; &#xC0AC;&#xC6A9;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<h2 id="&#xC120;&#xD0DD;&#xC801;-&#xB9E4;&#xAC1C;&#xBCC0;&#xC218;&#xC640;-&#xD504;&#xB85C;&#xD37C;&#xD2F0;-optional-parameters-and-properties">&#xC120;&#xD0DD;&#xC801; &#xB9E4;&#xAC1C;&#xBCC0;&#xC218;&#xC640; &#xD504;&#xB85C;&#xD37C;&#xD2F0; (Optional parameters and properties)</h2>
<p><code>--strictNullChecks</code>&#xB97C; &#xC801;&#xC6A9;&#xD558;&#xBA74;, &#xC120;&#xD0DD;&#xC801; &#xB9E4;&#xAC1C;&#xBCC0;&#xC218;&#xAC00; <code>| undefined</code>&#xB97C; &#xC790;&#xB3D9;&#xC73C;&#xB85C; &#xCD94;&#xAC00;&#xD569;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-keyword">function</span> <span class="cm-variable">f</span>(<span class="cm-def">x</span>: <span class="cm-variable-3">number</span>, <span class="cm-def">y</span><span class="cm-operator">?</span>: <span class="cm-variable-3">number</span>) {
    <span class="cm-keyword">return</span> <span class="cm-variable-2">x</span> <span class="cm-operator">+</span> (<span class="cm-variable-2">y</span> <span class="cm-operator">||</span> <span class="cm-number">0</span>);
}
<span class="cm-variable">f</span>(<span class="cm-number">1</span>, <span class="cm-number">2</span>);
<span class="cm-variable">f</span>(<span class="cm-number">1</span>);
<span class="cm-variable">f</span>(<span class="cm-number">1</span>, <span class="cm-atom">undefined</span>);
<span class="cm-variable">f</span>(<span class="cm-number">1</span>, <span class="cm-atom">null</span>); <span class="cm-comment">// &#xC624;&#xB958;, &apos;null&apos;&#xC740; &apos;number | undefined&apos;&#xC5D0; &#xD560;&#xB2F9;&#xD560; &#xC218; &#xC5C6;&#xC2B5;&#xB2C8;&#xB2E4;</span>
</code></pre>
<p>&#xC120;&#xD0DD;&#xC801; &#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xB3C4; &#xB9C8;&#xCC2C;&#xAC00;&#xC9C0;&#xC785;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-keyword">class</span> <span class="cm-variable">C</span> {
    <span class="cm-property">a</span>: <span class="cm-variable-3">number</span>;
    <span class="cm-variable">b</span><span class="cm-operator">?</span>: <span class="cm-variable-3">number</span>;
}
<span class="cm-keyword">let</span> <span class="cm-variable">c</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">C</span>();
<span class="cm-variable">c</span>.<span class="cm-property">a</span> <span class="cm-operator">=</span> <span class="cm-number">12</span>;
<span class="cm-variable">c</span>.<span class="cm-property">a</span> <span class="cm-operator">=</span> <span class="cm-atom">undefined</span>; <span class="cm-comment">// &#xC624;&#xB958;, &apos;undefined&apos;&#xB294; &apos;number&apos;&#xC5D0; &#xD560;&#xB2F9;&#xD560; &#xC218; &#xC5C6;&#xC2B5;&#xB2C8;&#xB2E4;</span>
<span class="cm-variable">c</span>.<span class="cm-property">b</span> <span class="cm-operator">=</span> <span class="cm-number">13</span>;
<span class="cm-variable">c</span>.<span class="cm-property">b</span> <span class="cm-operator">=</span> <span class="cm-atom">undefined</span>; <span class="cm-comment">// &#xC131;&#xACF5;</span>
<span class="cm-variable">c</span>.<span class="cm-property">b</span> <span class="cm-operator">=</span> <span class="cm-atom">null</span>; <span class="cm-comment">// &#xC624;&#xB958;, &apos;null&apos;&#xC740; &apos;number | undefined&apos;&#xC5D0; &#xD560;&#xB2F9;&#xD560; &#xC218; &#xC5C6;&#xC2B5;&#xB2C8;&#xB2E4;.</span>
</code></pre>
<h2 id="&#xD0C0;&#xC785;-&#xAC00;&#xB4DC;&#xC640;-&#xD0C0;&#xC785;-&#xB2E8;&#xC5B8;-type-guards-and-type-assertions">&#xD0C0;&#xC785; &#xAC00;&#xB4DC;&#xC640; &#xD0C0;&#xC785; &#xB2E8;&#xC5B8; (Type guards and type assertions)</h2>
<p>&#xB110;&#xB7EC;&#xBE14; &#xD0C0;&#xC785;&#xC774; &#xC720;&#xB2C8;&#xC5B8;&#xC73C;&#xB85C; &#xAD6C;&#xD604;&#xB418;&#xAE30; &#xB54C;&#xBB38;&#xC5D0;, <code>null</code>&#xC744; &#xC81C;&#xAC70;&#xD558;&#xAE30; &#xC704;&#xD574; &#xD0C0;&#xC785; &#xAC00;&#xB4DC;&#xB97C; &#xC0AC;&#xC6A9;&#xD560; &#xD544;&#xC694;&#xAC00; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;
&#xB2E4;&#xD589;&#xD788;, JavaScript&#xC5D0;&#xC11C; &#xC791;&#xC131;&#xD588;&#xB358; &#xCF54;&#xB4DC;&#xC640; &#xB3D9;&#xC77C;&#xD569;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-keyword">function</span> <span class="cm-variable">f</span>(<span class="cm-def">sn</span>: <span class="cm-variable-3">string</span> <span class="cm-operator">|</span> <span class="cm-atom">null</span>): <span class="cm-variable-3">string</span> {
    <span class="cm-keyword">if</span> (<span class="cm-variable">sn</span> <span class="cm-operator">==</span> <span class="cm-atom">null</span>) {
        <span class="cm-keyword">return</span> <span class="cm-string">&quot;default&quot;</span>;
    }
    <span class="cm-keyword">else</span> {
        <span class="cm-keyword">return</span> <span class="cm-variable">sn</span>;
    }
}
</code></pre>
<p>&#xC5EC;&#xAE30;&#xC11C; <code>null</code>&#xC740; &#xD655;&#xC2E4;&#xD558;&#xAC8C; &#xC81C;&#xAC70;&#xB418;&#xC5B4; &#xBCF4;&#xC774;&#xC9C0;&#xB9CC;, &#xAC04;&#xB2E8;&#xD55C; &#xC5F0;&#xC0B0;&#xC790;&#xB97C; &#xC0AC;&#xC6A9;&#xD560; &#xC218;&#xB3C4; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-keyword">function</span> <span class="cm-variable">f</span>(<span class="cm-def">sn</span>: <span class="cm-variable-3">string</span> <span class="cm-operator">|</span> <span class="cm-atom">null</span>): <span class="cm-variable-3">string</span> {
    <span class="cm-keyword">return</span> <span class="cm-variable">sn</span> <span class="cm-operator">||</span> <span class="cm-string">&quot;default&quot;</span>;
}
</code></pre>
<p>&#xCEF4;&#xD30C;&#xC77C;&#xB7EC;&#xAC00; <code>null</code>&#xC774;&#xB098; <code>undefined</code>&#xB97C; &#xC81C;&#xAC70;&#xD560; &#xC218; &#xC5C6;&#xB294; &#xACBD;&#xC6B0;, &#xD0C0;&#xC785; &#xB2E8;&#xC5B8; &#xC5F0;&#xC0B0;&#xC790;&#xB97C; &#xC0AC;&#xC6A9;&#xD558;&#xC5EC; &#xC218;&#xB3D9;&#xC73C;&#xB85C; &#xC81C;&#xAC70;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xAD6C;&#xBB38;&#xC740; <code>!</code>&#xB97C; &#xD6C4;&#xC704; &#xD45C;&#xAE30;&#xD558;&#xB294; &#xBC29;&#xBC95;&#xC785;&#xB2C8;&#xB2E4;: <code>identifier!</code>&#xB294; <code>null</code>&#xACFC; <code>undefined</code>&#xB97C; <code>identifier</code>&#xC758; &#xD0C0;&#xC785;&#xC5D0;&#xC11C; &#xC81C;&#xAC70;&#xD569;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-keyword">function</span> <span class="cm-variable">broken</span>(<span class="cm-def">name</span>: <span class="cm-variable-3">string</span> <span class="cm-operator">|</span> <span class="cm-atom">null</span>): <span class="cm-variable-3">string</span> {
  <span class="cm-keyword">function</span> <span class="cm-variable">postfix</span>(<span class="cm-def">epithet</span>: <span class="cm-variable-3">string</span>) {
    <span class="cm-keyword">return</span> <span class="cm-variable">name</span>.<span class="cm-property">charAt</span>(<span class="cm-number">0</span>) <span class="cm-operator">+</span> <span class="cm-string">&apos;.  the &apos;</span> <span class="cm-operator">+</span> <span class="cm-variable-2">epithet</span>; <span class="cm-comment">// &#xC624;&#xB958;, &apos;name&apos;&#xC740; &#xC544;&#xB9C8;&#xB3C4; null &#xC785;&#xB2C8;&#xB2E4;</span>
  }
  <span class="cm-variable">name</span> <span class="cm-operator">=</span> <span class="cm-variable">name</span> <span class="cm-operator">||</span> <span class="cm-string">&quot;Bob&quot;</span>;
  <span class="cm-keyword">return</span> <span class="cm-variable">postfix</span>(<span class="cm-string">&quot;great&quot;</span>);
}

<span class="cm-keyword">function</span> <span class="cm-variable">fixed</span>(<span class="cm-def">name</span>: <span class="cm-variable-3">string</span> <span class="cm-operator">|</span> <span class="cm-atom">null</span>): <span class="cm-variable-3">string</span> {
  <span class="cm-keyword">function</span> <span class="cm-variable">postfix</span>(<span class="cm-def">epithet</span>: <span class="cm-variable-3">string</span>) {
    <span class="cm-keyword">return</span> <span class="cm-variable">name</span><span class="cm-operator">!</span>.<span class="cm-variable">charAt</span>(<span class="cm-number">0</span>) <span class="cm-operator">+</span> <span class="cm-string">&apos;.  the &apos;</span> <span class="cm-operator">+</span> <span class="cm-variable-2">epithet</span>; <span class="cm-comment">// &#xC131;&#xACF5;</span>
  }
  <span class="cm-variable">name</span> <span class="cm-operator">=</span> <span class="cm-variable">name</span> <span class="cm-operator">||</span> <span class="cm-string">&quot;Bob&quot;</span>;
  <span class="cm-keyword">return</span> <span class="cm-variable">postfix</span>(<span class="cm-string">&quot;great&quot;</span>);
}
</code></pre>
<p>&#xC608;&#xC81C;&#xB294; &#xC911;&#xCCA9; &#xD568;&#xC218;&#xB97C; &#xC0AC;&#xC6A9;&#xD569;&#xB2C8;&#xB2E4;. &#xC65C;&#xB0D0;&#xD558;&#xBA74; &#xCEF4;&#xD30C;&#xC77C;&#xB7EC;&#xAC00; &#xC911;&#xCCA9; &#xD568;&#xC218;&#xC548;&#xC5D0;&#xC11C;&#xB294; null&#xC744; &#xC81C;&#xAC70;&#xD560; &#xC218; &#xC5C6;&#xAE30; &#xB54C;&#xBB38;&#xC785;&#xB2C8;&#xB2E4; (&#xC989;&#xC2DC;-&#xD638;&#xCD9C;&#xB41C; &#xD568;&#xC218; &#xD45C;&#xD604;&#xC740; &#xC608;&#xC678;).
&#xD2B9;&#xD788; &#xC678;&#xBD80; &#xD568;&#xC218;&#xC5D0;&#xC11C; &#xD638;&#xCD9C;&#xB420; &#xACBD;&#xC6B0;, &#xC911;&#xCCA9; &#xD568;&#xC218;&#xC5D0; &#xB300;&#xD55C; &#xBAA8;&#xB4E0; &#xD638;&#xCD9C;&#xC744; &#xCD94;&#xC801;&#xD560; &#xC218; &#xC5C6;&#xAE30; &#xB54C;&#xBB38;&#xC785;&#xB2C8;&#xB2E4;.
&#xD568;&#xC218;&#xAC00; &#xC5B4;&#xB514;&#xC5D0;&#xC11C; &#xD638;&#xCD9C;&#xB418;&#xC5C8;&#xB294;&#xC9C0; &#xC54C; &#xC218; &#xC5C6;&#xC73C;&#xBA74;, &#xBCF8;&#xBB38;&#xC774; &#xC2E4;&#xD589;&#xB420; &#xB54C; <code>name</code>&#xC758; &#xD0C0;&#xC785;&#xC744; &#xC54C; &#xC218; &#xC5C6;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<h1 id="&#xD0C0;&#xC785;-&#xBCC4;&#xCE6D;-type-aliases">&#xD0C0;&#xC785; &#xBCC4;&#xCE6D; (Type Aliases)</h1>
<p>&#xD0C0;&#xC785; &#xBCC4;&#xCE6D;&#xC740; &#xD0C0;&#xC785;&#xC758; &#xC0C8;&#xB85C;&#xC6B4; &#xC774;&#xB984;&#xC744; &#xB9CC;&#xB4ED;&#xB2C8;&#xB2E4;.
&#xD0C0;&#xC785; &#xBCC4;&#xCE6D;&#xC740; &#xB54C;&#xB54C;&#xB85C; &#xC778;&#xD130;&#xD398;&#xC774;&#xC2A4;&#xC640; &#xC720;&#xC0AC;&#xD569;&#xB2C8;&#xB2E4;&#xB9CC;, &#xC6D0;&#xC2DC; &#xAC12;, &#xC720;&#xB2C8;&#xC5B8;, &#xD29C;&#xD50C; &#xADF8;&#xB9AC;&#xACE0; &#xC190;&#xC73C;&#xB85C; &#xC791;&#xC131;&#xD574;&#xC57C; &#xD558;&#xB294; &#xB2E4;&#xB978; &#xD0C0;&#xC785;&#xC758; &#xC774;&#xB984;&#xC744; &#xC9C0;&#xC744; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">Name</span> <span class="cm-operator">=</span> <span class="cm-variable-3">string</span>;
<span class="cm-variable">type</span> <span class="cm-variable">NameResolver</span> <span class="cm-operator">=</span> () <span class="cm-operator">=&gt;</span> <span class="cm-variable-3">string</span>;
<span class="cm-variable">type</span> <span class="cm-variable">NameOrResolver</span> <span class="cm-operator">=</span> <span class="cm-variable">Name</span> <span class="cm-operator">|</span> <span class="cm-variable">NameResolver</span>;
<span class="cm-keyword">function</span> <span class="cm-variable">getName</span>(<span class="cm-def">n</span>: <span class="cm-variable-3">NameOrResolver</span>): <span class="cm-variable">Name</span> {
    <span class="cm-keyword">if</span> (<span class="cm-keyword">typeof</span> <span class="cm-variable">n</span> <span class="cm-operator">===</span> <span class="cm-string">&quot;string&quot;</span>) {
        <span class="cm-keyword">return</span> <span class="cm-variable">n</span>;
    }
    <span class="cm-keyword">else</span> {
        <span class="cm-keyword">return</span> <span class="cm-variable">n</span>();
    }
}
</code></pre>
<p>&#xBCC4;&#xCE6D;&#xC740; &#xC2E4;&#xC81C;&#xB85C; &#xC0C8;&#xB85C;&#xC6B4; &#xD0C0;&#xC785;&#xC744; &#xB9CC;&#xB4DC;&#xB294; &#xAC83;&#xC740; &#xC544;&#xB2D9;&#xB2C8;&#xB2E4; - &#xADF8; &#xD0C0;&#xC785;&#xC744; &#xB098;&#xD0C0;&#xB0B4;&#xB294; &#xC0C8;&#xB85C;&#xC6B4; <em>&#xC774;&#xB984;</em> &#xC744; &#xB9CC;&#xB4DC;&#xB294; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;.
&#xC6D0;&#xC2DC; &#xAC12;&#xC758; &#xBCC4;&#xCE6D;&#xC744; &#xC9D3;&#xB294; &#xAC83;&#xC740; &#xBB38;&#xC11C;&#xD654;&#xC758; &#xD615;&#xD0DC;&#xB85C; &#xC0AC;&#xC6A9;&#xD560; &#xC218; &#xC788;&#xC9C0;&#xB9CC;, &#xBCC4;&#xB85C; &#xC720;&#xC6A9;&#xD558;&#xC9C0; &#xC54A;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<p>&#xC778;&#xD130;&#xD398;&#xC774;&#xC2A4;&#xCC98;&#xB7FC;, &#xD0C0;&#xC785; &#xBCC4;&#xCE6D;&#xC740; &#xC81C;&#xB124;&#xB9AD;&#xC774; &#xB420; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4; - &#xD0C0;&#xC785; &#xB9E4;&#xAC1C;&#xBCC0;&#xC218;&#xB97C; &#xCD94;&#xAC00;&#xD558;&#xACE0; &#xBCC4;&#xCE6D; &#xC120;&#xC5B8;&#xC758; &#xC624;&#xB978;&#xCABD;&#xC5D0; &#xC0AC;&#xC6A9;&#xD558;&#xBA74; &#xB429;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">Container</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> { <span class="cm-property">value</span>: <span class="cm-variable">T</span> };
</code></pre>
<p>&#xD504;&#xB85C;&#xD37C;&#xD2F0; &#xC548;&#xC5D0;&#xC11C; &#xC790;&#xAE30; &#xC790;&#xC2E0;&#xC744; &#xCC38;&#xC870;&#xD558;&#xB294; &#xD0C0;&#xC785; &#xBCC4;&#xCE6D;&#xC744; &#xAC00;&#xC9C8; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">Tree</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> {
    <span class="cm-property">value</span>: <span class="cm-variable">T</span>;
    <span class="cm-variable">left</span>: <span class="cm-variable">Tree</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span>;
    <span class="cm-variable">right</span>: <span class="cm-variable">Tree</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span>;
}
</code></pre>
<p>&#xAD50;&#xCC28; &#xD0C0;&#xC785;&#xACFC; &#xAC19;&#xC774; &#xC0AC;&#xC6A9;&#xD558;&#xBA74;, &#xC544;&#xC8FC; &#xB180;&#xB77C;&#xC6B4; &#xD0C0;&#xC785;&#xC744; &#xB9CC;&#xB4E4; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">LinkedList</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> <span class="cm-variable">T</span> <span class="cm-operator">&amp;</span> { <span class="cm-property">next</span>: <span class="cm-variable">LinkedList</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span> };

<span class="cm-keyword">interface</span> <span class="cm-variable">Person</span> {
    <span class="cm-variable">name</span>: <span class="cm-variable-3">string</span>;
}

<span class="cm-keyword">var</span> <span class="cm-variable">people</span>: <span class="cm-variable-3">LinkedList</span><span class="cm-operator">&lt;</span><span class="cm-variable">Person</span><span class="cm-operator">&gt;</span>;
<span class="cm-keyword">var</span> <span class="cm-variable">s</span> <span class="cm-operator">=</span> <span class="cm-variable">people</span>.<span class="cm-property">name</span>;
<span class="cm-keyword">var</span> <span class="cm-variable">s</span> <span class="cm-operator">=</span> <span class="cm-variable">people</span>.<span class="cm-property">next</span>.<span class="cm-property">name</span>;
<span class="cm-keyword">var</span> <span class="cm-variable">s</span> <span class="cm-operator">=</span> <span class="cm-variable">people</span>.<span class="cm-property">next</span>.<span class="cm-property">next</span>.<span class="cm-property">name</span>;
<span class="cm-keyword">var</span> <span class="cm-variable">s</span> <span class="cm-operator">=</span> <span class="cm-variable">people</span>.<span class="cm-property">next</span>.<span class="cm-property">next</span>.<span class="cm-property">next</span>.<span class="cm-property">name</span>;
</code></pre>
<p>&#xD558;&#xC9C0;&#xB9CC;, &#xD0C0;&#xC785; &#xBCC4;&#xCE6D;&#xC744; &#xC120;&#xC5B8;&#xC758; &#xC624;&#xB978;&#xCABD; &#xC774;&#xC678;&#xC5D0; &#xC0AC;&#xC6A9;&#xD558;&#xB294; &#xAC83;&#xC740; &#xBD88;&#xAC00;&#xB2A5;&#xD569;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">Yikes</span> <span class="cm-operator">=</span> <span class="cm-variable">Array</span><span class="cm-operator">&lt;</span><span class="cm-variable">Yikes</span><span class="cm-operator">&gt;</span>; <span class="cm-comment">// &#xC624;&#xB958;</span>
</code></pre>
<h2 id="&#xC778;&#xD130;&#xD398;&#xC774;&#xC2A4;-vs-&#xD0C0;&#xC785;-&#xBCC4;&#xCE6D;-interfaces-vs-type-aliases">&#xC778;&#xD130;&#xD398;&#xC774;&#xC2A4; vs. &#xD0C0;&#xC785; &#xBCC4;&#xCE6D; (Interfaces vs. Type Aliases)</h2>
<p>&#xC704;&#xC5D0;&#xC11C; &#xC5B8;&#xAE09;&#xD588;&#xB4EF;&#xC774;, &#xD0C0;&#xC785; &#xBCC4;&#xCE6D;&#xC740; &#xC778;&#xD130;&#xD398;&#xC774;&#xC2A4;&#xC640; &#xAC19;&#xC740; &#xC5ED;&#xD560;&#xC744; &#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;; &#xD558;&#xC9C0;&#xB9CC;, &#xC57D;&#xAC04;&#xC758; &#xBBF8;&#xBB18;&#xD55C; &#xCC28;&#xC774;&#xAC00; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;</p>
<p>&#xD55C; &#xAC00;&#xC9C0; &#xCC28;&#xC774;&#xC810;&#xC740; &#xC778;&#xD130;&#xD398;&#xC774;&#xC2A4;&#xB294; &#xC5B4;&#xB514;&#xC5D0;&#xC11C;&#xB098; &#xC0AC;&#xC6A9;&#xD560; &#xC218; &#xC788;&#xB294; &#xC0C8;&#xB85C;&#xC6B4; &#xC774;&#xB984;&#xC744; &#xB9CC;&#xB4E4; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xD0C0;&#xC785; &#xBCC4;&#xCE6D;&#xC740; &#xC0C8;&#xB85C;&#xC6B4; &#xC774;&#xB984;&#xC744; &#xB9CC;&#xB4E4;&#xC9C0; &#xBABB;&#xD569;&#xB2C8;&#xB2E4; &#x2014; &#xC608;&#xB97C; &#xB4E4;&#xC5B4;, &#xC624;&#xB958; &#xBA54;&#xC2DC;&#xC9C0;&#xB294; &#xBCC4;&#xCE6D; &#xC774;&#xB984;&#xC744; &#xC0AC;&#xC6A9;&#xD558;&#xC9C0; &#xC54A;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xC544;&#xB798;&#xC758; &#xCF54;&#xB4DC;&#xC5D0;&#xC11C;, &#xC5D0;&#xB514;&#xD130;&#xC5D0;&#xC11C; <code>interfaced</code>&#xC5D0; &#xB9C8;&#xC6B0;&#xC2A4;&#xB97C; &#xC62C;&#xB9AC;&#xBA74;  <code>Interface</code>&#xB97C; &#xBC18;&#xD658;&#xD55C;&#xB2E4;&#xACE0; &#xBCF4;&#xC5EC;&#xC8FC;&#xC9C0;&#xB9CC; <code>aliased</code>&#xB294; &#xAC1D;&#xCCB4; &#xB9AC;&#xD130;&#xB7F4; &#xD0C0;&#xC785;&#xC744; &#xBC18;&#xD658;&#xD55C;&#xB2E4;&#xACE0; &#xBCF4;&#xC5EC;&#xC90D;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">Alias</span> <span class="cm-operator">=</span> { <span class="cm-property">num</span>: <span class="cm-variable-3">number</span> }
<span class="cm-keyword">interface</span> <span class="cm-variable">Interface</span> {
    <span class="cm-variable">num</span>: <span class="cm-variable-3">number</span>;
}
<span class="cm-variable">declare</span> <span class="cm-keyword">function</span> <span class="cm-variable">aliased</span>(<span class="cm-def">arg</span>: <span class="cm-variable-3">Alias</span>): <span class="cm-variable">Alias</span>;
<span class="cm-variable">declare</span> <span class="cm-keyword">function</span> <span class="cm-variable">interfaced</span>(<span class="cm-def">arg</span>: <span class="cm-variable-3">Interface</span>): <span class="cm-variable">Interface</span>;
</code></pre>
<p>TypeScript&#xC758; &#xC774;&#xC804; &#xBC84;&#xC804;&#xC5D0;&#xC11C;, &#xD0C0;&#xC785; &#xBCC4;&#xCE6D;&#xC740; extend &#xD558;&#xAC70;&#xB098; implement &#xD560; &#xC218; &#xC5C6;&#xC5C8;&#xC2B5;&#xB2C8;&#xB2E4; (&#xB2E4;&#xB978; &#xD0C0;&#xC785;&#xC744; extend/implement &#xD560; &#xC218;&#xB3C4; &#xC5C6;&#xC2B5;&#xB2C8;&#xB2E4;). 2.7 &#xBC84;&#xC804;&#xBD80;&#xD130;, &#xD0C0;&#xC785; &#xBCC4;&#xCE6D;&#xC740; &#xAD50;&#xCC28; &#xD0C0;&#xC785;&#xC744; &#xC0DD;&#xC131;&#xD568;&#xC73C;&#xB85C;&#xC368; extend &#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;. &#xC608;&#xB97C; &#xB4E4;&#xC5B4;, <code>type Cat = Animal &amp; { purrs: true }</code>.</p>
<p><a href="https://en.wikipedia.org/wiki/Open/closed_principle" target="_blank">&#xC18C;&#xD504;&#xD2B8;&#xC6E8;&#xC5B4;&#xC758; &#xC774;&#xC0C1;&#xC801;&#xC778; &#xD2B9;&#xC9D5;&#xC740; &#xD655;&#xC7A5;&#xC5D0; &#xAC1C;&#xBC29;&#xB418;&#xC5B4; &#xC788;&#xAE30; &#xB54C;&#xBB38;&#xC5D0;</a>, &#xAC00;&#xB2A5;&#xD558;&#xBA74; &#xD56D;&#xC0C1; &#xD0C0;&#xC785; &#xBCC4;&#xCE6D;&#xBCF4;&#xB2E4; &#xC778;&#xD130;&#xD398;&#xC774;&#xC2A4;&#xB97C; &#xC0AC;&#xC6A9;&#xD574;&#xC57C; &#xD569;&#xB2C8;&#xB2E4;.</p>
<p>&#xBC18;&#xBA74;&#xC5D0;, &#xB9CC;&#xC57D; &#xC778;&#xD130;&#xD398;&#xC774;&#xC2A4;&#xB85C; &#xC5B4;&#xB5A4; &#xD615;&#xD0DC;&#xB97C; &#xD45C;&#xD604;&#xD560; &#xC218; &#xC5C6;&#xACE0; &#xC720;&#xB2C8;&#xC5B8;&#xC774;&#xB098; &#xD29C;&#xD50C; &#xD0C0;&#xC785;&#xC744; &#xC0AC;&#xC6A9;&#xD574;&#xC57C; &#xD55C;&#xB2E4;&#xBA74;, &#xC77C;&#xBC18;&#xC801;&#xC73C;&#xB85C; &#xD0C0;&#xC785; &#xBCC4;&#xCE6D;&#xC744; &#xC0AC;&#xC6A9;&#xD569;&#xB2C8;&#xB2E4;.</p>
<h1 id="&#xBB38;&#xC790;&#xC5F4;-&#xB9AC;&#xD130;&#xB7F4;-&#xD0C0;&#xC785;-string-literal-types">&#xBB38;&#xC790;&#xC5F4; &#xB9AC;&#xD130;&#xB7F4; &#xD0C0;&#xC785; (String Literal Types)</h1>
<p>&#xBB38;&#xC790;&#xC5F4; &#xB9AC;&#xD130;&#xB7F4; &#xD0C0;&#xC785;&#xC740; &#xBB38;&#xC790;&#xC5F4;&#xC5D0; &#xAC12;&#xC744; &#xC815;&#xD655;&#xD558;&#xAC8C; &#xC9C0;&#xC815;&#xD560; &#xC218; &#xC788;&#xAC8C; &#xD574;&#xC90D;&#xB2C8;&#xB2E4;.
&#xC608;&#xC81C;&#xC5D0;&#xC11C; &#xBB38;&#xC790;&#xC5F4; &#xB9AC;&#xD130;&#xB7F4; &#xD0C0;&#xC785;&#xC740; &#xC720;&#xB2C8;&#xC5B8; &#xD0C0;&#xC785;, &#xD0C0;&#xC785; &#xAC00;&#xB4DC;, &#xADF8;&#xB9AC;&#xACE0; &#xD0C0;&#xC785; &#xBCC4;&#xCE6D;&#xACFC; &#xC798; &#xACB0;&#xD569;&#xB429;&#xB2C8;&#xB2E4;.
&#xC774; &#xAE30;&#xB2A5;&#xC744; &#xC5F4;&#xAC70;&#xD615;-&#xAC19;&#xC740; &#xD589;&#xB3D9;&#xC744; &#xBB38;&#xC790;&#xC5F4;&#xACFC; &#xD568;&#xAED8; &#xC0AC;&#xC6A9;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">Easing</span> <span class="cm-operator">=</span> <span class="cm-string">&quot;ease-in&quot;</span> <span class="cm-operator">|</span> <span class="cm-string">&quot;ease-out&quot;</span> <span class="cm-operator">|</span> <span class="cm-string">&quot;ease-in-out&quot;</span>;
<span class="cm-keyword">class</span> <span class="cm-variable">UIElement</span> {
    <span class="cm-property">animate</span>(<span class="cm-def">dx</span>: <span class="cm-variable-3">number</span>, <span class="cm-def">dy</span>: <span class="cm-variable-3">number</span>, <span class="cm-def">easing</span>: <span class="cm-variable-3">Easing</span>) {
        <span class="cm-keyword">if</span> (<span class="cm-variable-2">easing</span> <span class="cm-operator">===</span> <span class="cm-string">&quot;ease-in&quot;</span>) {
            <span class="cm-comment">// ...</span>
        }
        <span class="cm-keyword">else</span> <span class="cm-keyword">if</span> (<span class="cm-variable-2">easing</span> <span class="cm-operator">===</span> <span class="cm-string">&quot;ease-out&quot;</span>) {
        }
        <span class="cm-keyword">else</span> <span class="cm-keyword">if</span> (<span class="cm-variable-2">easing</span> <span class="cm-operator">===</span> <span class="cm-string">&quot;ease-in-out&quot;</span>) {
        }
        <span class="cm-keyword">else</span> {
            <span class="cm-comment">// &#xC624;&#xB958;! null&#xC774;&#xB098; undefined&#xB97C; &#xC804;&#xB2EC;&#xD558;&#xBA74; &#xC548;&#xB429;&#xB2C8;&#xB2E4;</span>
        }
    }
}

<span class="cm-keyword">let</span> <span class="cm-variable">button</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">UIElement</span>();
<span class="cm-variable">button</span>.<span class="cm-property">animate</span>(<span class="cm-number">0</span>, <span class="cm-number">0</span>, <span class="cm-string">&quot;ease-in&quot;</span>);
<span class="cm-variable">button</span>.<span class="cm-property">animate</span>(<span class="cm-number">0</span>, <span class="cm-number">0</span>, <span class="cm-string">&quot;uneasy&quot;</span>); <span class="cm-comment">// &#xC624;&#xB958;: &quot;uneasy&quot;&#xB294; &#xC5EC;&#xAE30;&#xC11C; &#xD5C8;&#xC6A9;&#xD558;&#xC9C0; &#xC54A;&#xC2B5;&#xB2C8;&#xB2E4;</span>
</code></pre>
<p>&#xD5C8;&#xC6A9;&#xB418;&#xB294; 3&#xAC1C;&#xC758; &#xBB38;&#xC790;&#xC5F4; &#xC544;&#xBB34;&#xAC70;&#xB098; &#xC804;&#xB2EC;&#xD560; &#xC218; &#xC788;&#xC9C0;&#xB9CC;, &#xADF8; &#xC678; &#xB2E4;&#xB978; &#xBB38;&#xC790;&#xC5F4;&#xB4E4;&#xC740; &#xC624;&#xB958;&#xB97C; &#xBC1C;&#xC0DD;&#xC2DC;&#xD0B5;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-text">Argument of type &apos;&quot;uneasy&quot;&apos; is not assignable to parameter of type &apos;&quot;ease-in&quot; | &quot;ease-out&quot; | &quot;ease-in-out&quot;&apos;
</code></pre>
<p>&#xBB38;&#xC790;&#xC5F4; &#xB9AC;&#xD130;&#xB7F4; &#xD0C0;&#xC785;&#xC740; &#xC624;&#xBC84;&#xB85C;&#xB4DC;&#xB97C; &#xAD6C;&#xBCC4;&#xD558;&#xAE30; &#xC704;&#xD574; &#xAC19;&#xC740; &#xBC29;&#xBC95;&#xC73C;&#xB85C; &#xC0AC;&#xC6A9;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-keyword">function</span> <span class="cm-variable">createElement</span>(<span class="cm-def">tagName</span>: <span class="cm-string">&quot;img&quot;</span>): <span class="cm-variable">HTMLImageElement</span>;
<span class="cm-keyword">function</span> <span class="cm-variable">createElement</span>(<span class="cm-def">tagName</span>: <span class="cm-string">&quot;input&quot;</span>): <span class="cm-variable">HTMLInputElement</span>;
<span class="cm-comment">// ... &#xB354; &#xB9CE;&#xC740; &#xC624;&#xBC84;&#xB85C;&#xB4DC; ...</span>
<span class="cm-keyword">function</span> <span class="cm-variable">createElement</span>(<span class="cm-def">tagName</span>: <span class="cm-variable-3">string</span>): <span class="cm-variable">Element</span> {
    <span class="cm-comment">// ... &#xC774;&#xACF3;&#xC5D0; &#xCF54;&#xB4DC;&#xB97C; ...</span>
}
</code></pre>
<h1 id="&#xC22B;&#xC790;-&#xB9AC;&#xD130;&#xB7F4;-&#xD0C0;&#xC785;-numeric-literal-types">&#xC22B;&#xC790; &#xB9AC;&#xD130;&#xB7F4; &#xD0C0;&#xC785; (Numeric Literal Types)</h1>
<p>TypeScript&#xB294; &#xB610;&#xD55C; &#xC22B;&#xC790; &#xB9AC;&#xD130;&#xB7F4; &#xD0C0;&#xC785;&#xC744; &#xAC16;&#xACE0; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-keyword">function</span> <span class="cm-variable">rollDice</span>(): <span class="cm-number">1</span> <span class="cm-operator">|</span> <span class="cm-number">2</span> <span class="cm-operator">|</span> <span class="cm-number">3</span> <span class="cm-operator">|</span> <span class="cm-number">4</span> <span class="cm-operator">|</span> <span class="cm-number">5</span> <span class="cm-operator">|</span> <span class="cm-number">6</span> {
    <span class="cm-comment">// ...</span>
}
</code></pre>
<p>&#xBA85;&#xC2DC;&#xC801;&#xC73C;&#xB85C; &#xC791;&#xC131;&#xB418;&#xB294; &#xACBD;&#xC6B0;&#xB294; &#xAC70;&#xC758; &#xC5C6;&#xC9C0;&#xB9CC;, &#xC774;&#xC288;&#xB97C; &#xC881;&#xD788;&#xACE0; &#xBC84;&#xADF8;&#xB97C; &#xC7A1;&#xB294;&#xB370; &#xC720;&#xC6A9;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-keyword">function</span> <span class="cm-variable">foo</span>(<span class="cm-def">x</span>: <span class="cm-variable-3">number</span>) {
    <span class="cm-keyword">if</span> (<span class="cm-variable-2">x</span> <span class="cm-operator">!==</span> <span class="cm-number">1</span> <span class="cm-operator">||</span> <span class="cm-variable-2">x</span> <span class="cm-operator">!==</span> <span class="cm-number">2</span>) {
        <span class="cm-comment">//         ~~~~~~~</span>
        <span class="cm-comment">// &apos;!==&apos; &#xC5F0;&#xC0B0;&#xC790;&#xB294; &apos;1&apos;&#xACFC; &apos;2&apos; &#xD0C0;&#xC785;&#xC5D0; &#xC801;&#xC6A9;&#xD560; &#xC218; &#xC5C6;&#xC2B5;&#xB2C8;&#xB2E4;.</span>
    }
}
</code></pre>
<p>&#xB2E4;&#xC2DC; &#xB9D0;&#xD558;&#xBA74;, <code>x</code>&#xB294; <code>2</code>&#xC640; &#xBE44;&#xAD50;&#xB420; &#xB54C;, &#xBC18;&#xB4DC;&#xC2DC; <code>1</code>&#xC774;&#xC5B4;&#xC57C; &#xD558;&#xB294;&#xB370; &#xC704;&#xC758; &#xAC80;&#xC0AC;&#xAC00; &#xC720;&#xD6A8;&#xD558;&#xC9C0; &#xC54A;&#xC740; &#xBE44;&#xAD50;&#xB97C; &#xC758;&#xBBF8;&#xD569;&#xB2C8;&#xB2E4;.</p>
<h1 id="&#xC5F4;&#xAC70;&#xD615;-&#xBA64;&#xBC84;-&#xD0C0;&#xC785;-enum-member-types">&#xC5F4;&#xAC70;&#xD615; &#xBA64;&#xBC84; &#xD0C0;&#xC785; (Enum Member Types)</h1>
<p><a href="enums.html#&#xC720;&#xB2C8;&#xC5B8;-&#xC5F4;&#xAC70;&#xD615;&#xACFC;-&#xC5F4;&#xAC70;&#xD615;-&#xBA64;&#xBC84;-&#xD0C0;&#xC785;-union-enums-and-enum-member-types">&#xC5F4;&#xAC70;&#xD615; &#xC139;&#xC158;</a>&#xC5D0;&#xC11C; &#xC5B8;&#xAE09;&#xD588;&#xB4EF;&#xC774;, &#xC5F4;&#xAC70;&#xD615; &#xBA64;&#xBC84;&#xB294; &#xBAA8;&#xB4E0; &#xBA64;&#xBC84;&#xAC00; &#xB9AC;&#xD130;&#xB7F4;&#xB85C;-&#xCD08;&#xAE30;&#xD654;&#xB420; &#xB54C; &#xD0C0;&#xC785;&#xC744; &#xAC00;&#xC9D1;&#xB2C8;&#xB2E4;.</p>
<p>&#xC2F1;&#xAE00;&#xD1A4; &#xD0C0;&#xC785;&#xC744; &#xC774;&#xC57C;&#xAE30; &#xD560;&#xB54C; &#xC5EC;&#xAE30;&#xC11C;&#xB294; &#xC5F4;&#xAC70;&#xD615; &#xBA64;&#xBC84; &#xD0C0;&#xC785;&#xACFC; &#xC22B;&#xC790;/&#xBB38;&#xC790;&#xC5F4; &#xB9AC;&#xD130;&#xB7F4; &#xD0C0;&#xC785;&#xC744; &#xC598;&#xAE30;&#xD558;&#xC9C0;&#xB9CC;, &#xB300;&#xBD80;&#xBD84; &#xB9CE;&#xC740; &#xC720;&#xC800;&#xB4E4;&#xC740; &quot;&#xC2F1;&#xAE00;&#xD1A4; &#xD0C0;&#xC785;&quot;&#xACFC; &quot;&#xB9AC;&#xD130;&#xB7F4; &#xD0C0;&#xC785;&quot;&#xC744; &#xC0C1;&#xD638; &#xAD50;&#xD658;&#xC801;&#xC73C;&#xB85C; &#xC0AC;&#xC6A9;&#xD569;&#xB2C8;&#xB2E4;.</p>
<h1 id="&#xD310;&#xBCC4;-&#xC720;&#xB2C8;&#xC5B8;-discriminated-unions">&#xD310;&#xBCC4; &#xC720;&#xB2C8;&#xC5B8; (Discriminated Unions)</h1>
<p><em>&#xD0DC;&#xADF8; &#xB41C; &#xC720;&#xB2C8;&#xC5B8;</em> &#xB610;&#xB294; <em>&#xB300;&#xC218;&#xC801; &#xB370;&#xC774;&#xD130; &#xD0C0;&#xC785;</em>&#xC774;&#xB77C;&#xACE0;&#xB3C4; &#xD558;&#xB294; <em>&#xD310;&#xBCC4; &#xC720;&#xB2C8;&#xC5B8;</em> &#xACE0;&#xAE09; &#xD328;&#xD134;&#xC744; &#xB9CC;&#xB4E4;&#xAE30; &#xC704;&#xD574;&#xC11C; &#xC2F1;&#xAE00;&#xD1A4; &#xD0C0;&#xC785;, &#xC720;&#xB2C8;&#xC5B8; &#xD0C0;&#xC785;, &#xD0C0;&#xC785; &#xAC00;&#xB4DC;, &#xD0C0;&#xC785; &#xBCC4;&#xCE6D;&#xC744; &#xD569;&#xCE60; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xD310;&#xBCC4; &#xC720;&#xB2C8;&#xC5B8;&#xC740; &#xD568;&#xC218;&#xD615; &#xD504;&#xB85C;&#xADF8;&#xB798;&#xBC0D;&#xC5D0;&#xC11C; &#xC720;&#xC6A9;&#xD569;&#xB2C8;&#xB2E4;.
&#xC5B4;&#xB5A4; &#xC5B8;&#xC5B4;&#xC5D0;&#xC11C;&#xB294; &#xC790;&#xB3D9;&#xC73C;&#xB85C; &#xD310;&#xBCC4; &#xC720;&#xB2C8;&#xC5B8;&#xC744; &#xC81C;&#xACF5;&#xD569;&#xB2C8;&#xB2E4;; TypeScript&#xB294; &#xB300;&#xC2E0;&#xC5D0; &#xD604;&#xC7AC; JavaScript &#xD328;&#xD134;&#xC744; &#xAE30;&#xBC18;&#xC73C;&#xB85C; &#xD569;&#xB2C8;&#xB2E4;.
&#xC138; &#xAC00;&#xC9C0; &#xC694;&#xC18C;&#xAC00; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;:</p>
<ol>
<li>&#xACF5;&#xD1B5; &#xC2F1;&#xAE00;&#xD1A4; &#xD0C0;&#xC785; &#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xB97C; &#xAC16;&#xB294; &#xD0C0;&#xC785; &#x2014; <em>&#xD310;&#xBCC4;&#xC2DD;</em>.</li>
<li>&#xD574;&#xB2F9; &#xD0C0;&#xC785;&#xB4E4;&#xC758; &#xC720;&#xB2C8;&#xC5B8;&#xC744; &#xAC16;&#xB294; &#xD0C0;&#xC785; &#xBCC4;&#xCE6D; &#x2014; <em>&#xC720;&#xB2C8;&#xC5B8;</em>.</li>
<li>&#xACF5;&#xD1B5; &#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xC758; &#xD0C0;&#xC785; &#xAC00;&#xB4DC;</li>
</ol>
<pre><code class="lang-ts"><span class="cm-keyword">interface</span> <span class="cm-variable">Square</span> {
    <span class="cm-variable">kind</span>: <span class="cm-string">&quot;square&quot;</span>;
    <span class="cm-variable">size</span>: <span class="cm-variable-3">number</span>;
}
<span class="cm-keyword">interface</span> <span class="cm-variable">Rectangle</span> {
    <span class="cm-variable">kind</span>: <span class="cm-string">&quot;rectangle&quot;</span>;
    <span class="cm-variable">width</span>: <span class="cm-variable-3">number</span>;
    <span class="cm-variable">height</span>: <span class="cm-variable-3">number</span>;
}
<span class="cm-keyword">interface</span> <span class="cm-variable">Circle</span> {
    <span class="cm-variable">kind</span>: <span class="cm-string">&quot;circle&quot;</span>;
    <span class="cm-variable">radius</span>: <span class="cm-variable-3">number</span>;
}
</code></pre>
<p>&#xBA3C;&#xC800; &#xD1B5;&#xD569;&#xD560; &#xC778;&#xD130;&#xD398;&#xC774;&#xC2A4;&#xB97C; &#xC120;&#xC5B8;&#xD569;&#xB2C8;&#xB2E4;.
&#xAC01; &#xC778;&#xD130;&#xD398;&#xC774;&#xC2A4;&#xB294; &#xB2E4;&#xB978; &#xBB38;&#xC790;&#xC5F4; &#xB9AC;&#xD130;&#xB7F4; &#xD0C0;&#xC785;&#xC758; <code>kind</code> &#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xB97C; &#xAC00;&#xC9D1;&#xB2C8;&#xB2E4;.
<code>kind</code> &#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xB294; <em>&#xD310;&#xBCC4;&#xC2DD;</em> &#xD639;&#xC740; <em>&#xD0DC;&#xADF8;</em>&#xB77C;&#xACE0; &#xBD80;&#xB985;&#xB2C8;&#xB2E4;.
&#xB2E4;&#xB978; &#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xB294; &#xAC01; &#xC778;&#xD130;&#xD398;&#xC774;&#xC2A4;&#xC5D0; &#xB530;&#xB77C; &#xB2E4;&#xB985;&#xB2C8;&#xB2E4;.
&#xD604;&#xC7AC; &#xC778;&#xD130;&#xD398;&#xC774;&#xC2A4;&#xB294; &#xAD00;&#xB828;&#xC774; &#xC5C6;&#xB2E4;&#xB294; &#xAC83;&#xC5D0; &#xC720;&#xC758;&#xD558;&#xC138;&#xC694;.
&#xC774;&#xC81C; &#xC720;&#xB2C8;&#xC5B8;&#xC73C;&#xB85C; &#xC9D1;&#xC5B4;&#xB123;&#xC5B4; &#xBD05;&#xC2DC;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">Shape</span> <span class="cm-operator">=</span> <span class="cm-variable">Square</span> <span class="cm-operator">|</span> <span class="cm-variable">Rectangle</span> <span class="cm-operator">|</span> <span class="cm-variable">Circle</span>;
</code></pre>
<p>&#xC774;&#xC81C; &#xD310;&#xBCC4; &#xC720;&#xB2C8;&#xC5B8;&#xC744; &#xC0AC;&#xC6A9;&#xD574;&#xBCF4;&#xACA0;&#xC2B5;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-keyword">function</span> <span class="cm-variable">area</span>(<span class="cm-def">s</span>: <span class="cm-variable-3">Shape</span>) {
    <span class="cm-keyword">switch</span> (<span class="cm-variable-2">s</span>.<span class="cm-property">kind</span>) {
        <span class="cm-keyword">case</span> <span class="cm-string">&quot;square&quot;</span>: <span class="cm-keyword">return</span> <span class="cm-variable-2">s</span>.<span class="cm-property">size</span> <span class="cm-operator">*</span> <span class="cm-variable-2">s</span>.<span class="cm-property">size</span>;
        <span class="cm-keyword">case</span> <span class="cm-string">&quot;rectangle&quot;</span>: <span class="cm-keyword">return</span> <span class="cm-variable-2">s</span>.<span class="cm-property">height</span> <span class="cm-operator">*</span> <span class="cm-variable-2">s</span>.<span class="cm-property">width</span>;
        <span class="cm-keyword">case</span> <span class="cm-string">&quot;circle&quot;</span>: <span class="cm-keyword">return</span> <span class="cm-variable">Math</span>.<span class="cm-property">PI</span> <span class="cm-operator">*</span> <span class="cm-variable-2">s</span>.<span class="cm-property">radius</span> <span class="cm-operator">**</span> <span class="cm-number">2</span>;
    }
}
</code></pre>
<h2 id="&#xC5C4;&#xACA9;&#xD55C;-&#xAC80;&#xC0AC;-exhaustiveness-checking">&#xC5C4;&#xACA9;&#xD55C; &#xAC80;&#xC0AC; (Exhaustiveness checking)</h2>
<p>&#xD310;&#xBCC4; &#xC720;&#xB2C8;&#xC5B8;&#xC758; &#xBAA8;&#xB4E0; &#xBCC0;&#xD615;&#xC744; &#xCEE4;&#xBC84;&#xD560; &#xC218; &#xC5C6;&#xC744; &#xB54C;, &#xCEF4;&#xD30C;&#xC77C;&#xB7EC;&#xAC00; &#xC54C;&#xB824;&#xC8FC;&#xAE38; &#xC6D0;&#xD569;&#xB2C8;&#xB2E4;.
&#xC608;&#xB97C; &#xB4E4;&#xC5B4;, &#xB9CC;&#xC57D; <code>Triangle</code>&#xC744; <code>Shape</code>&#xC5D0; &#xCD94;&#xAC00;&#xD558;&#xBA74;, <code>area</code>&#xB3C4; &#xC5C5;&#xB370;&#xC774;&#xD2B8;&#xD574;&#xC57C; &#xD569;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">Shape</span> <span class="cm-operator">=</span> <span class="cm-variable">Square</span> <span class="cm-operator">|</span> <span class="cm-variable">Rectangle</span> <span class="cm-operator">|</span> <span class="cm-variable">Circle</span> <span class="cm-operator">|</span> <span class="cm-variable">Triangle</span>;
<span class="cm-keyword">function</span> <span class="cm-variable">area</span>(<span class="cm-def">s</span>: <span class="cm-variable-3">Shape</span>) {
    <span class="cm-keyword">switch</span> (<span class="cm-variable-2">s</span>.<span class="cm-property">kind</span>) {
        <span class="cm-keyword">case</span> <span class="cm-string">&quot;square&quot;</span>: <span class="cm-keyword">return</span> <span class="cm-variable-2">s</span>.<span class="cm-property">size</span> <span class="cm-operator">*</span> <span class="cm-variable-2">s</span>.<span class="cm-property">size</span>;
        <span class="cm-keyword">case</span> <span class="cm-string">&quot;rectangle&quot;</span>: <span class="cm-keyword">return</span> <span class="cm-variable-2">s</span>.<span class="cm-property">height</span> <span class="cm-operator">*</span> <span class="cm-variable-2">s</span>.<span class="cm-property">width</span>;
        <span class="cm-keyword">case</span> <span class="cm-string">&quot;circle&quot;</span>: <span class="cm-keyword">return</span> <span class="cm-variable">Math</span>.<span class="cm-property">PI</span> <span class="cm-operator">*</span> <span class="cm-variable-2">s</span>.<span class="cm-property">radius</span> <span class="cm-operator">**</span> <span class="cm-number">2</span>;
    }
    <span class="cm-comment">// &#xC5EC;&#xAE30;&#xC11C; &#xC624;&#xB958; &#xBC1C;&#xC0DD; - &quot;triangle&quot;&#xC758; &#xCF00;&#xC774;&#xC2A4;&#xB97C; &#xCC98;&#xB9AC;&#xD558;&#xC9C0; &#xC54A;&#xC74C;</span>
}
</code></pre>
<p>&#xC774;&#xB97C; &#xD574;&#xACB0;&#xD558;&#xAE30; &#xC704;&#xD574; &#xB450; &#xAC00;&#xC9C0; &#xBC29;&#xBC95;&#xC774; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xCCAB; &#xBC88;&#xC9F8;&#xB294; <code>--strictNullChecks</code>&#xB97C; &#xD0A4;&#xACE0; &#xBC18;&#xD658; &#xD0C0;&#xC785;&#xC744; &#xC9C0;&#xC815;&#xD558;&#xB294; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-keyword">function</span> <span class="cm-variable">area</span>(<span class="cm-def">s</span>: <span class="cm-variable-3">Shape</span>): <span class="cm-variable-3">number</span> { <span class="cm-comment">// &#xC624;&#xB958;: number | undefined&#xB97C; &#xBC18;&#xD658;&#xD569;&#xB2C8;&#xB2E4;</span>
    <span class="cm-keyword">switch</span> (<span class="cm-variable">s</span>.<span class="cm-property">kind</span>) {
        <span class="cm-keyword">case</span> <span class="cm-string">&quot;square&quot;</span>: <span class="cm-keyword">return</span> <span class="cm-variable">s</span>.<span class="cm-property">size</span> <span class="cm-operator">*</span> <span class="cm-variable">s</span>.<span class="cm-property">size</span>;
        <span class="cm-keyword">case</span> <span class="cm-string">&quot;rectangle&quot;</span>: <span class="cm-keyword">return</span> <span class="cm-variable">s</span>.<span class="cm-property">height</span> <span class="cm-operator">*</span> <span class="cm-variable">s</span>.<span class="cm-property">width</span>;
        <span class="cm-keyword">case</span> <span class="cm-string">&quot;circle&quot;</span>: <span class="cm-keyword">return</span> <span class="cm-variable">Math</span>.<span class="cm-property">PI</span> <span class="cm-operator">*</span> <span class="cm-variable">s</span>.<span class="cm-property">radius</span> <span class="cm-operator">**</span> <span class="cm-number">2</span>;
    }
}
</code></pre>
<p><code>switch</code>&#xAC00; &#xB354; &#xC774;&#xC0C1; &#xCCA0;&#xC800;&#xD558;&#xC9C0; &#xC54A;&#xC544;&#xC11C; TypeScript&#xB294; &#xD568;&#xC218;&#xAC00; <code>undefined</code>&#xB97C; &#xBC18;&#xD658;&#xD560; &#xC218; &#xC788;&#xB2E4;&#xB294; &#xAC83;&#xC744; &#xC54C;&#xACE0; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xB9CC;&#xC57D; &#xBA85;&#xC2DC;&#xC801;&#xC778; &#xBC18;&#xD658; &#xD0C0;&#xC785; <code>number</code>&#xB97C; &#xAC00;&#xC9C0;&#xACE0; &#xC788;&#xC73C;&#xBA74;, &#xBC18;&#xD658; &#xD0C0;&#xC785;&#xC774; &#xC2E4;&#xC81C;&#xB85C; <code>number | undefined</code>&#xB77C;&#xB294; &#xC624;&#xB958;&#xB97C; &#xC5BB;&#xAC8C; &#xB429;&#xB2C8;&#xB2E4;.
&#xD558;&#xC9C0;&#xB9CC; &#xC774; &#xBC29;&#xBC95;&#xC740; &#xAF64; &#xC560;&#xB9E4;&#xD558;&#xACE0; <code>--strictNullChecks</code>&#xAC00; &#xC608;&#xC804; &#xCF54;&#xB4DC;&#xC5D0;&#xC11C; &#xD56D;&#xC0C1; &#xC791;&#xB3D9;&#xD558;&#xB294; &#xAC83;&#xC740; &#xC544;&#xB2D9;&#xB2C8;&#xB2E4;.</p>
<p>&#xB450; &#xBC88;&#xC9F8; &#xBC29;&#xBC95;&#xC740; &#xCEF4;&#xD30C;&#xC77C;&#xB7EC;&#xAC00; &#xC644;&#xC804;&#xD568;&#xC744; &#xAC80;&#xC0AC;&#xD558;&#xAE30; &#xC704;&#xD574; &#xC0AC;&#xC6A9;&#xD558;&#xB294; <code>never</code> &#xD0C0;&#xC785;&#xC744; &#xC0AC;&#xC6A9;&#xD558;&#xB294; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-keyword">function</span> <span class="cm-variable">assertNever</span>(<span class="cm-def">x</span>: <span class="cm-variable-3">never</span>): <span class="cm-variable">never</span> {
    <span class="cm-keyword">throw</span> <span class="cm-keyword">new</span> <span class="cm-variable">Error</span>(<span class="cm-string">&quot;Unexpected object: &quot;</span> <span class="cm-operator">+</span> <span class="cm-variable">x</span>);
}
<span class="cm-keyword">function</span> <span class="cm-variable">area</span>(<span class="cm-def">s</span>: <span class="cm-variable-3">Shape</span>) {
    <span class="cm-keyword">switch</span> (<span class="cm-variable-2">s</span>.<span class="cm-property">kind</span>) {
        <span class="cm-keyword">case</span> <span class="cm-string">&quot;square&quot;</span>: <span class="cm-keyword">return</span> <span class="cm-variable-2">s</span>.<span class="cm-property">size</span> <span class="cm-operator">*</span> <span class="cm-variable-2">s</span>.<span class="cm-property">size</span>;
        <span class="cm-keyword">case</span> <span class="cm-string">&quot;rectangle&quot;</span>: <span class="cm-keyword">return</span> <span class="cm-variable-2">s</span>.<span class="cm-property">height</span> <span class="cm-operator">*</span> <span class="cm-variable-2">s</span>.<span class="cm-property">width</span>;
        <span class="cm-keyword">case</span> <span class="cm-string">&quot;circle&quot;</span>: <span class="cm-keyword">return</span> <span class="cm-variable">Math</span>.<span class="cm-property">PI</span> <span class="cm-operator">*</span> <span class="cm-variable-2">s</span>.<span class="cm-property">radius</span> <span class="cm-operator">**</span> <span class="cm-number">2</span>;
        <span class="cm-keyword">default</span>: <span class="cm-keyword">return</span> <span class="cm-variable">assertNever</span>(<span class="cm-variable-2">s</span>); <span class="cm-comment">// &#xBE60;&#xC9C4; &#xCF00;&#xC774;&#xC2A4;&#xAC00; &#xC788;&#xB2E4;&#xBA74; &#xC5EC;&#xAE30;&#xC11C; &#xC624;&#xB958; &#xBC1C;&#xC0DD;</span>
    }
}
</code></pre>
<p>&#xC5EC;&#xAE30;&#xC11C;, <code>assertNever</code>&#xB294; <code>s</code>&#xAC00; <code>never</code> &#xD0C0;&#xC785;&#xC778;&#xC9C0; &#xAC80;&#xC0AC;&#xD569;&#xB2C8;&#xB2E4; &#x2014; &#xBAA8;&#xB4E0; &#xB2E4;&#xB978; &#xCF00;&#xC774;&#xC2A4;&#xB4E4;&#xC774; &#xC81C;&#xAC70;&#xB41C; &#xD6C4; &#xB0A8;&#xC740; &#xD0C0;&#xC785;.
&#xB9CC;&#xC57D; &#xCF00;&#xC774;&#xC2A4;&#xB97C; &#xC78A;&#xC5C8;&#xB2E4;&#xBA74;, <code>s</code>&#xB294; &#xC2E4;&#xC81C; &#xD0C0;&#xC785;&#xC744; &#xAC00;&#xC9C8; &#xAC83;&#xC774;&#xACE0; &#xD0C0;&#xC785; &#xC624;&#xB958;&#xAC00; &#xBC1C;&#xC0DD;&#xD569;&#xB2C8;&#xB2E4;.
&#xC774; &#xBC29;&#xBC95;&#xC740; &#xCD94;&#xAC00; &#xD568;&#xC218;&#xB97C; &#xC815;&#xC758;&#xD574;&#xC57C; &#xD569;&#xB2C8;&#xB2E4;&#xB9CC; &#xC78A;&#xC5B4;&#xBC84;&#xB838;&#xC744; &#xB54C;, &#xD6E8;&#xC52C; &#xB354; &#xBA85;&#xBC31;&#xD574;&#xC9D1;&#xB2C8;&#xB2E4;.</p>
<h1 id="&#xB2E4;&#xD615;&#xC131;-this-&#xD0C0;&#xC785;-polymorphic-this-types">&#xB2E4;&#xD615;&#xC131; <code>this</code> &#xD0C0;&#xC785; (Polymorphic <code>this</code> types)</h1>
<p>&#xB2E4;&#xD615;&#xC131; <code>this</code> &#xD0C0;&#xC785;&#xC740; &#xD3EC;&#xD568;&#xD558;&#xB294; &#xD074;&#xB798;&#xC2A4;&#xB098; &#xC778;&#xD130;&#xD398;&#xC774;&#xC2A4;&#xC758; <em>&#xD558;&#xC704; &#xD0C0;&#xC785;</em>&#xC744; &#xB098;&#xD0C0;&#xB0C5;&#xB2C8;&#xB2E4;.
<em>F</em>-bounded polymorphism&#xC774;&#xB77C;&#xACE0; &#xBD80;&#xB985;&#xB2C8;&#xB2E4;.
&#xC608;&#xB97C; &#xB4E4;&#xC5B4;, &#xACC4;&#xCE35;&#xC801;&#xC73C;&#xB85C; &#xC720;&#xC5F0;&#xD55C; &#xC778;&#xD130;&#xD398;&#xC774;&#xC2A4;&#xB97C; &#xD45C;&#xD604;&#xD558;&#xAE30; &#xB354; &#xC27D;&#xAC8C; &#xB9CC;&#xB4ED;&#xB2C8;&#xB2E4;.
&#xAC01; &#xC5F0;&#xC0B0; &#xD6C4;&#xC5D0; <code>this</code>&#xB97C; &#xBC18;&#xD658;&#xD558;&#xB294; &#xAC04;&#xB2E8;&#xD55C; &#xACC4;&#xC0B0;&#xAE30;&#xB97C; &#xBCF4;&#xACA0;&#xC2B5;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-keyword">class</span> <span class="cm-variable">BasicCalculator</span> {
    <span class="cm-keyword">public</span> <span class="cm-keyword">constructor</span>(<span class="cm-keyword">protected</span> <span class="cm-variable">value</span>: <span class="cm-variable-3">number</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>) { }
    <span class="cm-keyword">public</span> <span class="cm-variable">currentValue</span>(): <span class="cm-variable-3">number</span> {
        <span class="cm-keyword">return</span> <span class="cm-keyword">this</span>.<span class="cm-property">value</span>;
    }
    <span class="cm-keyword">public</span> <span class="cm-variable">add</span>(<span class="cm-variable">operand</span>: <span class="cm-variable-3">number</span>): <span class="cm-keyword">this</span> {
        <span class="cm-keyword">this</span>.<span class="cm-property">value</span> <span class="cm-operator">+=</span> <span class="cm-variable">operand</span>;
        <span class="cm-keyword">return</span> <span class="cm-keyword">this</span>;
    }
    <span class="cm-keyword">public</span> <span class="cm-variable">multiply</span>(<span class="cm-variable">operand</span>: <span class="cm-variable-3">number</span>): <span class="cm-keyword">this</span> {
        <span class="cm-keyword">this</span>.<span class="cm-property">value</span> <span class="cm-operator">*=</span> <span class="cm-variable">operand</span>;
        <span class="cm-keyword">return</span> <span class="cm-keyword">this</span>;
    }
    <span class="cm-comment">// ... &#xB2E4;&#xB978; &#xC5F0;&#xC0B0;&#xB4E4;&#xC740; &#xC5EC;&#xAE30;&#xC5D0; &#xC791;&#xC131; ...</span>
}

<span class="cm-keyword">let</span> <span class="cm-variable">v</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">BasicCalculator</span>(<span class="cm-number">2</span>)
            .<span class="cm-property">multiply</span>(<span class="cm-number">5</span>)
            .<span class="cm-property">add</span>(<span class="cm-number">1</span>)
            .<span class="cm-property">currentValue</span>();
</code></pre>
<p>&#xD074;&#xB798;&#xC2A4;&#xAC00; <code>this</code> &#xD0C0;&#xC785;&#xC744; &#xC0AC;&#xC6A9;&#xD558;&#xAE30; &#xB54C;&#xBB38;&#xC5D0;, &#xC774;&#xB97C; extend &#xD560; &#xC218; &#xC788;&#xACE0; &#xC0C8;&#xB85C;&#xC6B4; &#xD074;&#xB798;&#xC2A4;&#xAC00; &#xC544;&#xBB34; &#xBCC0;&#xACBD; &#xC5C6;&#xC774; &#xC774;&#xC804; &#xBA54;&#xC11C;&#xB4DC;&#xB97C; &#xC0AC;&#xC6A9;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-keyword">class</span> <span class="cm-variable">ScientificCalculator</span> <span class="cm-keyword">extends</span> <span class="cm-variable">BasicCalculator</span> {
    <span class="cm-keyword">public</span> <span class="cm-keyword">constructor</span>(<span class="cm-variable">value</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>) {
        <span class="cm-keyword">super</span>(<span class="cm-variable">value</span>);
    }
    <span class="cm-keyword">public</span> <span class="cm-variable">sin</span>() {
        <span class="cm-keyword">this</span>.<span class="cm-property">value</span> <span class="cm-operator">=</span> <span class="cm-variable">Math</span>.<span class="cm-property">sin</span>(<span class="cm-keyword">this</span>.<span class="cm-property">value</span>);
        <span class="cm-keyword">return</span> <span class="cm-keyword">this</span>;
    }
    <span class="cm-comment">// ... &#xB2E4;&#xB978; &#xC5F0;&#xC0B0;&#xB4E4;&#xC740; &#xC5EC;&#xAE30;&#xC5D0; &#xC791;&#xC131; ...</span>
}

<span class="cm-keyword">let</span> <span class="cm-variable">v</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">ScientificCalculator</span>(<span class="cm-number">2</span>)
        .<span class="cm-property">multiply</span>(<span class="cm-number">5</span>)
        .<span class="cm-property">sin</span>()
        .<span class="cm-property">add</span>(<span class="cm-number">1</span>)
        .<span class="cm-property">currentValue</span>();
</code></pre>
<p><code>this</code> &#xD0C0;&#xC785; &#xC5C6;&#xC774;, <code>ScientificCalculator</code>&#xB294; <code>BasicCalculator</code>&#xB97C; extend &#xD560; &#xC218; &#xC5C6;&#xC744; &#xAC83;&#xC774;&#xACE0; &#xC720;&#xC5F0;&#xD55C; &#xC778;&#xD130;&#xD398;&#xC774;&#xC2A4;&#xB97C; &#xC720;&#xC9C0;&#xD558;&#xC9C0; &#xBABB;&#xD560; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;.
<code>multiply</code>&#xB294; <code>sin</code> &#xBA54;&#xC11C;&#xB4DC;&#xB97C; &#xAC00;&#xC9C0;&#xC9C0; &#xC54A;&#xB294; <code>BasicCalculator</code>&#xB97C; &#xBC18;&#xD658;&#xD569;&#xB2C8;&#xB2E4;.
&#xD558;&#xC9C0;&#xB9CC;, <code>this</code> &#xD0C0;&#xC785;&#xC73C;&#xB85C;, <code>multiply</code>&#xB294; <code>this</code>&#xB97C; &#xBC18;&#xD658;&#xD558;&#xACE0;, &#xC5EC;&#xAE30;&#xC11C;&#xB294; <code>ScientificCalculator</code>&#xC744; &#xB9D0;&#xD569;&#xB2C8;&#xB2E4;.</p>
<h1 id="&#xC778;&#xB371;&#xC2A4;-&#xD0C0;&#xC785;-index-types">&#xC778;&#xB371;&#xC2A4; &#xD0C0;&#xC785; (Index types)</h1>
<p>&#xC778;&#xB371;&#xC2A4; &#xD0C0;&#xC785;&#xC744; &#xC0AC;&#xC6A9;&#xD558;&#xBA74;, &#xB3D9;&#xC801;&#xC778; &#xD504;&#xB85C;&#xD37C;&#xD2F0; &#xC774;&#xB984;&#xC744; &#xC0AC;&#xC6A9;&#xD558;&#xB294; &#xCF54;&#xB4DC;&#xB97C; &#xCEF4;&#xD30C;&#xC77C;&#xB7EC;&#xAC00; &#xAC80;&#xC0AC;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xC608;&#xB97C; &#xB4E4;&#xC5B4;, &#xC77C;&#xBC18;&#xC801;&#xC778; JavaScript &#xD328;&#xD134;&#xC740; &#xAC1D;&#xCCB4;&#xC5D0;&#xC11C; &#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xC758; &#xBD80;&#xBD84;&#xC9D1;&#xD569;&#xC744; &#xBF51;&#xC544;&#xB0B4;&#xB294; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-js"><span class="cm-keyword">function</span> <span class="cm-variable">pluck</span>(<span class="cm-def">o</span>, <span class="cm-def">propertyNames</span>) {
    <span class="cm-keyword">return</span> <span class="cm-variable-2">propertyNames</span>.<span class="cm-property">map</span>(<span class="cm-def">n</span> <span class="cm-operator">=&gt;</span> <span class="cm-variable-2">o</span>[<span class="cm-variable-2">n</span>]);
}
</code></pre>
<p>&#xC5EC;&#xAE30;&#xC11C;&#xB294; <strong>&#xC778;&#xB371;&#xC2A4; &#xD0C0;&#xC785; &#xCFFC;&#xB9AC;</strong>&#xC640; <strong>&#xC778;&#xB371;&#xC2A4; &#xC811;&#xADFC;</strong> &#xC5F0;&#xC0B0;&#xC790;&#xB97C; &#xC0AC;&#xC6A9;&#xD574;&#xC11C; TypeScript&#xC5D0;&#xC11C; &#xC774; &#xD568;&#xC218;&#xB97C; &#xC5B4;&#xB5BB;&#xAC8C; &#xC791;&#xC131;&#xD558;&#xACE0; &#xC0AC;&#xC6A9;&#xD558;&#xB294;&#xC9C0; &#xBCF4;&#xC5EC;&#xC90D;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-keyword">function</span> <span class="cm-variable">pluck</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span>, <span class="cm-variable">K</span> <span class="cm-keyword">extends</span> <span class="cm-variable">keyof</span> <span class="cm-variable">T</span><span class="cm-operator">&gt;</span>(<span class="cm-variable">o</span>: <span class="cm-variable">T</span>, <span class="cm-variable">propertyNames</span>: <span class="cm-variable">K</span>[]): <span class="cm-variable">T</span>[<span class="cm-variable">K</span>][] {
  <span class="cm-keyword">return</span> <span class="cm-variable">propertyNames</span>.<span class="cm-property">map</span>(<span class="cm-def">n</span> <span class="cm-operator">=&gt;</span> <span class="cm-variable">o</span>[<span class="cm-variable-2">n</span>]);
}

<span class="cm-keyword">interface</span> <span class="cm-variable">Car</span> {
    <span class="cm-variable">manufacturer</span>: <span class="cm-variable-3">string</span>;
    <span class="cm-variable">model</span>: <span class="cm-variable-3">string</span>;
    <span class="cm-variable">year</span>: <span class="cm-variable-3">number</span>;
}
<span class="cm-keyword">let</span> <span class="cm-variable">taxi</span>: <span class="cm-variable-3">Car</span> <span class="cm-operator">=</span> {
    <span class="cm-property">manufacturer</span>: <span class="cm-string">&apos;Toyota&apos;</span>,
    <span class="cm-property">model</span>: <span class="cm-string">&apos;Camry&apos;</span>,
    <span class="cm-property">year</span>: <span class="cm-number">2014</span>
};

<span class="cm-comment">// Manufacturer&#xACFC; model&#xC740; &#xB458; &#xB2E4; &#xBB38;&#xC790;&#xC5F4; &#xD0C0;&#xC785;&#xC785;&#xB2C8;&#xB2E4;,</span>
<span class="cm-comment">// &#xADF8;&#xB798;&#xC11C; &#xB458; &#xB2E4; &#xD0C0;&#xC774;&#xD551;&#xB41C; &#xBB38;&#xC790;&#xC5F4; &#xBC30;&#xC5F4;&#xB85C; &#xB04C;&#xC5B4;&#xB0BC; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</span>
<span class="cm-keyword">let</span> <span class="cm-variable">makeAndModel</span>: <span class="cm-variable-3">string</span>[] <span class="cm-operator">=</span> <span class="cm-variable">pluck</span>(<span class="cm-variable">taxi</span>, [<span class="cm-string">&apos;manufacturer&apos;</span>, <span class="cm-string">&apos;model&apos;</span>]);

<span class="cm-comment">// &#xB9CC;&#xC57D; model&#xACFC; year&#xB97C; &#xB04C;&#xC5B4;&#xB0B4;&#xB824;&#xACE0; &#xD558;&#xBA74;,</span>
<span class="cm-comment">// &#xC720;&#xB2C8;&#xC5B8; &#xD0C0;&#xC785;&#xC758; &#xBC30;&#xC5F4;: (string | number)[] &#xC744; &#xC5BB;&#xAC8C;&#xB429;&#xB2C8;&#xB2E4;.</span>
<span class="cm-keyword">let</span> <span class="cm-variable">modelYear</span> <span class="cm-operator">=</span> <span class="cm-variable">pluck</span>(<span class="cm-variable">taxi</span>, [<span class="cm-string">&apos;model&apos;</span>, <span class="cm-string">&apos;year&apos;</span>])
</code></pre>
<p>&#xCEF4;&#xD30C;&#xC77C;&#xB7EC;&#xB294; <code>manufacturer</code> &#xC640; <code>model</code>&#xC774; &#xC2E4;&#xC81C; <code>Car</code>&#xC758; &#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xC778;&#xC9C0; &#xAC80;&#xC0AC;&#xD569;&#xB2C8;&#xB2E4;.
&#xC608;&#xC81C;&#xB294; &#xBA87; &#xAC00;&#xC9C0; &#xC0C8;&#xB85C;&#xC6B4; &#xD0C0;&#xC785; &#xC5F0;&#xC0B0;&#xC790;&#xB97C; &#xC18C;&#xAC1C;&#xD569;&#xB2C8;&#xB2E4;.
&#xCCAB; &#xBC88;&#xC9F8;, <code>keyof T</code>&#xB294; <strong>&#xC778;&#xB371;&#xC2A4; &#xD0C0;&#xC785; &#xCFFC;&#xB9AC; &#xC5F0;&#xC0B0;&#xC790;</strong>&#xC785;&#xB2C8;&#xB2E4;.
any &#xD0C0;&#xC785;&#xC778; <code>T</code>, <code>keyof T</code>&#xB294; <code>T</code>&#xC758; &#xC54C;&#xB824;&#xC9C0;&#xACE0; &#xACF5;&#xAC1C;&#xB41C; &#xD504;&#xB85C;&#xD37C;&#xD2F0; &#xC774;&#xB984;&#xB4E4;&#xC758; &#xC720;&#xB2C8;&#xC5B8;&#xC785;&#xB2C8;&#xB2E4;.
&#xC608;&#xB97C; &#xB4E4;&#xC5B4;:</p>
<pre><code class="lang-ts"><span class="cm-keyword">let</span> <span class="cm-variable">carProps</span>: <span class="cm-variable-3">keyof</span> <span class="cm-variable">Car</span>; <span class="cm-comment">// (&apos;manufacturer&apos; | &apos;model&apos; | &apos;year&apos;)&#xC758; &#xC720;&#xB2C8;&#xC5B8;</span>
</code></pre>
<p><code>keyof Car</code>&#xB294; <code>&apos;manufacturer&apos; | &apos;model&apos; | &apos;year&apos;</code>&#xC640; &#xC644;&#xC804;&#xD788; &#xD638;&#xD658;&#xB429;&#xB2C8;&#xB2E4;.
&#xCC28;&#xC774;&#xC810;&#xC740; <code>Car</code>&#xC5D0; <code>ownersAddress: string</code>&#xB77C;&#xB294; &#xB610; &#xB2E4;&#xB978; &#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xB97C; &#xCD94;&#xAC00;&#xD55C;&#xB2E4;&#xBA74;, <code>keyof Car</code>&#xB294; &#xC790;&#xB3D9;&#xC73C;&#xB85C; <code>&apos;manufacturer&apos; | &apos;model&apos; | &apos;year&apos; | &apos;ownersAddress&apos;</code>&#xB85C; &#xC5C5;&#xB370;&#xC774;&#xD2B8;&#xD569;&#xB2C8;&#xB2E4;.
&#xADF8;&#xB9AC;&#xACE0; &#xBBF8;&#xB9AC; &#xD504;&#xB85C;&#xD37C;&#xD2F0; &#xC774;&#xB984;&#xC744; &#xC54C; &#xC218; &#xC5C6;&#xC744; &#xB54C;, <code>pluck</code>&#xCC98;&#xB7FC; &#xC81C;&#xB124;&#xB9AD; &#xCEE8;&#xD14D;&#xC2A4;&#xD2B8;&#xC5D0;&#xC11C; <code>keyof</code>&#xB97C; &#xC0AC;&#xC6A9;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xC989; &#xCEF4;&#xD30C;&#xC77C;&#xB7EC;&#xAC00; &#xC62C;&#xBC14;&#xB978; &#xD504;&#xB85C;&#xD37C;&#xD2F0; &#xC774;&#xB984;&#xB4E4;&#xC758; &#xC9D1;&#xD569;&#xC744; <code>pluck</code>&#xC5D0; &#xC804;&#xB2EC;&#xD558;&#xB294;&#xC9C0; &#xAC80;&#xC0AC;&#xD569;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-comment">// &#xC624;&#xB958;, &apos;manufacturer&apos; | &apos;model&apos; | &apos;year&apos;&#xC5D0; &apos;unknown&apos;&#xC774; &#xC5C6;&#xC2B5;&#xB2C8;&#xB2E4;.</span>
<span class="cm-variable">pluck</span>(<span class="cm-variable">taxi</span>, [<span class="cm-string">&apos;year&apos;</span>, <span class="cm-string">&apos;unknown&apos;</span>]); <span class="cm-string-2">/</span>
</code></pre>
<p>&#xB450; &#xBC88;&#xC9F8; &#xC5F0;&#xC0B0;&#xC790;&#xB294; <strong>&#xC778;&#xB371;&#xC2A4; &#xC811;&#xADFC; &#xC5F0;&#xC0B0;&#xC790;</strong> <code>T[K]</code>&#xC785;&#xB2C8;&#xB2E4;.
&#xC5EC;&#xAE30;&#xC11C;, &#xD0C0;&#xC785; &#xAD6C;&#xBB38;&#xC740; &#xD45C;&#xD604; &#xAD6C;&#xBB38;&#xC744; &#xBC18;&#xC601;&#xD569;&#xB2C8;&#xB2E4;.
&#xC989; <code>person[&apos;name&apos;]</code>&#xC740; <code>Person[&apos;name&apos;]</code> &#xD0C0;&#xC785; &#x2014; &#xC774; &#xC608;&#xC81C;&#xC5D0;&#xC11C;&#xB294; &#xB2E8;&#xC9C0; <code>string</code>, &#xC744; &#xAC00;&#xC9D1;&#xB2C8;&#xB2E4;.
&#xD558;&#xC9C0;&#xB9CC;, &#xC778;&#xB371;&#xC2A4; &#xD0C0;&#xC785; &#xCFFC;&#xB9AC;&#xCC98;&#xB7FC;, <code>T[K]</code>&#xB97C; &#xC81C;&#xB124;&#xB9AD; &#xCEE8;&#xD14D;&#xC2A4;&#xD2B8;&#xC5D0;&#xC11C; &#xC0AC;&#xC6A9;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xD0C0;&#xC785; &#xBCC0;&#xC218; <code>K extends keyof T</code>&#xC778;&#xC9C0; &#xD655;&#xC778;&#xD558;&#xBA74; &#xB429;&#xB2C8;&#xB2E4;.
&#xC5EC;&#xAE30; <code>getProperty</code> &#xD568;&#xC218;&#xC758; &#xB610; &#xB2E4;&#xB978; &#xC608;&#xC81C;&#xAC00; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-keyword">function</span> <span class="cm-variable">getProperty</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span>, <span class="cm-variable">K</span> <span class="cm-keyword">extends</span> <span class="cm-variable">keyof</span> <span class="cm-variable">T</span><span class="cm-operator">&gt;</span>(<span class="cm-variable">o</span>: <span class="cm-variable">T</span>, <span class="cm-variable">propertyName</span>: <span class="cm-variable">K</span>): <span class="cm-variable">T</span>[<span class="cm-variable">K</span>] {
    <span class="cm-keyword">return</span> <span class="cm-variable">o</span>[<span class="cm-variable">propertyName</span>]; <span class="cm-comment">// o[propertyName]&#xB294; T[K] &#xD0C0;&#xC785;&#xC785;&#xB2C8;&#xB2E4;</span>
}
</code></pre>
<p><code>getProperty</code>, <code>o: T</code> &#xADF8;&#xB9AC;&#xACE0; <code>propertyName: K</code>&#xC740; <code>o[propertyName]: T[K]</code>&#xB97C; &#xC758;&#xBBF8;&#xD569;&#xB2C8;&#xB2E4;.
<code>T[K]</code> &#xACB0;&#xACFC;&#xB97C; &#xBC18;&#xD658;&#xD558;&#xBA74;, &#xCEF4;&#xD30C;&#xC77C;&#xB7EC;&#xB294; &#xC2E4;&#xC81C; &#xD0A4;&#xC758; &#xD0C0;&#xC785;&#xC744; &#xC778;&#xC2A4;&#xD134;&#xC2A4;&#xD654;&#xD558;&#xACE0;, <code>getProperty</code>&#xC758; &#xBC18;&#xD658; &#xD0C0;&#xC785;&#xC740; &#xC694;&#xCCAD;&#xD55C; &#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xC5D0; &#xB530;&#xB77C; &#xB2EC;&#xB77C;&#xC9D1;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-keyword">let</span> <span class="cm-variable">name</span>: <span class="cm-variable-3">string</span> <span class="cm-operator">=</span> <span class="cm-variable">getProperty</span>(<span class="cm-variable">taxi</span>, <span class="cm-string">&apos;manufacturer&apos;</span>);
<span class="cm-keyword">let</span> <span class="cm-variable">year</span>: <span class="cm-variable-3">number</span> <span class="cm-operator">=</span> <span class="cm-variable">getProperty</span>(<span class="cm-variable">taxi</span>, <span class="cm-string">&apos;year&apos;</span>);

<span class="cm-comment">// &#xC624;&#xB958;, &apos;unknown&apos;&#xC740; &apos;manufacturer&apos; | &apos;model&apos; | &apos;year&apos;&#xC5D0; &#xC5C6;&#xC2B5;&#xB2C8;&#xB2E4;</span>
<span class="cm-keyword">let</span> <span class="cm-variable">unknown</span> <span class="cm-operator">=</span> <span class="cm-variable">getProperty</span>(<span class="cm-variable">taxi</span>, <span class="cm-string">&apos;unknown&apos;</span>);
</code></pre>
<h2 id="&#xC778;&#xB371;&#xC2A4;-&#xD0C0;&#xC785;&#xACFC;-&#xC778;&#xB371;&#xC2A4;-&#xC2DC;&#xADF8;&#xB2C8;&#xCC98;-index-types-and-index-signatures">&#xC778;&#xB371;&#xC2A4; &#xD0C0;&#xC785;&#xACFC; &#xC778;&#xB371;&#xC2A4; &#xC2DC;&#xADF8;&#xB2C8;&#xCC98; (Index types and index signatures)</h2>
<p><code>keyof</code>&#xC640; <code>T[K]</code>&#xAC00; &#xC778;&#xB371;&#xC2A4; &#xC2DC;&#xADF8;&#xB2C8;&#xCC98;&#xC640; &#xC0C1;&#xD638; &#xC791;&#xC6A9;&#xD569;&#xB2C8;&#xB2E4;. &#xC778;&#xB371;&#xC2A4; &#xC2DC;&#xADF8;&#xB2C8;&#xCC98; &#xB9E4;&#xAC1C;&#xBCC0;&#xC218; &#xD0C0;&#xC785;&#xC740; &apos;string&apos; &#xD639;&#xC740; &apos;number&apos;&#xC774;&#xC5B4;&#xC57C; &#xD569;&#xB2C8;&#xB2E4;.
&#xB9CC;&#xC57D; &#xBB38;&#xC790;&#xC5F4; &#xC778;&#xB371;&#xC2A4; &#xC2DC;&#xADF8;&#xB2C8;&#xCC98;&#xC778; &#xD0C0;&#xC785;&#xC774; &#xC788;&#xC73C;&#xBA74;, <code>keyof T</code>&#xB294; <code>string | number</code>&#xAC00; &#xB420; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;
(&#xADF8;&#xB0E5; <code>string</code>&#xC774; &#xC544;&#xB2D9;&#xB2C8;&#xB2E4;, JavaScript&#xC5D0;&#xC120; &#xBB38;&#xC790;&#xC5F4; (<code>object[&apos;42&apos;</code>])&#xB098; &#xC22B;&#xC790; (<code>object[42]</code>)&#xB97C; &#xC0AC;&#xC6A9;&#xD574;&#xC11C;
&#xAC1D;&#xCCB4; &#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xC5D0; &#xC811;&#xADFC;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;).
&#xADF8;&#xB9AC;&#xACE0; <code>T[string]</code>&#xC740; &#xC778;&#xB371;&#xC2A4; &#xC2DC;&#xADF8;&#xB2C8;&#xCC98;&#xC758; &#xD0C0;&#xC785;&#xC785;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-keyword">interface</span> <span class="cm-variable">Dictionary</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span> {
    [<span class="cm-variable">key</span>: <span class="cm-variable-3">string</span>]: <span class="cm-variable">T</span>;
}
<span class="cm-keyword">let</span> <span class="cm-variable">keys</span>: <span class="cm-variable-3">keyof</span> <span class="cm-variable">Dictionary</span><span class="cm-operator">&lt;</span><span class="cm-variable-3">number</span><span class="cm-operator">&gt;</span>; <span class="cm-comment">// string | number</span>
<span class="cm-keyword">let</span> <span class="cm-variable">value</span>: <span class="cm-variable-3">Dictionary</span><span class="cm-operator">&lt;</span><span class="cm-variable-3">number</span><span class="cm-operator">&gt;</span>[<span class="cm-string">&apos;foo&apos;</span>]; <span class="cm-comment">// number</span>
</code></pre>
<p>&#xC22B;&#xC790; &#xC778;&#xB371;&#xC2A4; &#xC2DC;&#xADF8;&#xB2C8;&#xCC98;&#xC778; &#xD0C0;&#xC785;&#xC774; &#xC788;&#xC73C;&#xBA74;, <code>keyof T</code>&#xB294; <code>number</code>&#xC77C; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-keyword">interface</span> <span class="cm-variable">Dictionary</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span> {
    [<span class="cm-variable">key</span>: <span class="cm-variable-3">number</span>]: <span class="cm-variable">T</span>;
}
<span class="cm-keyword">let</span> <span class="cm-variable">keys</span>: <span class="cm-variable-3">keyof</span> <span class="cm-variable">Dictionary</span><span class="cm-operator">&lt;</span><span class="cm-variable-3">number</span><span class="cm-operator">&gt;</span>; <span class="cm-comment">// &#xC22B;&#xC790;</span>
<span class="cm-keyword">let</span> <span class="cm-variable">value</span>: <span class="cm-variable-3">Dictionary</span><span class="cm-operator">&lt;</span><span class="cm-variable-3">number</span><span class="cm-operator">&gt;</span>[<span class="cm-string">&apos;foo&apos;</span>]; <span class="cm-comment">// &#xC624;&#xB958;, &#xD504;&#xB85C;&#xD37C;&#xD2F0; &apos;foo&apos;&#xB294; &#xD0C0;&#xC785; &apos;Dictionary&lt;number&gt;&apos;&#xC5D0; &#xC874;&#xC7AC;&#xD558;&#xC9C0; &#xC54A;&#xC2B5;&#xB2C8;&#xB2E4;.</span>
<span class="cm-keyword">let</span> <span class="cm-variable">value</span>: <span class="cm-variable-3">Dictionary</span><span class="cm-operator">&lt;</span><span class="cm-variable-3">number</span><span class="cm-operator">&gt;</span>[<span class="cm-number">42</span>]; <span class="cm-comment">// &#xC22B;&#xC790;</span>
</code></pre>
<h1 id="&#xB9E4;&#xD551;-&#xD0C0;&#xC785;-mapped-types">&#xB9E4;&#xD551; &#xD0C0;&#xC785; (Mapped types)</h1>
<p>&#xAE30;&#xC874; &#xD0C0;&#xC785;&#xC744; &#xAC00;&#xC838;&#xC640; &#xC120;&#xD0DD;&#xC801; &#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xB85C; &#xB9CC;&#xB4DC;&#xB294; &#xAC83;&#xC740; &#xC77C;&#xBC18;&#xC801;&#xC778; &#xC791;&#xC5C5;&#xC785;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-keyword">interface</span> <span class="cm-variable">PersonPartial</span> {
    <span class="cm-variable">name</span><span class="cm-operator">?</span>: <span class="cm-variable-3">string</span>;
    <span class="cm-variable">age</span><span class="cm-operator">?</span>: <span class="cm-variable-3">number</span>;
}
</code></pre>
<p>&#xD639;&#xC740; &#xC77D;&#xAE30;&#xC804;&#xC6A9; &#xBC84;&#xC804;&#xC744; &#xC6D0;&#xD560; &#xC218;&#xB3C4; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-keyword">interface</span> <span class="cm-variable">PersonReadonly</span> {
    <span class="cm-variable">readonly</span> <span class="cm-variable">name</span>: <span class="cm-variable-3">string</span>;
    <span class="cm-variable">readonly</span> <span class="cm-variable">age</span>: <span class="cm-variable-3">number</span>;
}
</code></pre>
<p>JavaScript&#xC5D0;&#xC11C; &#xCDA9;&#xBD84;&#xD788; &#xC790;&#xC8FC; &#xC77C;&#xC5B4;&#xB098;&#xB294; &#xC77C;&#xC774;&#xBA70; TypeScript&#xB294; &#xC774;&#xC804; &#xD0C0;&#xC785; &#x2014; <strong>&#xB9E4;&#xD551; &#xD0C0;&#xC785;</strong>&#xC744; &#xAE30;&#xBC18;&#xC73C;&#xB85C; &#xC0C8;&#xB85C;&#xC6B4; &#xD0C0;&#xC785;&#xC744; &#xB9CC;&#xB4DC;&#xB294; &#xBC29;&#xBC95;&#xC744; &#xC81C;&#xACF5;&#xD569;&#xB2C8;&#xB2E4;.
&#xB9E4;&#xD551; &#xD0C0;&#xC785;&#xC5D0;&#xC11C;, &#xC0C8;&#xB85C;&#xC6B4; &#xD0C0;&#xC785;&#xC740; &#xC774;&#xC804; &#xD0C0;&#xC785;&#xC5D0;&#xC11C; &#xAC01; &#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xB97C; &#xAC19;&#xC740; &#xBC29;&#xBC95;&#xC73C;&#xB85C; &#xBCC0;&#xD658;&#xD569;&#xB2C8;&#xB2E4;.
&#xC608;&#xB97C; &#xB4E4;&#xC5B4;, &#xBAA8;&#xB4E0; &#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xB97C; <code>readonly</code> &#xD639;&#xC740; &#xC120;&#xD0DD;&#xC801;&#xC73C;&#xB85C; &#xB9CC;&#xB4E4;&#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xC5EC;&#xAE30; &#xBA87;&#xAC00;&#xC9C0; &#xC608;&#xC81C;&#xAC00; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">Readonly</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> {
    <span class="cm-property">readonly</span> [<span class="cm-variable">P</span> <span class="cm-keyword">in</span> <span class="cm-variable">keyof</span> <span class="cm-variable">T</span>]: <span class="cm-variable">T</span>[<span class="cm-variable">P</span>];
}
<span class="cm-variable">type</span> <span class="cm-variable">Partial</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> {
    [<span class="cm-variable">P</span> <span class="cm-keyword">in</span> <span class="cm-variable">keyof</span> <span class="cm-variable">T</span>]<span class="cm-operator">?</span>: <span class="cm-variable">T</span>[<span class="cm-variable">P</span>];
}
</code></pre>
<p>&#xADF8;&#xB9AC;&#xACE0; &#xC0AC;&#xC6A9;&#xD558;&#xAE30; &#xC704;&#xD574;&#xC11C;&#xB294;:</p>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">PersonPartial</span> <span class="cm-operator">=</span> <span class="cm-variable">Partial</span><span class="cm-operator">&lt;</span><span class="cm-variable">Person</span><span class="cm-operator">&gt;</span>;
<span class="cm-variable">type</span> <span class="cm-variable">ReadonlyPerson</span> <span class="cm-operator">=</span> <span class="cm-variable">Readonly</span><span class="cm-operator">&lt;</span><span class="cm-variable">Person</span><span class="cm-operator">&gt;</span>;
</code></pre>
<p>&#xC774; &#xAD6C;&#xBB38;&#xC774; &#xBA64;&#xBC84;&#xBCF4;&#xB2E4;&#xB294; &#xD0C0;&#xC785;&#xC744; &#xC124;&#xBA85;&#xD55C;&#xB2E4;&#xB294; &#xAC83;&#xC5D0; &#xC720;&#xC758;&#xD558;&#xC138;&#xC694;.
&#xBA64;&#xBC84;&#xB97C; &#xCD94;&#xAC00;&#xD558;&#xAE38; &#xC6D0;&#xD55C;&#xB2E4;&#xBA74;, &#xAD50;&#xCC28; &#xD0C0;&#xC785;&#xC744; &#xC0AC;&#xC6A9;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-comment">// Use this:</span>
<span class="cm-variable">type</span> <span class="cm-variable">PartialWithNewMember</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> {
  [<span class="cm-variable">P</span> <span class="cm-keyword">in</span> <span class="cm-variable">keyof</span> <span class="cm-variable">T</span>]<span class="cm-operator">?</span>: <span class="cm-variable">T</span>[<span class="cm-variable">P</span>];
} <span class="cm-operator">&amp;</span> { <span class="cm-property">newMember</span>: <span class="cm-variable">boolean</span> }

<span class="cm-comment">// &#xB2E4;&#xC74C;&#xC744; &#xC0AC;&#xC6A9;&#xD558;&#xC9C0; **&#xB9C8;&#xC138;&#xC694;**!</span>
<span class="cm-comment">// &#xC624;&#xB958;&#xC785;&#xB2C8;&#xB2E4;!</span>
<span class="cm-variable">type</span> <span class="cm-variable">PartialWithNewMember</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> {
  [<span class="cm-variable">P</span> <span class="cm-keyword">in</span> <span class="cm-variable">keyof</span> <span class="cm-variable">T</span>]<span class="cm-operator">?</span>: <span class="cm-variable">T</span>[<span class="cm-variable">P</span>];
  <span class="cm-variable">newMember</span>: <span class="cm-variable">boolean</span>;
}
</code></pre>
<p>&#xAC00;&#xC7A5; &#xAC04;&#xB2E8;&#xD55C; &#xB9E4;&#xD551; &#xD0C0;&#xC785;&#xACFC; &#xADF8; &#xBD80;&#xBD84;&#xC744; &#xBD05;&#xC2DC;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">Keys</span> <span class="cm-operator">=</span> <span class="cm-string">&apos;option1&apos;</span> <span class="cm-operator">|</span> <span class="cm-string">&apos;option2&apos;</span>;
<span class="cm-variable">type</span> <span class="cm-variable">Flags</span> <span class="cm-operator">=</span> { [<span class="cm-variable">K</span> <span class="cm-keyword">in</span> <span class="cm-variable">Keys</span>]: <span class="cm-variable">boolean</span> };
</code></pre>
<p>&#xAD6C;&#xBB38;&#xC740; <code>for .. in</code>&#xC774; &#xB4E4;&#xC5B4;&#xAC04; &#xC778;&#xB371;&#xC2A4; &#xC2DC;&#xADF8;&#xB2C8;&#xCC98; &#xAD6C;&#xBB38;&#xACFC; &#xC720;&#xC0AC;&#xD569;&#xB2C8;&#xB2E4;.
&#xC138; &#xBD80;&#xBD84;&#xC73C;&#xB85C; &#xB098;&#xB269;&#xB2C8;&#xB2E4;:</p>
<ol>
<li>&#xAC01; &#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xC5D0; &#xC21C;&#xC11C;&#xB300;&#xB85C; &#xBC14;&#xC778;&#xB529;&#xB418;&#xB294; &#xD0C0;&#xC785; &#xBCC0;&#xC218; <code>K</code>.</li>
<li>&#xBC18;&#xBCF5;&#xD560; &#xD504;&#xB85C;&#xD37C;&#xD2F0; &#xC774;&#xB984;&#xC774; &#xD3EC;&#xD568;&#xB41C; &#xBB38;&#xC790;&#xC5F4; &#xB9AC;&#xD130;&#xB7F4; &#xC720;&#xB2C8;&#xC5B8; <code>Keys</code>.</li>
<li>&#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xC758; &#xACB0;&#xACFC; &#xD0C0;&#xC785;</li>
</ol>
<p>&#xC774; &#xAC04;&#xB2E8;&#xD55C; &#xC608;&#xC81C;&#xC5D0;&#xC11C;, <code>Keys</code>&#xB294; &#xD558;&#xB4DC;-&#xCF54;&#xB529;&#xB41C; &#xD504;&#xB85C;&#xD37C;&#xD2F0; &#xC774;&#xB984; &#xBAA9;&#xB85D;&#xC774;&#xACE0; &#xD504;&#xB85C;&#xD37C;&#xD2F0; &#xD0C0;&#xC785;&#xC740; &#xD56D;&#xC0C1; <code>boolean</code>&#xC785;&#xB2C8;&#xB2E4;, &#xADF8;&#xB798;&#xC11C; &#xC774; &#xB9E4;&#xD551; &#xD0C0;&#xC785;&#xC740; &#xC544;&#xB798; &#xC4F0;&#xC778; &#xAC83;&#xACFC; &#xB3D9;&#xC77C;&#xD569;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">Flags</span> <span class="cm-operator">=</span> {
    <span class="cm-property">option1</span>: <span class="cm-variable">boolean</span>;
    <span class="cm-variable">option2</span>: <span class="cm-variable">boolean</span>;
}
</code></pre>
<p>&#xD558;&#xC9C0;&#xB9CC; &#xC2E4;&#xC81C; &#xC560;&#xD50C;&#xB9AC;&#xCF00;&#xC774;&#xC158;&#xC740;, &#xC704;&#xC5D0;&#xC11C; <code>readonly</code>&#xB098; <code>Partial</code>&#xCC98;&#xB7FC; &#xBCF4;&#xC785;&#xB2C8;&#xB2E4;.
&#xC874;&#xC7AC;&#xD558;&#xB294; &#xD0C0;&#xC785;&#xC744; &#xAE30;&#xBC18;&#xC73C;&#xB85C; &#xD558;&#xACE0;, &#xD2B9;&#xC815; &#xBC29;&#xBC95;&#xC73C;&#xB85C; &#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xB97C; &#xBCC0;&#xD615;&#xC2DC;&#xD0B5;&#xB2C8;&#xB2E4;.
&#xC774;&#xB54C; <code>keyof</code>&#xC640; &#xC778;&#xB371;&#xC2A4; &#xC811;&#xADFC; &#xD0C0;&#xC785;&#xC774; &#xB4F1;&#xC7A5;&#xD569;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">NullablePerson</span> <span class="cm-operator">=</span> { [<span class="cm-variable">P</span> <span class="cm-keyword">in</span> <span class="cm-variable">keyof</span> <span class="cm-variable">Person</span>]: <span class="cm-variable">Person</span>[<span class="cm-variable">P</span>] <span class="cm-operator">|</span> <span class="cm-atom">null</span> }
<span class="cm-variable">type</span> <span class="cm-variable">PartialPerson</span> <span class="cm-operator">=</span> { [<span class="cm-variable">P</span> <span class="cm-keyword">in</span> <span class="cm-variable">keyof</span> <span class="cm-variable">Person</span>]<span class="cm-operator">?</span>: <span class="cm-variable">Person</span>[<span class="cm-variable">P</span>] }
</code></pre>
<p>&#xD558;&#xC9C0;&#xB9CC; &#xC77C;&#xBC18;&#xC801;&#xC778; &#xBC84;&#xC804;&#xC744; &#xAC00;&#xC9C0;&#xB294; &#xAC8C; &#xB354; &#xC720;&#xC6A9;&#xD560; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">Nullable</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> { [<span class="cm-variable">P</span> <span class="cm-keyword">in</span> <span class="cm-variable">keyof</span> <span class="cm-variable">T</span>]: <span class="cm-variable">T</span>[<span class="cm-variable">P</span>] <span class="cm-operator">|</span> <span class="cm-atom">null</span> }
<span class="cm-variable">type</span> <span class="cm-variable">Partial</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> { [<span class="cm-variable">P</span> <span class="cm-keyword">in</span> <span class="cm-variable">keyof</span> <span class="cm-variable">T</span>]<span class="cm-operator">?</span>: <span class="cm-variable">T</span>[<span class="cm-variable">P</span>] }
</code></pre>
<p>&#xC774; &#xC608;&#xC81C;&#xB4E4;&#xC5D0;&#xC11C;, &#xD504;&#xB85C;&#xD37C;&#xD2F0; &#xBAA9;&#xB85D;&#xC740; <code>keyof T</code>&#xC774;&#xACE0; &#xACB0;&#xACFC; &#xD0C0;&#xC785;&#xC740; <code>T[P]</code>&#xC758; &#xBCC0;&#xD615;&#xC785;&#xB2C8;&#xB2E4;.
&#xC774;&#xB294; &#xB9E4;&#xD551; &#xD0C0;&#xC785;&#xC758; &#xC77C;&#xBC18;&#xC801;&#xC778; &#xC0AC;&#xC6A9;&#xC5D0; &#xC788;&#xC5B4; &#xC88B;&#xC740; &#xD15C;&#xD50C;&#xB9BF;&#xC785;&#xB2C8;&#xB2E4;.
&#xC65C;&#xB0D0;&#xD558;&#xBA74; &#xC774;&#xB7F0; &#xC885;&#xB958;&#xC758; &#xBCC0;&#xD615;&#xC774; <a href="https://en.wikipedia.org/wiki/Homomorphism" target="_blank">&#xB3D9;&#xD615; (homomorphic)</a> &#xC774;&#xAE30; &#xB54C;&#xBB38;&#xC5D0;, &#xB9E4;&#xD551;&#xC774; <code>T</code>&#xC758; &#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xC5D0;&#xB9CC; &#xC801;&#xC6A9;&#xB418;&#xACE0; &#xB2E4;&#xB978; &#xAC83;&#xC5D0;&#xB294; &#xC801;&#xC6A9;&#xB418;&#xC9C0; &#xC54A;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xCEF4;&#xD30C;&#xC77C;&#xB7EC;&#xB294; &#xC0C8;&#xB85C;&#xC6B4; &#xAC83;&#xC744; &#xCD94;&#xAC00;&#xD558;&#xAE30; &#xC804;&#xC5D0; &#xC874;&#xC7AC;&#xD558;&#xB294; &#xBAA8;&#xB4E0; &#xD504;&#xB85C;&#xD37C;&#xD2F0; &#xC9C0;&#xC815;&#xC790;&#xB97C; &#xBCF5;&#xC0AC;&#xD560; &#xC218; &#xC788;&#xB2E4;&#xB294; &#xAC83;&#xC744; &#xC54C;&#xACE0; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xC608;&#xB97C; &#xB4E4;&#xC5B4;, &#xB9CC;&#xC57D; <code>Person.name</code>&#xC774; &#xC77D;&#xAE30; &#xC804;&#xC6A9;&#xC774;&#xC5C8;&#xB2E4;&#xBA74;, <code>Partial&lt;Person&gt;.name</code>&#xC740; &#xC77D;&#xAE30; &#xC804;&#xC6A9;&#xC774;&#xACE0; &#xC120;&#xD0DD;&#xC801;&#xC77C; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;.</p>
<p><code>Proxy&lt;T&gt;</code> &#xD074;&#xB798;&#xC2A4; &#xC548;&#xC5D0; &#xB798;&#xD551; &#xB41C; <code>T[P]</code>&#xC5D0; &#xB300;&#xD55C; &#xC608;&#xC81C;&#xAC00; &#xD558;&#xB098; &#xB354; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">Proxy</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> {
    <span class="cm-property">get</span>(): <span class="cm-variable">T</span>;
    <span class="cm-variable">set</span>(<span class="cm-variable">value</span>: <span class="cm-variable">T</span>): <span class="cm-variable">void</span>;
}
<span class="cm-variable">type</span> <span class="cm-variable">Proxify</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> {
    [<span class="cm-variable">P</span> <span class="cm-keyword">in</span> <span class="cm-variable">keyof</span> <span class="cm-variable">T</span>]: <span class="cm-variable">Proxy</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span>[<span class="cm-variable">P</span>]<span class="cm-operator">&gt;</span>;
}
<span class="cm-keyword">function</span> <span class="cm-variable">proxify</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span>(<span class="cm-variable">o</span>: <span class="cm-variable">T</span>): <span class="cm-variable">Proxify</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span> {
   <span class="cm-comment">// ... &#xD504;&#xB85D;&#xC2DC; &#xB798;&#xD551; ...</span>
}
<span class="cm-keyword">let</span> <span class="cm-variable">proxyProps</span> <span class="cm-operator">=</span> <span class="cm-variable">proxify</span>(<span class="cm-variable">props</span>);
</code></pre>
<p><code>Readonly&lt;T&gt;</code>&#xC640; <code>Partial&lt;T&gt;</code>&#xAC00; &#xC544;&#xC8FC; &#xC720;&#xC6A9;&#xD558;&#xB2E4;&#xB294; &#xAC83;&#xC744; &#xC8FC;&#xBAA9;&#xD558;&#xC138;&#xC694;, &#xC774;&#xB4E4;&#xC740; <code>Pick</code>&#xACFC; <code>Record</code>&#xC640; &#xD568;&#xAED8; TypeScript&#xC758; &#xD45C;&#xC900; &#xB77C;&#xC774;&#xBE0C;&#xB7EC;&#xB9AC;&#xC5D0; &#xD3EC;&#xD568;&#xB418;&#xC5B4; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">Pick</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span>, <span class="cm-variable">K</span> <span class="cm-keyword">extends</span> <span class="cm-variable">keyof</span> <span class="cm-variable">T</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> {
    [<span class="cm-variable">P</span> <span class="cm-keyword">in</span> <span class="cm-variable">K</span>]: <span class="cm-variable">T</span>[<span class="cm-variable">P</span>];
}
<span class="cm-variable">type</span> <span class="cm-variable">Record</span><span class="cm-operator">&lt;</span><span class="cm-variable">K</span> <span class="cm-keyword">extends</span> <span class="cm-variable">keyof</span> <span class="cm-variable-3">any</span>, <span class="cm-variable">T</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> {
    [<span class="cm-variable">P</span> <span class="cm-keyword">in</span> <span class="cm-variable">K</span>]: <span class="cm-variable">T</span>;
}
</code></pre>
<p><code>Readonly</code>, <code>Partial</code> &#xADF8;&#xB9AC;&#xACE0; <code>Pick</code>&#xC740; &#xB3D9;&#xD615;&#xC774;&#xC9C0;&#xB9CC; <code>Record</code>&#xB294; &#xC544;&#xB2D9;&#xB2C8;&#xB2E4;.
<code>Record</code>&#xAC00; &#xB3D9;&#xD615;&#xC774; &#xC544;&#xB2C8;&#xB77C;&#xB294; &#xB2E8;&#xC11C; &#xC911; &#xD558;&#xB098;&#xB294; &#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xB97C; &#xBCF5;&#xC0AC;&#xD558;&#xB294; &#xC785;&#xB825; &#xD0C0;&#xC785;&#xC744; &#xBC1B;&#xC9C0; &#xC54A;&#xB294; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">ThreeStringProps</span> <span class="cm-operator">=</span> <span class="cm-variable">Record</span><span class="cm-operator">&lt;</span><span class="cm-string">&apos;prop1&apos;</span> <span class="cm-operator">|</span> <span class="cm-string">&apos;prop2&apos;</span> <span class="cm-operator">|</span> <span class="cm-string">&apos;prop3&apos;</span>, <span class="cm-variable-3">string</span><span class="cm-operator">&gt;</span>
</code></pre>
<p>&#xBE44;-&#xB3D9;&#xD615; &#xD0C0;&#xC785;&#xC740; &#xBCF8;&#xC9C8;&#xC801;&#xC73C;&#xB85C; &#xC0C8;&#xB85C;&#xC6B4; &#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xB97C; &#xB9CC;&#xB4ED;&#xB2C8;&#xB2E4;, &#xADF8;&#xB798;&#xC11C; &#xC5B4;&#xB514;&#xC11C;&#xB4E0;&#xC9C0; &#xD504;&#xB85C;&#xD37C;&#xD2F0; &#xC9C0;&#xC815;&#xC790;&#xB97C; &#xBCF5;&#xC0AC;&#xD560; &#xC218; &#xC5C6;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<h2 id="&#xB9E4;&#xD551;-&#xD0C0;&#xC785;&#xC758;-&#xCD94;&#xB860;-inference-from-mapped-types">&#xB9E4;&#xD551; &#xD0C0;&#xC785;&#xC758; &#xCD94;&#xB860; (Inference from mapped types)</h2>
<p>&#xD0C0;&#xC785;&#xC758; &#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xB97C; &#xC5B4;&#xB5BB;&#xAC8C; &#xB798;&#xD551; &#xD558;&#xB294;&#xC9C0; &#xC54C;&#xAC8C; &#xB418;&#xC5C8;&#xC73C;&#xB2C8;, &#xB2E4;&#xC74C;&#xC5D0; &#xD558;&#xACE0; &#xC2F6;&#xC740; &#xAC83;&#xC740; &#xC5B4;&#xB5BB;&#xAC8C; &#xC5B8;&#xB798;&#xD551;(unwrap) &#xD560;&#xC9C0;&#xC785;&#xB2C8;&#xB2E4;.
&#xB2E4;&#xD589;&#xD788;, &#xAF64; &#xC27D;&#xC2B5;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-keyword">function</span> <span class="cm-variable">unproxify</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span>(<span class="cm-variable">t</span>: <span class="cm-variable">Proxify</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span>): <span class="cm-variable">T</span> {
    <span class="cm-keyword">let</span> <span class="cm-variable">result</span> <span class="cm-operator">=</span> {} <span class="cm-variable">as</span> <span class="cm-variable">T</span>;
    <span class="cm-keyword">for</span> (<span class="cm-keyword">const</span> <span class="cm-variable">k</span> <span class="cm-keyword">in</span> <span class="cm-variable">t</span>) {
        <span class="cm-variable">result</span>[<span class="cm-variable">k</span>] <span class="cm-operator">=</span> <span class="cm-variable">t</span>[<span class="cm-variable">k</span>].<span class="cm-property">get</span>();
    }
    <span class="cm-keyword">return</span> <span class="cm-variable">result</span>;
}

<span class="cm-keyword">let</span> <span class="cm-variable">originalProps</span> <span class="cm-operator">=</span> <span class="cm-variable">unproxify</span>(<span class="cm-variable">proxyProps</span>);
</code></pre>
<p>&#xC774; &#xC5B8;&#xB798;&#xD551; &#xCD94;&#xB860;&#xC740; &#xB3D9;&#xD615; &#xB9E4;&#xD551;&#xB41C; &#xD0C0;&#xC785;&#xC5D0;&#xB9CC; &#xB3D9;&#xC791;&#xD569;&#xB2C8;&#xB2E4;.
&#xB9CC;&#xC57D; &#xB9E4;&#xD551; &#xD0C0;&#xC785;&#xC774; &#xB3D9;&#xD615;&#xC774; &#xC544;&#xB2C8;&#xBA74; &#xC5B8;&#xB798;&#xD551; &#xD568;&#xC218;&#xC5D0; &#xBA85;&#xC2DC;&#xC801;&#xC778; &#xD0C0;&#xC785; &#xB9E4;&#xAC1C;&#xBCC0;&#xC218;&#xB97C; &#xC8FC;&#xC5B4;&#xC57C; &#xD560; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;.</p>
<h1 id="&#xC870;&#xAC74;&#xBD80;-&#xD0C0;&#xC785;-conditional-types">&#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785; (Conditional Types)</h1>
<p>TypeScript 2.8&#xC5D0;&#xC11C; &#xBE44;-&#xADE0;&#xB4F1; &#xD0C0;&#xC785; &#xB9E4;&#xD551;&#xC744; &#xD45C;&#xD604;&#xD558;&#xB294; &#xAE30;&#xB2A5;&#xC744; &#xCD94;&#xAC00;&#xD558;&#xB294; <em>&#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785;</em>&#xC744; &#xB3C4;&#xC785;&#xD588;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785;&#xC740; &#xD0C0;&#xC785; &#xAD00;&#xACC4; &#xAC80;&#xC0AC;&#xB85C; &#xD45C;&#xD604;&#xB41C; &#xC870;&#xAC74;&#xC5D0; &#xB530;&#xB77C; &#xB450; &#xAC00;&#xC9C0; &#xAC00;&#xB2A5;&#xD55C; &#xD0C0;&#xC785; &#xC911; &#xD558;&#xB098;&#xB97C; &#xC120;&#xD0DD;&#xD569;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-variable">T</span> <span class="cm-keyword">extends</span> <span class="cm-variable">U</span> <span class="cm-operator">?</span> <span class="cm-variable">X</span> : <span class="cm-variable">Y</span>
</code></pre>
<p>&#xC704;&#xC758; &#xD0C0;&#xC785;&#xC740; <code>T</code>&#xAC00; <code>U</code>&#xC5D0; &#xD560;&#xB2F9;&#xB420; &#xC218; &#xC788;&#xC73C;&#xBA74; &#xD0C0;&#xC785;&#xC740; <code>X</code>&#xAC00; &#xB418;&#xACE0; &#xADF8;&#xB807;&#xC9C0; &#xC54A;&#xB2E4;&#xBA74; &#xD0C0;&#xC785;&#xC774; <code>Y</code>&#xAC00; &#xB41C;&#xB2E4;&#xB294; &#xAC83;&#xC744; &#xB73B;&#xD569;&#xB2C8;&#xB2E4;.</p>
<p>&#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785; <code>T extends U ? X : Y</code>&#xB294; <code>X</code> &#xB098; <code>Y</code>&#xB85C; <em>&#xACB0;&#xC815;</em>&#xB418;&#xAC70;&#xB098;, <em>&#xC9C0;&#xC5F0;</em>&#xB429;&#xB2C8;&#xB2E4;, &#xC65C;&#xB0D0;&#xD558;&#xBA74; &#xC870;&#xAC74;&#xC774; &#xD558;&#xB098; &#xD639;&#xC740; &#xADF8; &#xC774;&#xC0C1;&#xC758; &#xD0C0;&#xC785; &#xBCC0;&#xC218;&#xC5D0; &#xC758;&#xC874;&#xD558;&#xAE30; &#xB54C;&#xBB38;&#xC785;&#xB2C8;&#xB2E4;.
<code>T</code>&#xB098; <code>U</code>&#xAC00; &#xD0C0;&#xC785; &#xBCC0;&#xC218;&#xB97C; &#xD3EC;&#xD568;&#xD560; &#xB54C;, <code>X</code> &#xB610;&#xB294; <code>Y</code>&#xB85C; &#xACB0;&#xC815;&#xB418;&#xAC70;&#xB098; &#xC9C0;&#xC5F0;&#xB420;&#xC9C0;, &#xD0C0;&#xC785; &#xC2DC;&#xC2A4;&#xD15C;&#xC774; <code>T</code>&#xAC00; &#xD56D;&#xC0C1; <code>U</code>&#xC5D0; &#xD560;&#xB2F9;&#xD560; &#xC218; &#xC788;&#xB294;&#xC9C0;&#xC5D0; &#xB300;&#xD574; &#xCDA9;&#xBD84;&#xD55C; &#xC815;&#xBCF4;&#xB97C; &#xAC00;&#xC9C0;&#xACE0; &#xC788;&#xB294;&#xC9C0; &#xC5EC;&#xBD80;&#xB85C; &#xACB0;&#xC815;&#xB429;&#xB2C8;&#xB2E4;.</p>
<p>&#xC989;&#xC2DC; &#xACB0;&#xC815;&#xB418;&#xB294; &#xC77C;&#xBD80; &#xD0C0;&#xC785;&#xC758; &#xC608;&#xC81C;&#xB85C;, &#xB2E4;&#xC74C; &#xC608;&#xC81C;&#xB97C; &#xC0B4;&#xD3B4;&#xBCF4;&#xACA0;&#xC2B5;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-variable">declare</span> <span class="cm-keyword">function</span> <span class="cm-variable">f</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span> <span class="cm-keyword">extends</span> <span class="cm-variable">boolean</span><span class="cm-operator">&gt;</span>(<span class="cm-variable">x</span>: <span class="cm-variable">T</span>): <span class="cm-variable">T</span> <span class="cm-keyword">extends</span> <span class="cm-atom">true</span> <span class="cm-operator">?</span> <span class="cm-variable-3">string</span> : <span class="cm-variable-3">number</span>;

<span class="cm-comment">// &#xD0C0;&#xC785;&#xC740; &apos;string | number&apos;</span>
<span class="cm-keyword">let</span> <span class="cm-variable">x</span> <span class="cm-operator">=</span> <span class="cm-variable">f</span>(<span class="cm-variable">Math</span>.<span class="cm-property">random</span>() <span class="cm-operator">&lt;</span> <span class="cm-number">0.5</span>)
</code></pre>
<p>&#xB610; &#xB2E4;&#xB978; &#xC608;&#xC81C;&#xB294; &#xC911;&#xCCA9; &#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785;&#xC744; &#xC0AC;&#xC6A9;&#xD558;&#xB294; <code>TypeName</code> &#xD0C0;&#xC785; &#xBCC4;&#xCE6D;&#xC785;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">TypeName</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span>
    <span class="cm-variable">T</span> <span class="cm-keyword">extends</span> <span class="cm-variable-3">string</span> <span class="cm-operator">?</span> <span class="cm-string">&quot;string&quot;</span> :
    <span class="cm-variable">T</span> <span class="cm-keyword">extends</span> <span class="cm-variable-3">number</span> <span class="cm-operator">?</span> <span class="cm-string">&quot;number&quot;</span> :
    <span class="cm-variable">T</span> <span class="cm-keyword">extends</span> <span class="cm-variable">boolean</span> <span class="cm-operator">?</span> <span class="cm-string">&quot;boolean&quot;</span> :
    <span class="cm-variable">T</span> <span class="cm-keyword">extends</span> <span class="cm-atom">undefined</span> <span class="cm-operator">?</span> <span class="cm-string">&quot;undefined&quot;</span> :
    <span class="cm-variable">T</span> <span class="cm-keyword">extends</span> <span class="cm-variable">Function</span> <span class="cm-operator">?</span> <span class="cm-string">&quot;function&quot;</span> :
    <span class="cm-string">&quot;object&quot;</span>;

<span class="cm-variable">type</span> <span class="cm-variable">T0</span> <span class="cm-operator">=</span> <span class="cm-variable">TypeName</span><span class="cm-operator">&lt;</span><span class="cm-variable-3">string</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// &quot;string&quot;</span>
<span class="cm-variable">type</span> <span class="cm-variable">T1</span> <span class="cm-operator">=</span> <span class="cm-variable">TypeName</span><span class="cm-operator">&lt;</span><span class="cm-string">&quot;a&quot;</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// &quot;string&quot;</span>
<span class="cm-variable">type</span> <span class="cm-variable">T2</span> <span class="cm-operator">=</span> <span class="cm-variable">TypeName</span><span class="cm-operator">&lt;</span><span class="cm-atom">true</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// &quot;boolean&quot;</span>
<span class="cm-variable">type</span> <span class="cm-variable">T3</span> <span class="cm-operator">=</span> <span class="cm-variable">TypeName</span><span class="cm-operator">&lt;</span>() <span class="cm-operator">=&gt;</span> <span class="cm-variable">void</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// &quot;function&quot;</span>
<span class="cm-variable">type</span> <span class="cm-variable">T4</span> <span class="cm-operator">=</span> <span class="cm-variable">TypeName</span><span class="cm-operator">&lt;</span><span class="cm-variable-3">string</span>[]<span class="cm-operator">&gt;</span>;  <span class="cm-comment">// &quot;object&quot;</span>
</code></pre>
<p>&#xD558;&#xC9C0;&#xB9CC; &#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785;&#xC774; &#xC9C0;&#xC5F0;&#xB418;&#xB294; &#xC9C0;&#xC810; - &#xBD84;&#xAE30;&#xB97C; &#xC120;&#xD0DD;&#xD558;&#xAE30;&#xBCF4;&#xB2E8; &#xACE0;&#xC815;&#xB418;&#xB294; - &#xC758; &#xC608;&#xB97C; &#xB4E4;&#xBA74; &#xB2E4;&#xC74C;&#xACFC; &#xAC19;&#xC2B5;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-keyword">interface</span> <span class="cm-variable">Foo</span> {
    <span class="cm-variable">propA</span>: <span class="cm-variable">boolean</span>;
    <span class="cm-variable">propB</span>: <span class="cm-variable">boolean</span>;
}

<span class="cm-variable">declare</span> <span class="cm-keyword">function</span> <span class="cm-variable">f</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span>(<span class="cm-variable">x</span>: <span class="cm-variable">T</span>): <span class="cm-variable">T</span> <span class="cm-keyword">extends</span> <span class="cm-variable">Foo</span> <span class="cm-operator">?</span> <span class="cm-variable-3">string</span> : <span class="cm-variable-3">number</span>;

<span class="cm-keyword">function</span> <span class="cm-variable">foo</span><span class="cm-operator">&lt;</span><span class="cm-variable">U</span><span class="cm-operator">&gt;</span>(<span class="cm-variable">x</span>: <span class="cm-variable">U</span>) {
    <span class="cm-comment">// &apos;U extends Foo ? string : number&apos; &#xD0C0;&#xC785;&#xC744; &#xAC00;&#xC9C0;&#xACE0; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;</span>
    <span class="cm-keyword">let</span> <span class="cm-variable">a</span> <span class="cm-operator">=</span> <span class="cm-variable">f</span>(<span class="cm-variable">x</span>);

    <span class="cm-comment">// &#xC774; &#xD560;&#xB2F9;&#xC740; &#xD5C8;&#xC6A9;&#xB429;&#xB2C8;&#xB2E4;!</span>
    <span class="cm-keyword">let</span> <span class="cm-variable">b</span>: <span class="cm-variable-3">string</span> <span class="cm-operator">|</span> <span class="cm-variable-3">number</span> <span class="cm-operator">=</span> <span class="cm-variable">a</span>;
}
</code></pre>
<p>&#xC704;&#xC5D0;&#xC11C;, &#xBCC0;&#xC218; <code>a</code>&#xB294; &#xC544;&#xC9C1; &#xBD84;&#xAE30;&#xB97C; &#xC120;&#xD0DD;&#xD558;&#xC9C0; &#xBABB;&#xD55C; &#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785;&#xC744; &#xAC00;&#xC9C0;&#xACE0; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xB610; &#xB2E4;&#xB978; &#xCF54;&#xB4DC;&#xAC00; <code>foo</code>&#xC758; &#xD638;&#xCD9C;&#xC744; &#xADF8;&#xB9CC;&#xB450;&#xBA74;, <code>U</code>&#xB97C; &#xB2E4;&#xB978; &#xD0C0;&#xC785;&#xC73C;&#xB85C; &#xB300;&#xCCB4;&#xD560; &#xAC83;&#xC774;&#xACE0;, TypeScript&#xAC00; &#xC2E4;&#xC81C;&#xB85C; &#xBD84;&#xAE30;&#xB97C; &#xC120;&#xD0DD;&#xD560; &#xC218; &#xC788;&#xB294;&#xC9C0; &#xACB0;&#xC815;&#xD558;&#xAE30; &#xC704;&#xD574; &#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785;&#xC744; &#xC7AC;-&#xD3C9;&#xAC00;&#xD560; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;.</p>
<p>&#xADF8;&#xB3D9;&#xC548;, &#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785;&#xC744; &#xC870;&#xAC74;&#xBD80;&#xC758; &#xAC01; &#xBD84;&#xAE30;&#xAC00; &#xB300;&#xC0C1;&#xC5D0; &#xD560;&#xB2F9; &#xAC00;&#xB2A5;&#xD55C; &#xD55C; &#xB2E4;&#xB978; &#xB300;&#xC0C1; &#xD0C0;&#xC785;&#xC73C;&#xB85C; &#xD560;&#xB2F9;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xADF8;&#xB798;&#xC11C; &#xC704; &#xC608;&#xC81C;&#xC5D0;&#xC11C; &#xC870;&#xAC74;&#xBD80;&#xAC00; &#xC5B4;&#xB5BB;&#xAC8C; &#xD3C9;&#xAC00;&#xB418;&#xB4E0;&#xC9C0;, <code>string</code>&#xD639;&#xC740; <code>number</code>&#xB85C; &#xC54C;&#xB824;&#xC838; &#xC788;&#xAE30; &#xB54C;&#xBB38;&#xC5D0;, &#xC870;&#xAC74;&#xC774; <code>U extends Foo ? string : numer</code>&#xB97C; <code>string | number</code>&#xB85C; &#xD560;&#xB2F9;&#xD560; &#xC218; &#xC788;&#xC5C8;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<h2 id="&#xBD84;&#xC0B0;-&#xC870;&#xAC74;&#xBD80;-&#xD0C0;&#xC785;-distributive-conditional-types">&#xBD84;&#xC0B0; &#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785; (Distributive conditional types)</h2>
<p>&#xAC80;&#xC0AC;&#xB41C; &#xD0C0;&#xC785;&#xC774; &#xBC97;&#xACA8;&#xC9C4; (naked) &#xD0C0;&#xC785; &#xB9E4;&#xAC1C;&#xBCC0;&#xC218;&#xC778; &#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785;&#xC744; <em>&#xBD84;&#xC0B0; &#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785;</em>&#xC774;&#xB77C;&#xACE0; &#xD569;&#xB2C8;&#xB2E4;.
&#xBD84;&#xC0B0; &#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785;&#xC740; &#xC778;&#xC2A4;&#xD134;&#xC2A4;&#xD654; &#xC911;&#xC5D0; &#xC790;&#xB3D9;&#xC73C;&#xB85C; &#xC720;&#xB2C8;&#xC5B8; &#xD0C0;&#xC785;&#xC73C;&#xB85C; &#xBD84;&#xC0B0;&#xB429;&#xB2C8;&#xB2E4;.
&#xC608;&#xB97C; &#xB4E4;&#xC5B4;, <code>T</code>&#xC5D0; &#xB300;&#xD55C; &#xD0C0;&#xC785; &#xC778;&#xC218; <code>A | B | C</code>&#xB97C; &#xC0AC;&#xC6A9;&#xD558;&#xC5EC; <code>T extends U ? X : Y</code>&#xB97C; &#xC778;&#xC2A4;&#xD134;&#xC2A4;&#xD654;&#xD558;&#xBA74; <code>(A extends U ? X : Y) | (B extends U ? X : Y) | (C extends U ? X : Y)</code>&#xB85C; &#xACB0;&#xC815;&#xB429;&#xB2C8;&#xB2E4;.</p>
<h3 id="&#xC608;&#xC81C;">&#xC608;&#xC81C;</h3>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">T10</span> <span class="cm-operator">=</span> <span class="cm-variable">TypeName</span><span class="cm-operator">&lt;</span><span class="cm-variable-3">string</span> <span class="cm-operator">|</span> (() <span class="cm-operator">=&gt;</span> <span class="cm-variable">void</span>)<span class="cm-operator">&gt;</span>;  <span class="cm-comment">// &quot;string&quot; | &quot;function&quot;</span>
<span class="cm-variable">type</span> <span class="cm-variable">T12</span> <span class="cm-operator">=</span> <span class="cm-variable">TypeName</span><span class="cm-operator">&lt;</span><span class="cm-variable-3">string</span> <span class="cm-operator">|</span> <span class="cm-variable-3">string</span>[] <span class="cm-operator">|</span> <span class="cm-atom">undefined</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// &quot;string&quot; | &quot;object&quot; | &quot;undefined&quot;</span>
<span class="cm-variable">type</span> <span class="cm-variable">T11</span> <span class="cm-operator">=</span> <span class="cm-variable">TypeName</span><span class="cm-operator">&lt;</span><span class="cm-variable-3">string</span>[] <span class="cm-operator">|</span> <span class="cm-variable-3">number</span>[]<span class="cm-operator">&gt;</span>;  <span class="cm-comment">// &quot;object&quot;</span>
</code></pre>
<p>&#xBD84;&#xC0B0; &#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785; <code>T extends U ? X : Y</code>&#xC758; &#xC778;&#xC2A4;&#xD134;&#xC2A4;&#xD654;&#xC5D0;&#xC11C;,
&#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785; &#xB0B4;&#xC758; <code>T</code>&#xC5D0; &#xB300;&#xD55C; &#xCC38;&#xC870;&#xB294; &#xC720;&#xB2C8;&#xC5B8; &#xD0C0;&#xC785;&#xC758; &#xAC1C;&#xBCC4; &#xC131;&#xBD84;&#xC73C;&#xB85C; &#xACB0;&#xC815;&#xB429;&#xB2C8;&#xB2E4; (&#xC989; <code>T</code>&#xAC00; &#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785;&#xC774; &#xC720;&#xB2C8;&#xC5B8; &#xD0C0;&#xC785;&#xC73C;&#xB85C; &#xBD84;&#xC0B0;&#xB41C; <em>&#xD6C4;&#xC5D0;</em> &#xAC1C;&#xBCC4; &#xC131;&#xBD84;&#xC744; &#xCC38;&#xC870;&#xD569;&#xB2C8;&#xB2E4;).
&#xAC8C;&#xB2E4;&#xAC00;, <code>X</code> &#xC548;&#xC758; <code>T</code>&#xC5D0; &#xB300;&#xD55C; &#xCC38;&#xC870;&#xC5D0;&#xB294; &#xCD94;&#xAC00;&#xC801;&#xC778; &#xD0C0;&#xC785; &#xB9E4;&#xAC1C;&#xBCC0;&#xC218; &#xC81C;&#xC57D; &#xC870;&#xAC74; (constraint) <code>U</code>&#xAC00; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4; (&#xC989; <code>T</code>&#xB294; <code>X</code> &#xC548;&#xC5D0;&#xC11C; <code>U</code>&#xC5D0; &#xD560;&#xB2F9; &#xAC00;&#xB2A5;&#xD558;&#xB2E4;&#xACE0; &#xAC04;&#xC8FC;&#xB429;&#xB2C8;&#xB2E4;).</p>
<h3 id="&#xC608;&#xC81C;">&#xC608;&#xC81C;</h3>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">BoxedValue</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> { <span class="cm-property">value</span>: <span class="cm-variable">T</span> };
<span class="cm-variable">type</span> <span class="cm-variable">BoxedArray</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> { <span class="cm-property">array</span>: <span class="cm-variable">T</span>[] };
<span class="cm-variable">type</span> <span class="cm-variable">Boxed</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> <span class="cm-variable">T</span> <span class="cm-keyword">extends</span> <span class="cm-variable-3">any</span>[] <span class="cm-operator">?</span> <span class="cm-variable">BoxedArray</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span>[<span class="cm-variable-3">number</span>]<span class="cm-operator">&gt;</span> : <span class="cm-variable">BoxedValue</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span>;

<span class="cm-variable">type</span> <span class="cm-variable">T20</span> <span class="cm-operator">=</span> <span class="cm-variable">Boxed</span><span class="cm-operator">&lt;</span><span class="cm-variable-3">string</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// BoxedValue&lt;string&gt;;</span>
<span class="cm-variable">type</span> <span class="cm-variable">T21</span> <span class="cm-operator">=</span> <span class="cm-variable">Boxed</span><span class="cm-operator">&lt;</span><span class="cm-variable-3">number</span>[]<span class="cm-operator">&gt;</span>;  <span class="cm-comment">// BoxedArray&lt;number&gt;;</span>
<span class="cm-variable">type</span> <span class="cm-variable">T22</span> <span class="cm-operator">=</span> <span class="cm-variable">Boxed</span><span class="cm-operator">&lt;</span><span class="cm-variable-3">string</span> <span class="cm-operator">|</span> <span class="cm-variable-3">number</span>[]<span class="cm-operator">&gt;</span>;  <span class="cm-comment">// BoxedValue&lt;string&gt; | BoxedArray&lt;number&gt;;</span>
</code></pre>
<p><code>T</code>&#xAC00; &#xC2E4;&#xC81C; <code>Boxed&lt;T&gt;</code>&#xC758; &#xBD84;&#xAE30; &#xC548;&#xC5D0;&#xC11C; &#xCD94;&#xAC00; &#xC81C;&#xC57D;&#xC870;&#xAC74; <code>any[]</code>&#xC744; &#xAC00;&#xC9C0;&#xACE0; &#xC788;&#xACE0; <code>T[number]</code>&#xB85C; &#xBC30;&#xC5F4;&#xC758; &#xC694;&#xC18C; &#xD0C0;&#xC785;&#xC744; &#xCC38;&#xC870;&#xD560; &#xC218; &#xC788;&#xC74C;&#xC744; &#xC720;&#xC758;&#xD558;&#xC138;&#xC694;. &#xB610;&#xD55C; &#xC9C0;&#xB09C; &#xC608;&#xC81C;&#xC5D0;&#xC11C; &#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785;&#xC774; &#xC5B4;&#xB5BB;&#xAC8C; &#xC720;&#xB2C8;&#xC5B8; &#xD0C0;&#xC785;&#xC73C;&#xB85C; &#xBD84;&#xC0B0;&#xB418;&#xC5C8;&#xB294;&#xC9C0; &#xD655;&#xC778;&#xD558;&#xC138;&#xC694;.</p>
<p>&#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785;&#xC758; &#xBD84;&#xC0B0; &#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xB294; &#xC720;&#xB2C8;&#xC5B8; &#xD0C0;&#xC785;&#xC744; <em>&#xD544;&#xD130;&#xB9C1;</em>&#xD558;&#xB294;&#xB370; &#xD3B8;&#xD558;&#xAC8C; &#xC0AC;&#xC6A9;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">Diff</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span>, <span class="cm-variable">U</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> <span class="cm-variable">T</span> <span class="cm-keyword">extends</span> <span class="cm-variable">U</span> <span class="cm-operator">?</span> <span class="cm-variable">never</span> : <span class="cm-variable">T</span>;  <span class="cm-comment">// U&#xC5D0; &#xD560;&#xB2F9;&#xD560; &#xC218; &#xC788;&#xB294; &#xD0C0;&#xC785;&#xC744; T&#xC5D0;&#xC11C; &#xC81C;&#xAC70;</span>
<span class="cm-variable">type</span> <span class="cm-variable">Filter</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span>, <span class="cm-variable">U</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> <span class="cm-variable">T</span> <span class="cm-keyword">extends</span> <span class="cm-variable">U</span> <span class="cm-operator">?</span> <span class="cm-variable">T</span> : <span class="cm-variable">never</span>;  <span class="cm-comment">// U&#xC5D0; &#xD560;&#xB2F9;&#xD560; &#xC218; &#xC5C6;&#xB294; &#xD0C0;&#xC785;&#xC744; T&#xC5D0;&#xC11C; &#xC81C;&#xAC70;</span>

<span class="cm-variable">type</span> <span class="cm-variable">T30</span> <span class="cm-operator">=</span> <span class="cm-variable">Diff</span><span class="cm-operator">&lt;</span><span class="cm-string">&quot;a&quot;</span> <span class="cm-operator">|</span> <span class="cm-string">&quot;b&quot;</span> <span class="cm-operator">|</span> <span class="cm-string">&quot;c&quot;</span> <span class="cm-operator">|</span> <span class="cm-string">&quot;d&quot;</span>, <span class="cm-string">&quot;a&quot;</span> <span class="cm-operator">|</span> <span class="cm-string">&quot;c&quot;</span> <span class="cm-operator">|</span> <span class="cm-string">&quot;f&quot;</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// &quot;b&quot; | &quot;d&quot;</span>
<span class="cm-variable">type</span> <span class="cm-variable">T31</span> <span class="cm-operator">=</span> <span class="cm-variable">Filter</span><span class="cm-operator">&lt;</span><span class="cm-string">&quot;a&quot;</span> <span class="cm-operator">|</span> <span class="cm-string">&quot;b&quot;</span> <span class="cm-operator">|</span> <span class="cm-string">&quot;c&quot;</span> <span class="cm-operator">|</span> <span class="cm-string">&quot;d&quot;</span>, <span class="cm-string">&quot;a&quot;</span> <span class="cm-operator">|</span> <span class="cm-string">&quot;c&quot;</span> <span class="cm-operator">|</span> <span class="cm-string">&quot;f&quot;</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// &quot;a&quot; | &quot;c&quot;</span>
<span class="cm-variable">type</span> <span class="cm-variable">T32</span> <span class="cm-operator">=</span> <span class="cm-variable">Diff</span><span class="cm-operator">&lt;</span><span class="cm-variable-3">string</span> <span class="cm-operator">|</span> <span class="cm-variable-3">number</span> <span class="cm-operator">|</span> (() <span class="cm-operator">=&gt;</span> <span class="cm-variable">void</span>), <span class="cm-variable">Function</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// string | number</span>
<span class="cm-variable">type</span> <span class="cm-variable">T33</span> <span class="cm-operator">=</span> <span class="cm-variable">Filter</span><span class="cm-operator">&lt;</span><span class="cm-variable-3">string</span> <span class="cm-operator">|</span> <span class="cm-variable-3">number</span> <span class="cm-operator">|</span> (() <span class="cm-operator">=&gt;</span> <span class="cm-variable">void</span>), <span class="cm-variable">Function</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// () =&gt; void</span>

<span class="cm-variable">type</span> <span class="cm-variable">NonNullable</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> <span class="cm-variable">Diff</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span>, <span class="cm-atom">null</span> <span class="cm-operator">|</span> <span class="cm-atom">undefined</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// T&#xC5D0;&#xC11C; null&#xACFC; undefined&#xB97C; &#xC81C;&#xAC70;</span>

<span class="cm-variable">type</span> <span class="cm-variable">T34</span> <span class="cm-operator">=</span> <span class="cm-variable">NonNullable</span><span class="cm-operator">&lt;</span><span class="cm-variable-3">string</span> <span class="cm-operator">|</span> <span class="cm-variable-3">number</span> <span class="cm-operator">|</span> <span class="cm-atom">undefined</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// string | number</span>
<span class="cm-variable">type</span> <span class="cm-variable">T35</span> <span class="cm-operator">=</span> <span class="cm-variable">NonNullable</span><span class="cm-operator">&lt;</span><span class="cm-variable-3">string</span> <span class="cm-operator">|</span> <span class="cm-variable-3">string</span>[] <span class="cm-operator">|</span> <span class="cm-atom">null</span> <span class="cm-operator">|</span> <span class="cm-atom">undefined</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// string | string[]</span>

<span class="cm-keyword">function</span> <span class="cm-variable">f1</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span>(<span class="cm-variable">x</span>: <span class="cm-variable">T</span>, <span class="cm-variable">y</span>: <span class="cm-variable">NonNullable</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span>) {
    <span class="cm-variable">x</span> <span class="cm-operator">=</span> <span class="cm-variable">y</span>;  <span class="cm-comment">// &#xC131;&#xACF5;</span>
    <span class="cm-variable">y</span> <span class="cm-operator">=</span> <span class="cm-variable">x</span>;  <span class="cm-comment">// &#xC624;&#xB958;</span>
}

<span class="cm-keyword">function</span> <span class="cm-variable">f2</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span> <span class="cm-keyword">extends</span> <span class="cm-variable-3">string</span> <span class="cm-operator">|</span> <span class="cm-atom">undefined</span><span class="cm-operator">&gt;</span>(<span class="cm-variable">x</span>: <span class="cm-variable">T</span>, <span class="cm-variable">y</span>: <span class="cm-variable">NonNullable</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span>) {
    <span class="cm-variable">x</span> <span class="cm-operator">=</span> <span class="cm-variable">y</span>;  <span class="cm-comment">// &#xC131;&#xACF5;</span>
    <span class="cm-variable">y</span> <span class="cm-operator">=</span> <span class="cm-variable">x</span>;  <span class="cm-comment">// &#xC624;&#xB958;</span>
    <span class="cm-keyword">let</span> <span class="cm-variable">s1</span>: <span class="cm-variable-3">string</span> <span class="cm-operator">=</span> <span class="cm-variable">x</span>;  <span class="cm-comment">// &#xC624;&#xB958;</span>
    <span class="cm-keyword">let</span> <span class="cm-variable">s2</span>: <span class="cm-variable-3">string</span> <span class="cm-operator">=</span> <span class="cm-variable">y</span>;  <span class="cm-comment">// &#xC131;&#xACF5;</span>
}
</code></pre>
<p>&#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785;&#xC740; &#xD2B9;&#xD788; &#xB9E4;&#xD551; &#xD0C0;&#xC785;&#xACFC; &#xACB0;&#xD569;&#xD560; &#xB54C; &#xC720;&#xC6A9;&#xD569;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">FunctionPropertyNames</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> { [<span class="cm-variable">K</span> <span class="cm-keyword">in</span> <span class="cm-variable">keyof</span> <span class="cm-variable">T</span>]: <span class="cm-variable">T</span>[<span class="cm-variable">K</span>] <span class="cm-keyword">extends</span> <span class="cm-variable">Function</span> <span class="cm-operator">?</span> <span class="cm-variable">K</span> : <span class="cm-variable">never</span> }[<span class="cm-variable">keyof</span> <span class="cm-variable">T</span>];
<span class="cm-variable">type</span> <span class="cm-variable">FunctionProperties</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> <span class="cm-variable">Pick</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span>, <span class="cm-variable">FunctionPropertyNames</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;&gt;</span>;

<span class="cm-variable">type</span> <span class="cm-variable">NonFunctionPropertyNames</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> { [<span class="cm-variable">K</span> <span class="cm-keyword">in</span> <span class="cm-variable">keyof</span> <span class="cm-variable">T</span>]: <span class="cm-variable">T</span>[<span class="cm-variable">K</span>] <span class="cm-keyword">extends</span> <span class="cm-variable">Function</span> <span class="cm-operator">?</span> <span class="cm-variable">never</span> : <span class="cm-variable">K</span> }[<span class="cm-variable">keyof</span> <span class="cm-variable">T</span>];
<span class="cm-variable">type</span> <span class="cm-variable">NonFunctionProperties</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> <span class="cm-variable">Pick</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span>, <span class="cm-variable">NonFunctionPropertyNames</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;&gt;</span>;

<span class="cm-keyword">interface</span> <span class="cm-variable">Part</span> {
    <span class="cm-variable">id</span>: <span class="cm-variable-3">number</span>;
    <span class="cm-variable">name</span>: <span class="cm-variable-3">string</span>;
    <span class="cm-variable">subparts</span>: <span class="cm-variable">Part</span>[];
    <span class="cm-variable">updatePart</span>(<span class="cm-variable">newName</span>: <span class="cm-variable-3">string</span>): <span class="cm-variable">void</span>;
}

<span class="cm-variable">type</span> <span class="cm-variable">T40</span> <span class="cm-operator">=</span> <span class="cm-variable">FunctionPropertyNames</span><span class="cm-operator">&lt;</span><span class="cm-variable">Part</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// &quot;updatePart&quot;</span>
<span class="cm-variable">type</span> <span class="cm-variable">T41</span> <span class="cm-operator">=</span> <span class="cm-variable">NonFunctionPropertyNames</span><span class="cm-operator">&lt;</span><span class="cm-variable">Part</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// &quot;id&quot; | &quot;name&quot; | &quot;subparts&quot;</span>
<span class="cm-variable">type</span> <span class="cm-variable">T42</span> <span class="cm-operator">=</span> <span class="cm-variable">FunctionProperties</span><span class="cm-operator">&lt;</span><span class="cm-variable">Part</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// { updatePart(newName: string): void }</span>
<span class="cm-variable">type</span> <span class="cm-variable">T43</span> <span class="cm-operator">=</span> <span class="cm-variable">NonFunctionProperties</span><span class="cm-operator">&lt;</span><span class="cm-variable">Part</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// { id: number, name: string, subparts: Part[] }</span>
</code></pre>
<p>&#xC720;&#xB2C8;&#xC5B8;&#xACFC; &#xAD50;&#xCC28; &#xD0C0;&#xC785;&#xACFC; &#xC720;&#xC0AC;&#xD558;&#xAC8C;, &#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785;&#xC740; &#xC7AC;&#xADC0;&#xC801;&#xC73C;&#xB85C; &#xC790;&#xAE30; &#xC790;&#xC2E0;&#xC744; &#xCC38;&#xC870;&#xD560; &#xC218; &#xC5C6;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xC608;&#xB97C; &#xB4E4;&#xC5B4; &#xB2E4;&#xC74C;&#xC758; &#xC608;&#xC81C;&#xB294; &#xC624;&#xB958;&#xC785;&#xB2C8;&#xB2E4;.</p>
<h3 id="&#xC608;&#xC81C;">&#xC608;&#xC81C;</h3>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">ElementType</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> <span class="cm-variable">T</span> <span class="cm-keyword">extends</span> <span class="cm-variable-3">any</span>[] <span class="cm-operator">?</span> <span class="cm-variable">ElementType</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span>[<span class="cm-variable-3">number</span>]<span class="cm-operator">&gt;</span> : <span class="cm-variable">T</span>;  <span class="cm-comment">// &#xC624;&#xB958;</span>
</code></pre>
<h2 id="&#xC870;&#xAC74;&#xBD80;-&#xD0C0;&#xC785;&#xC758;-&#xD0C0;&#xC785;-&#xCD94;&#xB860;-type-inference-in-conditional-types">&#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785;&#xC758; &#xD0C0;&#xC785; &#xCD94;&#xB860; (Type inference in conditional types)</h2>
<p>&#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785;&#xC758; <code>extends</code> &#xC808; &#xC548;&#xC5D0;&#xC11C;, &#xC774;&#xC81C; &#xCD94;&#xB860; &#xB420; &#xD0C0;&#xC785; &#xBCC0;&#xC218;&#xB97C; &#xB3C4;&#xC785;&#xD558;&#xB294; <code>infer</code> &#xC120;&#xC5B8;&#xC744; &#xAC00;&#xC9C0;&#xB294; &#xAC83;&#xC774; &#xAC00;&#xB2A5;&#xD569;&#xB2C8;&#xB2E4;.
&#xC774;&#xB807;&#xAC8C; &#xCD94;&#xB860;&#xB41C; &#xD0C0;&#xC785; &#xBCC0;&#xC218;&#xB294; &#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785;&#xC758; &#xC2E4;&#xC81C; &#xBD84;&#xAE30;&#xC5D0;&#xC11C; &#xCC38;&#xC870;&#xB420; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xAC19;&#xC740; &#xD0C0;&#xC785; &#xBCC0;&#xC218;&#xC5D0; &#xB300;&#xD55C; &#xC5EC;&#xB7EC; &#xAC1C;&#xC758; <code>infer</code> &#xC704;&#xCE58;&#xB97C; &#xAC00;&#xC9C8; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<p>&#xC608;&#xB97C; &#xB4E4;&#xC5B4;, &#xB2E4;&#xC74C;&#xC740; &#xD568;&#xC218; &#xD0C0;&#xC785;&#xC758; &#xBC18;&#xD658; &#xD0C0;&#xC785;&#xC744; &#xCD94;&#xCD9C;&#xD569;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">ReturnType</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> <span class="cm-variable">T</span> <span class="cm-keyword">extends</span> (<span class="cm-meta">...</span><span class="cm-variable">args</span>: <span class="cm-variable-3">any</span>[]) <span class="cm-operator">=&gt;</span> <span class="cm-variable">infer</span> <span class="cm-variable">R</span> <span class="cm-operator">?</span> <span class="cm-variable">R</span> : <span class="cm-variable-3">any</span>;
</code></pre>
<p>&#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785;&#xC740; &#xC21C;&#xC11C;&#xB300;&#xB85C; &#xD3C9;&#xAC00;&#xB418;&#xB294; &#xC77C;&#xB828;&#xC758; &#xD328;&#xD134; &#xC77C;&#xCE58;&#xB97C; &#xD615;&#xC131;&#xD558;&#xAE30; &#xC704;&#xD574; &#xC911;&#xCCA9;&#xB420; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">Unpacked</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span>
    <span class="cm-variable">T</span> <span class="cm-keyword">extends</span> (<span class="cm-variable">infer</span> <span class="cm-variable">U</span>)[] <span class="cm-operator">?</span> <span class="cm-variable">U</span> :
    <span class="cm-variable">T</span> <span class="cm-keyword">extends</span> (<span class="cm-meta">...</span><span class="cm-variable">args</span>: <span class="cm-variable-3">any</span>[]) <span class="cm-operator">=&gt;</span> <span class="cm-variable">infer</span> <span class="cm-variable">U</span> <span class="cm-operator">?</span> <span class="cm-variable">U</span> :
    <span class="cm-variable">T</span> <span class="cm-keyword">extends</span> <span class="cm-variable">Promise</span><span class="cm-operator">&lt;</span><span class="cm-variable">infer</span> <span class="cm-variable">U</span><span class="cm-operator">&gt;</span> <span class="cm-operator">?</span> <span class="cm-variable">U</span> :
    <span class="cm-variable">T</span>;

<span class="cm-variable">type</span> <span class="cm-variable">T0</span> <span class="cm-operator">=</span> <span class="cm-variable">Unpacked</span><span class="cm-operator">&lt;</span><span class="cm-variable-3">string</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// string</span>
<span class="cm-variable">type</span> <span class="cm-variable">T1</span> <span class="cm-operator">=</span> <span class="cm-variable">Unpacked</span><span class="cm-operator">&lt;</span><span class="cm-variable-3">string</span>[]<span class="cm-operator">&gt;</span>;  <span class="cm-comment">// string</span>
<span class="cm-variable">type</span> <span class="cm-variable">T2</span> <span class="cm-operator">=</span> <span class="cm-variable">Unpacked</span><span class="cm-operator">&lt;</span>() <span class="cm-operator">=&gt;</span> <span class="cm-variable-3">string</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// string</span>
<span class="cm-variable">type</span> <span class="cm-variable">T3</span> <span class="cm-operator">=</span> <span class="cm-variable">Unpacked</span><span class="cm-operator">&lt;</span><span class="cm-variable">Promise</span><span class="cm-operator">&lt;</span><span class="cm-variable-3">string</span><span class="cm-operator">&gt;&gt;</span>;  <span class="cm-comment">// string</span>
<span class="cm-variable">type</span> <span class="cm-variable">T4</span> <span class="cm-operator">=</span> <span class="cm-variable">Unpacked</span><span class="cm-operator">&lt;</span><span class="cm-variable">Promise</span><span class="cm-operator">&lt;</span><span class="cm-variable-3">string</span><span class="cm-operator">&gt;</span>[]<span class="cm-operator">&gt;</span>;  <span class="cm-comment">// Promise&lt;string&gt;</span>
<span class="cm-variable">type</span> <span class="cm-variable">T5</span> <span class="cm-operator">=</span> <span class="cm-variable">Unpacked</span><span class="cm-operator">&lt;</span><span class="cm-variable">Unpacked</span><span class="cm-operator">&lt;</span><span class="cm-variable">Promise</span><span class="cm-operator">&lt;</span><span class="cm-variable-3">string</span><span class="cm-operator">&gt;</span>[]<span class="cm-operator">&gt;&gt;</span>;  <span class="cm-comment">// string</span>
</code></pre>
<p>&#xB2E4;&#xC74C; &#xC608;&#xC81C;&#xB294; &#xC5B4;&#xB5BB;&#xAC8C; &#xACF5;&#xBCC0; (co-variant) &#xC704;&#xCE58;&#xC5D0;&#xC11C; &#xAC19;&#xC740; &#xD0C0;&#xC785; &#xBCC0;&#xC218;&#xC5D0; &#xB300;&#xD55C; &#xC5EC;&#xB7EC; &#xD6C4;&#xBCF4;&#xAC00; &#xC720;&#xB2C8;&#xC5B8; &#xD0C0;&#xC785;&#xC744; &#xCD94;&#xB860;&#xD558;&#xB294;&#xC9C0; &#xBCF4;&#xC5EC;&#xC90D;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">Foo</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> <span class="cm-variable">T</span> <span class="cm-keyword">extends</span> { <span class="cm-variable">a</span>: <span class="cm-variable">infer</span> <span class="cm-variable">U</span>, <span class="cm-variable">b</span>: <span class="cm-variable">infer</span> <span class="cm-variable">U</span> } <span class="cm-operator">?</span> <span class="cm-variable">U</span> : <span class="cm-variable">never</span>;
<span class="cm-variable">type</span> <span class="cm-variable">T10</span> <span class="cm-operator">=</span> <span class="cm-variable">Foo</span><span class="cm-operator">&lt;</span>{ <span class="cm-property">a</span>: <span class="cm-variable-3">string</span>, <span class="cm-property">b</span>: <span class="cm-variable-3">string</span> }<span class="cm-operator">&gt;</span>;  <span class="cm-comment">// string</span>
<span class="cm-variable">type</span> <span class="cm-variable">T11</span> <span class="cm-operator">=</span> <span class="cm-variable">Foo</span><span class="cm-operator">&lt;</span>{ <span class="cm-property">a</span>: <span class="cm-variable-3">string</span>, <span class="cm-property">b</span>: <span class="cm-variable-3">number</span> }<span class="cm-operator">&gt;</span>;  <span class="cm-comment">// string | number</span>
</code></pre>
<p>&#xB9C8;&#xCC2C;&#xAC00;&#xC9C0;&#xB85C;, &#xBC18;-&#xBCC0;(contra-variant) &#xC704;&#xCE58;&#xC5D0;&#xC11C; &#xAC19;&#xC740; &#xD0C0;&#xC785; &#xBCC0;&#xC218;&#xC5D0; &#xB300;&#xD55C; &#xC5EC;&#xB7EC; &#xD6C4;&#xBCF4;&#xAC00; &#xAD50;&#xCC28; &#xD0C0;&#xC785;&#xC744; &#xCD94;&#xB860;&#xD569;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">Bar</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> <span class="cm-variable">T</span> <span class="cm-keyword">extends</span> { <span class="cm-variable">a</span>: (<span class="cm-def">x</span>: <span class="cm-variable">infer</span> <span class="cm-variable">U</span>) <span class="cm-operator">=&gt;</span> <span class="cm-variable">void</span>, <span class="cm-variable">b</span>: (<span class="cm-def">x</span>: <span class="cm-variable">infer</span> <span class="cm-variable">U</span>) <span class="cm-operator">=&gt;</span> <span class="cm-variable">void</span> } <span class="cm-operator">?</span> <span class="cm-variable">U</span> : <span class="cm-variable">never</span>;
<span class="cm-variable">type</span> <span class="cm-variable">T20</span> <span class="cm-operator">=</span> <span class="cm-variable">Bar</span><span class="cm-operator">&lt;</span>{ <span class="cm-property">a</span>: (<span class="cm-def">x</span>: <span class="cm-variable-3">string</span>) <span class="cm-operator">=&gt;</span> <span class="cm-variable">void</span>, <span class="cm-property">b</span>: (<span class="cm-def">x</span>: <span class="cm-variable-3">string</span>) <span class="cm-operator">=&gt;</span> <span class="cm-variable">void</span> }<span class="cm-operator">&gt;</span>;  <span class="cm-comment">// string</span>
<span class="cm-variable">type</span> <span class="cm-variable">T21</span> <span class="cm-operator">=</span> <span class="cm-variable">Bar</span><span class="cm-operator">&lt;</span>{ <span class="cm-property">a</span>: (<span class="cm-def">x</span>: <span class="cm-variable-3">string</span>) <span class="cm-operator">=&gt;</span> <span class="cm-variable">void</span>, <span class="cm-property">b</span>: (<span class="cm-def">x</span>: <span class="cm-variable-3">number</span>) <span class="cm-operator">=&gt;</span> <span class="cm-variable">void</span> }<span class="cm-operator">&gt;</span>;  <span class="cm-comment">// string &amp; number</span>
</code></pre>
<p>&#xC5EC;&#xB7EC; &#xD638;&#xCD9C; &#xC2DC;&#xADF8;&#xB2C8;&#xCC98;&#xAC00; &#xC788;&#xB294; &#xD0C0;&#xC785;&#xC5D0;&#xC11C; &#xCD94;&#xB860;&#xD560; &#xB54C; (&#xC624;&#xBC84;&#xB85C;&#xB529;&#xB41C; &#xD568;&#xC218;&#xC758; &#xD0C0;&#xC785;&#xACFC; &#xAC19;&#xC740;), &#xCD94;&#xB860;&#xC740; <em>&#xB9C8;&#xC9C0;&#xB9C9;</em> &#xC2DC;&#xADF8;&#xB2C8;&#xCC98;&#xC5D0;&#xC11C; &#xB9CC;&#xB4E4;&#xC5B4;&#xC9D1;&#xB2C8;&#xB2E4; (&#xC774;&#xB294; &#xC544;&#xB9C8;&#xB3C4; &#xAC00;&#xC7A5; &#xAD00;&#xB300;&#xD55C; &#xCF00;&#xC774;&#xC2A4; &#xC77C; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;).
&#xC778;&#xC218; &#xD0C0;&#xC785;&#xC758; &#xB9AC;&#xC2A4;&#xD2B8;&#xB97C; &#xAE30;&#xBC18;&#xC73C;&#xB85C; &#xC624;&#xBC84;&#xB85C;&#xB4DC; &#xD574;&#xACB0;&#xC744; &#xC218;&#xD589;&#xD560; &#xC218;&#xB294; &#xC5C6;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-variable">declare</span> <span class="cm-keyword">function</span> <span class="cm-variable">foo</span>(<span class="cm-def">x</span>: <span class="cm-variable-3">string</span>): <span class="cm-variable-3">number</span>;
<span class="cm-variable">declare</span> <span class="cm-keyword">function</span> <span class="cm-variable">foo</span>(<span class="cm-def">x</span>: <span class="cm-variable-3">number</span>): <span class="cm-variable-3">string</span>;
<span class="cm-variable">declare</span> <span class="cm-keyword">function</span> <span class="cm-variable">foo</span>(<span class="cm-def">x</span>: <span class="cm-variable-3">string</span> <span class="cm-operator">|</span> <span class="cm-variable-3">number</span>): <span class="cm-variable-3">string</span> <span class="cm-operator">|</span> <span class="cm-variable-3">number</span>;
<span class="cm-variable">type</span> <span class="cm-variable">T30</span> <span class="cm-operator">=</span> <span class="cm-variable">ReturnType</span><span class="cm-operator">&lt;</span><span class="cm-keyword">typeof</span> <span class="cm-variable">foo</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// string | number</span>
</code></pre>
<p>&#xC77C;&#xBC18; &#xD0C0;&#xC785; &#xB9E4;&#xAC1C;&#xBCC0;&#xC218;&#xC5D0; &#xB300;&#xD55C; &#xC81C;&#xC57D;&#xC870;&#xAC74; &#xC808;&#xC5D0;&#xC11C; <code>infer</code> &#xC120;&#xC5B8;&#xC744; &#xC0AC;&#xC6A9;&#xD560; &#xC218; &#xC5C6;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">ReturnType</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span> <span class="cm-keyword">extends</span> (<span class="cm-meta">...</span><span class="cm-variable">args</span>: <span class="cm-variable-3">any</span>[]) <span class="cm-operator">=&gt;</span> <span class="cm-variable">infer</span> <span class="cm-variable">R</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> <span class="cm-variable">R</span>;  <span class="cm-comment">// &#xC624;&#xB958;, &#xC9C0;&#xC6D0;&#xB418;&#xC9C0; &#xC54A;&#xC2B5;&#xB2C8;&#xB2E4;.</span>
</code></pre>
<p>&#xD558;&#xC9C0;&#xB9CC;, &#xC81C;&#xC57D;&#xC870;&#xAC74;&#xC5D0;&#xC11C; &#xD0C0;&#xC785; &#xBCC0;&#xC218;&#xB97C; &#xC9C0;&#xC6B0;&#xACE0; &#xB300;&#xC2E0;&#xC5D0; &#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785;&#xC744; &#xC9C0;&#xC815;&#xD558;&#xBA74; &#xAC70;&#xC758; &#xAC19;&#xC740; &#xD6A8;&#xACFC;&#xB97C; &#xC5BB;&#xC744; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">AnyFunction</span> <span class="cm-operator">=</span> (<span class="cm-meta">...</span><span class="cm-variable">args</span>: <span class="cm-variable-3">any</span>[]) <span class="cm-operator">=&gt;</span> <span class="cm-variable-3">any</span>;
<span class="cm-variable">type</span> <span class="cm-variable">ReturnType</span><span class="cm-operator">&lt;</span><span class="cm-variable">T</span> <span class="cm-keyword">extends</span> <span class="cm-variable">AnyFunction</span><span class="cm-operator">&gt;</span> <span class="cm-operator">=</span> <span class="cm-variable">T</span> <span class="cm-keyword">extends</span> (<span class="cm-meta">...</span><span class="cm-variable">args</span>: <span class="cm-variable-3">any</span>[]) <span class="cm-operator">=&gt;</span> <span class="cm-variable">infer</span> <span class="cm-variable">R</span> <span class="cm-operator">?</span> <span class="cm-variable">R</span> : <span class="cm-variable-3">any</span>;
</code></pre>
<h2 id="&#xBBF8;&#xB9AC;-&#xC815;&#xC758;&#xB41C;-&#xC870;&#xAC74;&#xBD80;-&#xD0C0;&#xC785;-predefined-conditional-types">&#xBBF8;&#xB9AC; &#xC815;&#xC758;&#xB41C; &#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785; (Predefined conditional types)</h2>
<p>TypeScript 2.8&#xC5D0;&#xC11C; <code>lib.d.ts</code>&#xC5D0; &#xBBF8;&#xB9AC; &#xC815;&#xC758;&#xB41C; &#xC870;&#xAC74;&#xBD80; &#xD0C0;&#xC785;&#xC744; &#xCD94;&#xAC00;&#xD588;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<ul>
<li><code>Exclude&lt;T, U&gt;</code> -- <code>U</code>&#xC5D0; &#xD560;&#xB2F9;&#xD560; &#xC218; &#xC788;&#xB294; &#xD0C0;&#xC785;&#xC740; <code>T</code>&#xC5D0;&#xC11C; &#xC81C;&#xC678;.</li>
<li><code>Extract&lt;T, U&gt;</code> -- <code>U</code>&#xC5D0; &#xD560;&#xB2F9;&#xD560; &#xC218; &#xC788;&#xB294; &#xD0C0;&#xC785;&#xC744; <code>T</code>&#xC5D0;&#xC11C; &#xCD94;&#xCD9C;</li>
<li><code>NonNullable&lt;T&gt;</code> -- <code>T</code>&#xC5D0;&#xC11C; <code>null</code>&#xACFC; <code>undefined</code>&#xB97C; &#xC81C;&#xC678;.</li>
<li><code>ReturnType&lt;T&gt;</code> -- &#xD568;&#xC218; &#xD0C0;&#xC785;&#xC758; &#xBC18;&#xD658; &#xD0C0;&#xC785;&#xC744; &#xC5BB;&#xAE30;.</li>
<li><code>InstanceType&lt;T&gt;</code> -- &#xC0DD;&#xC131;&#xC790; &#xD568;&#xC218; &#xD0C0;&#xC785;&#xC758; &#xC778;&#xC2A4;&#xD134;&#xC2A4; &#xD0C0;&#xC785;&#xC744; &#xC5BB;&#xAE30;.</li>
</ul>
<h3 id="&#xC608;&#xC81C;">&#xC608;&#xC81C;</h3>
<pre><code class="lang-ts"><span class="cm-variable">type</span> <span class="cm-variable">T00</span> <span class="cm-operator">=</span> <span class="cm-variable">Exclude</span><span class="cm-operator">&lt;</span><span class="cm-string">&quot;a&quot;</span> <span class="cm-operator">|</span> <span class="cm-string">&quot;b&quot;</span> <span class="cm-operator">|</span> <span class="cm-string">&quot;c&quot;</span> <span class="cm-operator">|</span> <span class="cm-string">&quot;d&quot;</span>, <span class="cm-string">&quot;a&quot;</span> <span class="cm-operator">|</span> <span class="cm-string">&quot;c&quot;</span> <span class="cm-operator">|</span> <span class="cm-string">&quot;f&quot;</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// &quot;b&quot; | &quot;d&quot;</span>
<span class="cm-variable">type</span> <span class="cm-variable">T01</span> <span class="cm-operator">=</span> <span class="cm-variable">Extract</span><span class="cm-operator">&lt;</span><span class="cm-string">&quot;a&quot;</span> <span class="cm-operator">|</span> <span class="cm-string">&quot;b&quot;</span> <span class="cm-operator">|</span> <span class="cm-string">&quot;c&quot;</span> <span class="cm-operator">|</span> <span class="cm-string">&quot;d&quot;</span>, <span class="cm-string">&quot;a&quot;</span> <span class="cm-operator">|</span> <span class="cm-string">&quot;c&quot;</span> <span class="cm-operator">|</span> <span class="cm-string">&quot;f&quot;</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// &quot;a&quot; | &quot;c&quot;</span>

<span class="cm-variable">type</span> <span class="cm-variable">T02</span> <span class="cm-operator">=</span> <span class="cm-variable">Exclude</span><span class="cm-operator">&lt;</span><span class="cm-variable-3">string</span> <span class="cm-operator">|</span> <span class="cm-variable-3">number</span> <span class="cm-operator">|</span> (() <span class="cm-operator">=&gt;</span> <span class="cm-variable">void</span>), <span class="cm-variable">Function</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// string | number</span>
<span class="cm-variable">type</span> <span class="cm-variable">T03</span> <span class="cm-operator">=</span> <span class="cm-variable">Extract</span><span class="cm-operator">&lt;</span><span class="cm-variable-3">string</span> <span class="cm-operator">|</span> <span class="cm-variable-3">number</span> <span class="cm-operator">|</span> (() <span class="cm-operator">=&gt;</span> <span class="cm-variable">void</span>), <span class="cm-variable">Function</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// () =&gt; void</span>

<span class="cm-variable">type</span> <span class="cm-variable">T04</span> <span class="cm-operator">=</span> <span class="cm-variable">NonNullable</span><span class="cm-operator">&lt;</span><span class="cm-variable-3">string</span> <span class="cm-operator">|</span> <span class="cm-variable-3">number</span> <span class="cm-operator">|</span> <span class="cm-atom">undefined</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// string | number</span>
<span class="cm-variable">type</span> <span class="cm-variable">T05</span> <span class="cm-operator">=</span> <span class="cm-variable">NonNullable</span><span class="cm-operator">&lt;</span>(() <span class="cm-operator">=&gt;</span> <span class="cm-variable-3">string</span>) <span class="cm-operator">|</span> <span class="cm-variable-3">string</span>[] <span class="cm-operator">|</span> <span class="cm-atom">null</span> <span class="cm-operator">|</span> <span class="cm-atom">undefined</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// (() =&gt; string) | string[]</span>

<span class="cm-keyword">function</span> <span class="cm-variable">f1</span>(<span class="cm-def">s</span>: <span class="cm-variable-3">string</span>) {
    <span class="cm-keyword">return</span> { <span class="cm-property">a</span>: <span class="cm-number">1</span>, <span class="cm-property">b</span>: <span class="cm-variable-2">s</span> };
}

<span class="cm-keyword">class</span> <span class="cm-variable">C</span> {
    <span class="cm-property">x</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>;
    <span class="cm-variable">y</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>;
}

<span class="cm-variable">type</span> <span class="cm-variable">T10</span> <span class="cm-operator">=</span> <span class="cm-variable">ReturnType</span><span class="cm-operator">&lt;</span>() <span class="cm-operator">=&gt;</span> <span class="cm-variable-3">string</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// string</span>
<span class="cm-variable">type</span> <span class="cm-variable">T11</span> <span class="cm-operator">=</span> <span class="cm-variable">ReturnType</span><span class="cm-operator">&lt;</span>(<span class="cm-def">s</span>: <span class="cm-variable-3">string</span>) <span class="cm-operator">=&gt;</span> <span class="cm-variable">void</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// void</span>
<span class="cm-variable">type</span> <span class="cm-variable">T12</span> <span class="cm-operator">=</span> <span class="cm-variable">ReturnType</span><span class="cm-operator">&lt;</span>(<span class="cm-operator">&lt;</span><span class="cm-variable">T</span><span class="cm-operator">&gt;</span>() <span class="cm-operator">=&gt;</span> <span class="cm-variable">T</span>)<span class="cm-operator">&gt;</span>;  <span class="cm-comment">// {}</span>
<span class="cm-variable">type</span> <span class="cm-variable">T13</span> <span class="cm-operator">=</span> <span class="cm-variable">ReturnType</span><span class="cm-operator">&lt;</span>(<span class="cm-operator">&lt;</span><span class="cm-variable">T</span> <span class="cm-keyword">extends</span> <span class="cm-variable">U</span>, <span class="cm-variable">U</span> <span class="cm-keyword">extends</span> <span class="cm-variable-3">number</span>[]<span class="cm-operator">&gt;</span>() <span class="cm-operator">=&gt;</span> <span class="cm-variable">T</span>)<span class="cm-operator">&gt;</span>;  <span class="cm-comment">// number[]</span>
<span class="cm-variable">type</span> <span class="cm-variable">T14</span> <span class="cm-operator">=</span> <span class="cm-variable">ReturnType</span><span class="cm-operator">&lt;</span><span class="cm-keyword">typeof</span> <span class="cm-variable">f1</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// { a: number, b: string }</span>
<span class="cm-variable">type</span> <span class="cm-variable">T15</span> <span class="cm-operator">=</span> <span class="cm-variable">ReturnType</span><span class="cm-operator">&lt;</span><span class="cm-variable-3">any</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// any</span>
<span class="cm-variable">type</span> <span class="cm-variable">T16</span> <span class="cm-operator">=</span> <span class="cm-variable">ReturnType</span><span class="cm-operator">&lt;</span><span class="cm-variable">never</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// never</span>
<span class="cm-variable">type</span> <span class="cm-variable">T17</span> <span class="cm-operator">=</span> <span class="cm-variable">ReturnType</span><span class="cm-operator">&lt;</span><span class="cm-variable-3">string</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// &#xC624;&#xB958;</span>
<span class="cm-variable">type</span> <span class="cm-variable">T18</span> <span class="cm-operator">=</span> <span class="cm-variable">ReturnType</span><span class="cm-operator">&lt;</span><span class="cm-variable">Function</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// &#xC624;&#xB958;</span>

<span class="cm-variable">type</span> <span class="cm-variable">T20</span> <span class="cm-operator">=</span> <span class="cm-variable">InstanceType</span><span class="cm-operator">&lt;</span><span class="cm-keyword">typeof</span> <span class="cm-variable">C</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// C</span>
<span class="cm-variable">type</span> <span class="cm-variable">T21</span> <span class="cm-operator">=</span> <span class="cm-variable">InstanceType</span><span class="cm-operator">&lt;</span><span class="cm-variable-3">any</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// any</span>
<span class="cm-variable">type</span> <span class="cm-variable">T22</span> <span class="cm-operator">=</span> <span class="cm-variable">InstanceType</span><span class="cm-operator">&lt;</span><span class="cm-variable">never</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// never</span>
<span class="cm-variable">type</span> <span class="cm-variable">T23</span> <span class="cm-operator">=</span> <span class="cm-variable">InstanceType</span><span class="cm-operator">&lt;</span><span class="cm-variable-3">string</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// &#xC624;&#xB958;</span>
<span class="cm-variable">type</span> <span class="cm-variable">T24</span> <span class="cm-operator">=</span> <span class="cm-variable">InstanceType</span><span class="cm-operator">&lt;</span><span class="cm-variable">Function</span><span class="cm-operator">&gt;</span>;  <span class="cm-comment">// &#xC624;&#xB958;</span>
</code></pre>
<blockquote>
<p>Note: <code>Exclude</code> &#xD0C0;&#xC785;&#xC740; <a href="https://github.com/Microsoft/TypeScript/issues/12215#issuecomment-307871458" target="_blank">&#xC5EC;&#xAE30;</a>&#xC5D0;&#xC11C; &#xC81C;&#xC548;&#xB41C; <code>Diff</code> &#xD0C0;&#xC785;&#xC758; &#xC801;&#xC808;&#xD55C; &#xAD6C;&#xD604;&#xC785;&#xB2C8;&#xB2E4;. <code>Diff</code>&#xB97C; &#xC815;&#xC758;&#xD55C; &#xCF54;&#xB4DC;&#xC640;&#xC758; &#xCDA9;&#xB3CC;&#xC744; &#xD53C;&#xD558;&#xAE30; &#xC704;&#xD574; <code>Exclude</code>&#xB97C; &#xC0AC;&#xC6A9;&#xD588;&#xACE0;, &#xB610; &#xC774; &#xC774;&#xB984;&#xC774; &#xD0C0;&#xC785;&#xC758; &#xC758;&#xBBF8;&#xB97C; &#xB354; &#xC798; &#xC804;&#xB2EC;&#xD55C;&#xB2E4;&#xACE0; &#xB290;&#xAF08;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
</blockquote>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                <a href="generics.html" class="navigation navigation-prev " aria-label="Previous page: 제네릭">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="declaration-merging.html" class="navigation navigation-next " aria-label="Next page: 선언 병합">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"고급 타입","level":"4.1","depth":1,"next":{"title":"선언 병합","level":"4.2","depth":1,"path":"pages/declaration-merging.md","ref":"pages/declaration-merging.md","articles":[]},"previous":{"title":"제네릭","level":"3.9","depth":1,"path":"pages/generics.md","ref":"pages/generics.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":["theme-darkblue","addcssjs","highlight-1","custom-favicon","forkmegithub","sitemap-general","sitemap","ga"],"pluginsConfig":{"github":{"url":"https://github.com/typescript-kr/typescript-kr.github.io"},"search":{},"addcssjs":{"js":[],"css":["assets/css/atom-one-dark.css"]},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sitemap-general":{"prefix":"https://typescript-kr.gitbooks.io/"},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-darkblue":{},"highlight":{},"favicon":"assets/images/favicon.ico","sitemap":{"hostname":"https://typescript-kr.github.io/"},"highlight-1":{},"custom-favicon":{},"ga":{"configuration":"auto","token":"UA-163809183-2"},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"forkmegithub":{"color":"darkblue","url":"https://github.com/typescript-kr/typescript-kr.github.io"},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"assets/css/website.css"}},"file":{"path":"pages/advanced-types.md","mtime":"2020-12-22T11:10:54.413Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2020-12-22T11:11:52.057Z"},"basePath":"..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../gitbook/gitbook.js"></script>
    <script src="../gitbook/theme.js"></script>
    
        
        <script src="../gitbook/gitbook-plugin-forkmegithub/plugin.js"></script>
        
    
        <script src="../gitbook/gitbook-plugin-ga/plugin.js"></script>
        
    
        <script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
        
    
        <script src="../gitbook/gitbook-plugin-search/search.js"></script>
        
    
        <script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
        
    
        <script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
        
    
        <script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    
        <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    
    </body>
</html>