pages/Classes.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="Functions.html" />
    
    
    <link rel="prev" href="Interfaces.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/TypeScript in 5 minutes.html">
            
                <a href="tutorials/TypeScript in 5 minutes.html">
            
                    
                    5분 안에 보는 TypeScript
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="2.2" data-path="tutorials/ASP.NET Core.html">
            
                <a href="tutorials/ASP.NET Core.html">
            
                    
                    ASP.NET Core
            
                </a>
            

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

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

        </li>
    
        <li class="chapter " data-level="2.5" data-path="tutorials/React & Webpack.html">
            
                <a href="tutorials/React & Webpack.html">
            
                    
                    리액트 & 웹팩
            
                </a>
            

        </li>
    

        <li class="header">핸드북</li>
        
        
        <li class="chapter " data-level="3.1" data-path="Basic Types.html">
            
                <a href="Basic Types.html">
            
                    
                    기본 타입
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="3.2" data-path="Variable Declarations.html">
            
                <a href="Variable Declarations.html">
            
                    
                    변수 선언
            
                </a>
            

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

        </li>
    
        <li class="chapter active" data-level="3.4" data-path="Classes.html">
            
                <a href="Classes.html">
            
                    
                    클래스
            
                </a>
            

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

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

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

        </li>
    
        <li class="chapter " data-level="3.8" data-path="Type Inference.html">
            
                <a href="Type Inference.html">
            
                    
                    타입 추론
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="3.9" data-path="Type Compatibility.html">
            
                <a href="Type Compatibility.html">
            
                    
                    타입 호환성
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="3.10" data-path="Advanced Types.html">
            
                <a href="Advanced Types.html">
            
                    
                    고급 타입
            
                </a>
            

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

        </li>
    
        <li class="chapter " data-level="3.12" data-path="Iterators and Generators.html">
            
                <a href="Iterators and Generators.html">
            
                    
                    이터레이터와 제네레이터
            
                </a>
            

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

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

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

        </li>
    
        <li class="chapter " data-level="3.16" data-path="Module Resolution.html">
            
                <a href="Module Resolution.html">
            
                    
                    모듈 해석
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="3.17" data-path="Declaration Merging.html">
            
                <a href="Declaration Merging.html">
            
                    
                    선언 병합
            
                </a>
            

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

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

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

        </li>
    
        <li class="chapter " data-level="3.21" data-path="Triple-Slash Directives.html">
            
                <a href="Triple-Slash Directives.html">
            
                    
                    트리플-슬래시 지시자
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="3.22" data-path="Type Checking JavaScript Files.html">
            
                <a href="Type Checking JavaScript Files.html">
            
                    
                    JavaScript 파일 타입 검사
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="3.23" data-path="Utility Types.html">
            
                <a href="Utility Types.html">
            
                    
                    유틸리티 타입
            
                </a>
            

        </li>
    

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

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

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

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

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

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

            <ul class="articles">
                
    
        <li class="chapter " data-level="4.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="4.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="4.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="4.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="4.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="4.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="4.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="4.7" data-path="declaration files/Publishing.html">
            
                <a href="declaration files/Publishing.html">
            
                    
                    Publishing
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="4.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="5.1" data-path="tsconfig.json.html">
            
                <a href="tsconfig.json.html">
            
                    
                    tsconfig.json
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="5.2" data-path="Compiler Options.html">
            
                <a href="Compiler Options.html">
            
                    
                    컴파일러 옵션
            
                </a>
            

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

        </li>
    
        <li class="chapter " data-level="5.4" data-path="Compiler Options in MSBuild.html">
            
                <a href="Compiler Options in MSBuild.html">
            
                    
                    MSBuild에서의 컴파일러 옵션
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="5.5" data-path="Integrating with Build Tools.html">
            
                <a href="Integrating with Build Tools.html">
            
                    
                    빌드 도구와 통합
            
                </a>
            

        </li>
    
        <li class="chapter " data-level="5.6" data-path="Nightly Builds.html">
            
                <a href="Nightly Builds.html">
            
                    
                    Nightly 빌드
            
                </a>
            

        </li>
    

        <li class="header">릴리즈 노트</li>
        
        
        <li class="chapter " data-level="6.1" 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.2" data-path="release notes/TypeScript 3.8.html">
            
                <a href="release notes/TypeScript 3.8.html">
            
                    
                    TypeScript 3.8
            
                </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="&#xC18C;&#xAC1C;-introduction">&#xC18C;&#xAC1C; (Introduction)</h1>
<p>&#xAE30;&#xC874; JavaScript&#xB294; &#xC7AC;&#xC0AC;&#xC6A9;&#xD560; &#xC218; &#xC788;&#xB294; &#xCEF4;&#xD3EC;&#xB10C;&#xD2B8;&#xB97C; &#xB9CC;&#xB4E4;&#xAE30; &#xC704;&#xD574; &#xD568;&#xC218;&#xC640; &#xD504;&#xB85C;&#xD1A0;&#xD0C0;&#xC785;-&#xAE30;&#xBC18; &#xC0C1;&#xC18D;&#xC744; &#xC0AC;&#xC6A9;&#xD588;&#xC9C0;&#xB9CC;, &#xAC1D;&#xCCB4; &#xC9C0;&#xD5A5; &#xC811;&#xADFC; &#xBC29;&#xC2DD;&#xC5D0; &#xC775;&#xC219;&#xD55C; &#xD504;&#xB85C;&#xADF8;&#xB798;&#xBA38;&#xC758; &#xC785;&#xC7A5;&#xC5D0;&#xC11C;&#xB294; &#xD074;&#xB798;&#xC2A4;&#xAC00; &#xD568;&#xC218;&#xB97C; &#xC0C1;&#xC18D;&#xBC1B;&#xACE0; &#xC774;&#xB7F0; &#xD074;&#xB798;&#xC2A4;&#xC5D0;&#xC11C; &#xAC1D;&#xCCB4;&#xAC00; &#xB9CC;&#xB4E4;&#xC5B4;&#xC9C0;&#xB294; &#xAC83;&#xC5D0; &#xB2E4;&#xC18C; &#xC5B4;&#xC0C9;&#xD568;&#xC744; &#xB290;&#xB084; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
ECMAScript 6&#xB85C;&#xB3C4; &#xC54C;&#xB824;&#xC9C4; ECMAScript 2015&#xB97C; &#xC2DC;&#xC791;&#xC73C;&#xB85C; JavaScript &#xD504;&#xB85C;&#xADF8;&#xB798;&#xBA38;&#xB4E4;&#xC740; &#xC774;&#xB7F0; &#xAC1D;&#xCCB4;-&#xC9C0;&#xD5A5;&#xC801; &#xD074;&#xB798;&#xC2A4;-&#xAE30;&#xBC18;&#xC758; &#xC811;&#xADFC; &#xBC29;&#xC2DD;&#xC744; &#xC0AC;&#xC6A9;&#xD574;&#xC11C; &#xC560;&#xD50C;&#xB9AC;&#xCF00;&#xC774;&#xC158;&#xC744; &#xB9CC;&#xB4E4; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
TypeScript&#xC5D0;&#xC11C;&#xB294; &#xB2E4;&#xC74C; &#xBC84;&#xC804;&#xC758; JavaScript&#xB97C; &#xAE30;&#xB2E4;&#xB9B4; &#xD544;&#xC694; &#xC5C6;&#xC774; &#xAC1C;&#xBC1C;&#xC790;&#xB4E4;&#xC774; &#xC774;&#xB7EC;&#xD55C; &#xAE30;&#xBC95;&#xB4E4;&#xC744; &#xC0AC;&#xC6A9;&#xD560; &#xC218; &#xC788;&#xAC8C; &#xD574;&#xC8FC;&#xBA70;, &#xAE30;&#xC874;&#xC758;JavaScript&#xB85C; &#xCEF4;&#xD30C;&#xC77C;&#xD558;&#xC5EC; &#xC8FC;&#xC694; &#xBE0C;&#xB77C;&#xC6B0;&#xC800;&#xC640; &#xD50C;&#xB7AB;&#xD3FC;&#xC5D0;&#xC11C; &#xB3D9;&#xC791;&#xD558;&#xAC8C; &#xD569;&#xB2C8;&#xB2E4;.</p>
<h1 id="&#xD074;&#xB798;&#xC2A4;-classes">&#xD074;&#xB798;&#xC2A4; (Classes)</h1>
<p>&#xAC04;&#xB2E8;&#xD55C; &#xD074;&#xB798;&#xC2A4;-&#xAE30;&#xBC18; &#xC608;&#xC81C;&#xB97C; &#xC0B4;&#xD3B4;&#xBCF4;&#xACA0;&#xC2B5;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-keyword">class</span> <span class="cm-variable">Greeter</span> {
    <span class="cm-property">greeting</span>: <span class="cm-variable-3">string</span>;
    <span class="cm-keyword">constructor</span>(<span class="cm-variable">message</span>: <span class="cm-variable-3">string</span>) {
        <span class="cm-keyword">this</span>.<span class="cm-variable">greeting</span> <span class="cm-operator">=</span> <span class="cm-variable">message</span>;
    }
    <span class="cm-variable">greet</span>() {
        <span class="cm-keyword">return</span> <span class="cm-string">&quot;Hello, &quot;</span> <span class="cm-operator">+</span> <span class="cm-keyword">this</span>.<span class="cm-property">greeting</span>;
    }
}

<span class="cm-keyword">let</span> <span class="cm-variable">greeter</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Greeter</span>(<span class="cm-string">&quot;world&quot;</span>);
</code></pre>
<p>C# &#xC774;&#xB098; Java&#xB97C; &#xC0AC;&#xC6A9;&#xD574;&#xBD24;&#xB2E4;&#xBA74;, &#xC775;&#xC219;&#xD55C; &#xAD6C;&#xBB38;&#xC77C; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;.
&#xC0C8;&#xB85C;&#xC6B4; &#xD074;&#xB798;&#xC2A4; <code>Greeter</code>&#xB97C; &#xC120;&#xC5B8;&#xD588;&#xC2B5;&#xB2C8;&#xB2E4;. &#xC774; &#xD074;&#xB798;&#xC2A4;&#xB294; 3&#xAC1C;&#xC758; &#xBA64;&#xBC84;&#xB97C; &#xAC00;&#xC9C0;&#xACE0; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;: <code>greeting</code> &#xD504;&#xB85C;&#xD37C;&#xD2F0;, &#xC0DD;&#xC131;&#xC790; &#xADF8;&#xB9AC;&#xACE0; <code>greet</code> &#xBA54;&#xC11C;&#xB4DC; &#xC785;&#xB2C8;&#xB2E4;.</p>
<p>&#xD074;&#xB798;&#xC2A4; &#xC548;&#xC5D0;&#xC11C; &#xD074;&#xB798;&#xC2A4;&#xC758; &#xBA64;&#xBC84;&#xB97C; &#xCC38;&#xC870;&#xD560; &#xB54C; <code>this.</code>&#xB97C; &#xC55E;&#xC5D0; &#xB367;&#xBD99;&#xC774;&#xB294; &#xAC83;&#xC744; &#xC54C; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xC774;&#xAC83;&#xC740; &#xBA64;&#xBC84;&#xC5D0; &#xC811;&#xADFC;&#xD558;&#xB294; &#xAC83;&#xC744; &#xC758;&#xBBF8;&#xD569;&#xB2C8;&#xB2E4;.</p>
<p>&#xB9C8;&#xC9C0;&#xB9C9; &#xC904;&#xC5D0;&#xC11C;, <code>new</code>&#xB97C; &#xC0AC;&#xC6A9;&#xD558;&#xC5EC; <code>Greeter</code>&#xD074;&#xB798;&#xC2A4;&#xC758; &#xC778;&#xC2A4;&#xD134;&#xC2A4;&#xB97C; &#xC0DD;&#xC131;&#xD569;&#xB2C8;&#xB2E4;.
&#xC774; &#xCF54;&#xB4DC;&#xB294; &#xC774;&#xC804;&#xC5D0; &#xC815;&#xC758;&#xD55C; &#xC0DD;&#xC131;&#xC790;&#xB97C; &#xD638;&#xCD9C;&#xD558;&#xC5EC; <code>Greeter</code> &#xD615;&#xD0DC;&#xC758; &#xC0C8;&#xB85C;&#xC6B4; &#xAC1D;&#xCCB4;&#xB97C; &#xB9CC;&#xB4E4;&#xACE0;, &#xC0DD;&#xC131;&#xC790;&#xB97C; &#xC2E4;&#xD589;&#xD574; &#xCD08;&#xAE30;&#xD654;&#xD569;&#xB2C8;&#xB2E4;.</p>
<h1 id="&#xC0C1;&#xC18D;-inheritance">&#xC0C1;&#xC18D; (Inheritance)</h1>
<p>TypeScript&#xC5D0;&#xC11C;&#xB294;, &#xC77C;&#xBC18;&#xC801;&#xC778; &#xAC1D;&#xCCB4;-&#xC9C0;&#xD5A5; &#xD328;&#xD134;&#xC744; &#xC0AC;&#xC6A9;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xD074;&#xB798;&#xC2A4;-&#xAE30;&#xBC18; &#xD504;&#xB85C;&#xADF8;&#xB798;&#xBC0D;&#xC758; &#xAC00;&#xC7A5; &#xAE30;&#xBCF8;&#xC801;&#xC778; &#xD328;&#xD134; &#xC911; &#xD558;&#xB098;&#xB294; &#xC0C1;&#xC18D;&#xC744; &#xC774;&#xC6A9;&#xD558;&#xC5EC; &#xC774;&#xBBF8; &#xC874;&#xC7AC;&#xD558;&#xB294; &#xD074;&#xB798;&#xC2A4;&#xB97C; &#xD655;&#xC7A5;&#xD574; &#xC0C8;&#xB85C;&#xC6B4; &#xD074;&#xB798;&#xC2A4;&#xB97C; &#xB9CC;&#xB4E4; &#xC218; &#xC788;&#xB2E4;&#xB294; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;.</p>
<p>&#xC608;&#xC81C;&#xB97C; &#xC0B4;&#xD3B4;&#xBCF4;&#xACA0;&#xC2B5;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-keyword">class</span> <span class="cm-variable">Animal</span> {
    <span class="cm-property">move</span>(<span class="cm-def">distanceInMeters</span>: <span class="cm-variable-3">number</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>) {
        <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-string-2">`Animal moved ${</span><span class="cm-variable-2">distanceInMeters</span><span class="cm-string-2">}</span><span class="cm-string-2">m.`</span>);
    }
}

<span class="cm-keyword">class</span> <span class="cm-variable">Dog</span> <span class="cm-keyword">extends</span> <span class="cm-variable">Animal</span> {
    <span class="cm-property">bark</span>() {
        <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-string">&apos;Woof! Woof!&apos;</span>);
    }
}

<span class="cm-keyword">const</span> <span class="cm-variable">dog</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Dog</span>();
<span class="cm-variable">dog</span>.<span class="cm-property">bark</span>();
<span class="cm-variable">dog</span>.<span class="cm-property">move</span>(<span class="cm-number">10</span>);
<span class="cm-variable">dog</span>.<span class="cm-property">bark</span>();
</code></pre>
<p>&#xC0C1;&#xC18D; &#xAE30;&#xB2A5;&#xC744; &#xBCF4;&#xC5EC;&#xC8FC;&#xB294; &#xAC00;&#xC7A5; &#xAE30;&#xBCF8;&#xC801;&#xC778; &#xC608;&#xC81C;&#xC785;&#xB2C8;&#xB2E4;: &#xD074;&#xB798;&#xC2A4;&#xB294; &#xAE30;&#xCD08; &#xD074;&#xB798;&#xC2A4;&#xB85C;&#xBD80;&#xD130; &#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xC640; &#xBA54;&#xC11C;&#xB4DC;&#xB97C; &#xC0C1;&#xC18D;&#xBC1B;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xC5EC;&#xAE30;&#xC11C;, <code>Dog</code>&#xC740; <code>extends</code> &#xD0A4;&#xC6CC;&#xB4DC;&#xB97C; &#xC0AC;&#xC6A9;&#xD558;&#xC5EC; <code>Animal</code>&#xC774;&#xB77C;&#xB294; <em>&#xAE30;&#xCD08;</em> &#xD074;&#xB798;&#xC2A4;&#xB85C;&#xBD80;&#xD130; &#xD30C;&#xC0DD;&#xB41C; <em>&#xD30C;&#xC0DD;</em> &#xD074;&#xB798;&#xC2A4;&#xC785;&#xB2C8;&#xB2E4;.
&#xD30C;&#xC0DD;&#xB41C; &#xD074;&#xB798;&#xC2A4;&#xB294; <em>&#xD558;&#xC704;&#xD074;&#xB798;&#xC2A4;(subclasses)</em>, &#xAE30;&#xCD08; &#xD074;&#xB798;&#xC2A4;&#xB294; <em>&#xC0C1;&#xC704;&#xD074;&#xB798;&#xC2A4;(superclasses)</em> &#xB77C;&#xACE0; &#xBD88;&#xB9AC;&#xAE30;&#xB3C4; &#xD569;&#xB2C8;&#xB2E4;.</p>
<p><code>Dog</code>&#xB294; <code>Animal</code>&#xC758; &#xAE30;&#xB2A5;&#xC744; &#xD655;&#xC7A5;&#xD558;&#xAE30; &#xB54C;&#xBB38;&#xC5D0;, <code>bark()</code>&#xC640; <code>move()</code>&#xB97C; &#xBAA8;&#xB450; &#xAC00;&#xC9C4; <code>Dog</code> &#xC778;&#xC2A4;&#xD134;&#xC2A4;&#xB97C; &#xC0DD;&#xC131;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<p>&#xC870;&#xAE08; &#xB354; &#xBCF5;&#xC7A1;&#xD55C; &#xC608;&#xC81C;&#xB97C; &#xC0B4;&#xD3B4;&#xBCF4;&#xACA0;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-keyword">class</span> <span class="cm-variable">Animal</span> {
    <span class="cm-property">name</span>: <span class="cm-variable-3">string</span>;
    <span class="cm-keyword">constructor</span>(<span class="cm-variable">theName</span>: <span class="cm-variable-3">string</span>) { <span class="cm-keyword">this</span>.<span class="cm-variable">name</span> <span class="cm-operator">=</span> <span class="cm-variable">theName</span>; }
    <span class="cm-variable">move</span>(<span class="cm-variable">distanceInMeters</span>: <span class="cm-variable-3">number</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>) {
        <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-string-2">`${</span><span class="cm-keyword">this</span>.<span class="cm-property">name</span><span class="cm-string-2">}</span> <span class="cm-string-2">moved ${</span><span class="cm-variable">distanceInMeters</span><span class="cm-string-2">}</span><span class="cm-string-2">m.`</span>);
    }
}

<span class="cm-keyword">class</span> <span class="cm-variable">Snake</span> <span class="cm-keyword">extends</span> <span class="cm-variable">Animal</span> {
    <span class="cm-keyword">constructor</span>(<span class="cm-variable">name</span>: <span class="cm-variable-3">string</span>) { <span class="cm-keyword">super</span>(<span class="cm-variable">name</span>); }
    <span class="cm-variable">move</span>(<span class="cm-variable">distanceInMeters</span> <span class="cm-operator">=</span> <span class="cm-number">5</span>) {
        <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-string">&quot;Slithering...&quot;</span>);
        <span class="cm-keyword">super</span>.<span class="cm-property">move</span>(<span class="cm-variable">distanceInMeters</span>);
    }
}

<span class="cm-keyword">class</span> <span class="cm-variable">Horse</span> <span class="cm-keyword">extends</span> <span class="cm-variable">Animal</span> {
    <span class="cm-keyword">constructor</span>(<span class="cm-variable">name</span>: <span class="cm-variable-3">string</span>) { <span class="cm-keyword">super</span>(<span class="cm-variable">name</span>); }
    <span class="cm-variable">move</span>(<span class="cm-variable">distanceInMeters</span> <span class="cm-operator">=</span> <span class="cm-number">45</span>) {
        <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-string">&quot;Galloping...&quot;</span>);
        <span class="cm-keyword">super</span>.<span class="cm-property">move</span>(<span class="cm-variable">distanceInMeters</span>);
    }
}

<span class="cm-keyword">let</span> <span class="cm-variable">sam</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Snake</span>(<span class="cm-string">&quot;Sammy the Python&quot;</span>);
<span class="cm-keyword">let</span> <span class="cm-variable">tom</span>: <span class="cm-variable-3">Animal</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Horse</span>(<span class="cm-string">&quot;Tommy the Palomino&quot;</span>);

<span class="cm-variable">sam</span>.<span class="cm-property">move</span>();
<span class="cm-variable">tom</span>.<span class="cm-property">move</span>(<span class="cm-number">34</span>);
</code></pre>
<p>&#xC774; &#xC608;&#xC81C;&#xB294; &#xC55E;&#xC5D0;&#xC11C; &#xC5B8;&#xAE09;&#xD558;&#xC9C0; &#xC54A;&#xC740; &#xBA87; &#xAC00;&#xC9C0; &#xAE30;&#xB2A5;&#xC744; &#xB2E4;&#xB8F9;&#xB2C8;&#xB2E4;.
&#xC774;&#xBC88;&#xC5D0;&#xB3C4; <code>extends</code> &#xD0A4;&#xC6CC;&#xB4DC;&#xB97C; &#xC0AC;&#xC6A9;&#xD558;&#xC5EC; <code>Animal</code>&#xC758; &#xD558;&#xC704;&#xD074;&#xB798;&#xC2A4;&#xB97C; &#xC0DD;&#xC131;&#xD569;&#xB2C8;&#xB2E4;: <code>Horse</code>&#xC640; <code>Snake</code>.</p>
<p>&#xC774;&#xC804; &#xC608;&#xC81C;&#xC640; &#xD55C; &#xAC00;&#xC9C0; &#xB2E4;&#xB978; &#xBD80;&#xBD84;&#xC740; &#xD30C;&#xC0DD;&#xB41C; &#xD074;&#xB798;&#xC2A4;&#xC758; &#xC0DD;&#xC131;&#xC790; &#xD568;&#xC218;&#xB294; &#xAE30;&#xCD08; &#xD074;&#xB798;&#xC2A4;&#xC758; &#xC0DD;&#xC131;&#xC790;&#xB97C; &#xC2E4;&#xD589;&#xD560; <code>super()</code>&#xB97C; <em>&#xD638;&#xCD9C;&#xD574;&#xC57C; &#xD55C;&#xB2E4;&#xB294; &#xC810;</em>&#xC785;&#xB2C8;&#xB2E4;.
&#xB354;&#xC6B1;&#xC774; &#xC0DD;&#xC131;&#xC790; &#xB0B4;&#xC5D0;&#xC11C; <code>this</code>&#xC5D0; &#xC788;&#xB294; &#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xC5D0; &#xC811;&#xADFC;&#xD558;&#xAE30; &#xC804;&#xC5D0; <code>super()</code>&#xB97C; &#xBA3C;&#xC800; &#xD638;&#xCD9C;&#xD574;&#xC57C; &#xD569;&#xB2C8;&#xB2E4;.
&#xC774; &#xBD80;&#xBD84;&#xC740; TypeScript&#xC5D0;&#xC11C; &#xC911;&#xC694;&#xD55C; &#xADDC;&#xCE59;&#xC785;&#xB2C8;&#xB2E4;.</p>
<p>&#xB610;&#xD55C; &#xC774; &#xC608;&#xC81C;&#xB294; &#xAE30;&#xCD08; &#xD074;&#xB798;&#xC2A4;&#xC758; &#xBA54;&#xC11C;&#xB4DC;&#xB97C; &#xD558;&#xC704;&#xD074;&#xB798;&#xC2A4;&#xC5D0; &#xD2B9;&#xD654;&#xB41C; &#xBA54;&#xC11C;&#xB4DC;&#xB85C; &#xC624;&#xBC84;&#xB77C;&#xC774;&#xB4DC;&#xD558;&#xB294; &#xBC29;&#xBC95;&#xC744; &#xBCF4;&#xC5EC;&#xC90D;&#xB2C8;&#xB2E4;.
&#xC5EC;&#xAE30;&#xC11C; <code>Snake</code>&#xC640; <code>Horse</code>&#xB294; <code>Animal</code>&#xC758; <code>move</code>&#xB97C; &#xC624;&#xBC84;&#xB77C;&#xC774;&#xB4DC;&#xD574;&#xC11C; &#xAC01;&#xAC01; &#xD074;&#xB798;&#xC2A4;&#xC758; &#xD2B9;&#xC131;&#xC5D0; &#xB9DE;&#xAC8C; &#xAE30;&#xB2A5;&#xC744; &#xAC00;&#xC9C4; <code>move</code>&#xB97C; &#xC0DD;&#xC131;&#xD569;&#xB2C8;&#xB2E4;.
<code>tom</code>&#xC740; <code>Animal</code>&#xB85C; &#xC120;&#xC5B8;&#xB418;&#xC5C8;&#xC9C0;&#xB9CC; <code>Horse</code>&#xC758; &#xAC12;&#xC744; &#xAC00;&#xC9C0;&#xBBC0;&#xB85C; <code>tom.move(34)</code>&#xB294; <code>Horse</code>&#xC758; &#xC624;&#xBC84;&#xB77C;&#xC774;&#xB529; &#xBA54;&#xC11C;&#xB4DC;&#xB97C; &#xD638;&#xCD9C;&#xD569;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-variable">Slithering</span><span class="cm-meta">...</span>
<span class="cm-variable">Sammy</span> <span class="cm-variable">the</span> <span class="cm-variable">Python</span> <span class="cm-variable">moved</span> <span class="cm-number">5</span><span class="cm-variable">m</span>.
<span class="cm-property">Galloping</span><span class="cm-meta">...</span>
<span class="cm-variable">Tommy</span> <span class="cm-variable">the</span> <span class="cm-variable">Palomino</span> <span class="cm-variable">moved</span> <span class="cm-number">34</span><span class="cm-variable">m</span>.
</code></pre>
<h1 id="public-private-&#xADF8;&#xB9AC;&#xACE0;-protected-&#xC9C0;&#xC815;&#xC790;-public-private-and-protected-modifiers">Public, private &#xADF8;&#xB9AC;&#xACE0; protected &#xC9C0;&#xC815;&#xC790; (Public, private, and protected modifiers)</h1>
<h2 id="&#xAE30;&#xBCF8;&#xC801;&#xC73C;&#xB85C;-&#xACF5;&#xAC1C;-public-by-default">&#xAE30;&#xBCF8;&#xC801;&#xC73C;&#xB85C; &#xACF5;&#xAC1C; (Public by default)</h2>
<p>&#xC6B0;&#xB9AC; &#xC608;&#xC81C;&#xC5D0;&#xC11C;&#xB294;, &#xD504;&#xB85C;&#xADF8;&#xB7A8; &#xB0B4;&#xC5D0;&#xC11C; &#xC120;&#xC5B8;&#xB41C; &#xBA64;&#xBC84;&#xB4E4;&#xC5D0; &#xC790;&#xC720;&#xB86D;&#xAC8C; &#xC811;&#xADFC;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xB2E4;&#xB978; &#xC5B8;&#xC5B4;&#xC758; &#xD074;&#xB798;&#xC2A4;&#xAC00; &#xC775;&#xC219;&#xD558;&#xB2E4;&#xBA74;, &#xC704; &#xC608;&#xC81C;&#xC5D0;&#xC11C; <code>public</code>&#xC744; &#xC0AC;&#xC6A9;&#xD558;&#xC9C0; &#xC54A;&#xC544;&#xB3C4; &#xB41C;&#xB2E4;&#xB294; &#xC810;&#xC744; &#xC54C; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;. &#xC608;&#xB97C; &#xB4E4;&#xC5B4;, C#&#xC5D0;&#xC11C;&#xB294; &#xB178;&#xCD9C; &#xC2DC;&#xD0AC; &#xAC01; &#xBA64;&#xBC84;&#xC5D0; <code>public</code>&#xC744; &#xBD99;&#xC5EC;&#xC57C; &#xD569;&#xB2C8;&#xB2E4;.
TypeScript&#xC5D0;&#xC11C;&#xB294; &#xAE30;&#xBCF8;&#xC801;&#xC73C;&#xB85C; &#xAC01; &#xBA64;&#xBC84;&#xB294; <code>public</code>&#xC785;&#xB2C8;&#xB2E4;.</p>
<p>&#xBA85;&#xC2DC;&#xC801;&#xC73C;&#xB85C; &#xBA64;&#xBC84;&#xB97C; <code>public</code>&#xC73C;&#xB85C; &#xD45C;&#xC2DC;&#xD560; &#xC218;&#xB3C4; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xC774;&#xC804; &#xC139;&#xC158;&#xC758; <code>Animal</code> &#xD074;&#xB798;&#xC2A4;&#xB97C; &#xB2E4;&#xC74C;&#xACFC; &#xAC19;&#xC740; &#xBC29;&#xC2DD;&#xC73C;&#xB85C; &#xC791;&#xC131;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-keyword">class</span> <span class="cm-variable">Animal</span> {
    <span class="cm-keyword">public</span> <span class="cm-variable">name</span>: <span class="cm-variable-3">string</span>;
    <span class="cm-keyword">public</span> <span class="cm-keyword">constructor</span>(<span class="cm-variable">theName</span>: <span class="cm-variable-3">string</span>) { <span class="cm-keyword">this</span>.<span class="cm-variable">name</span> <span class="cm-operator">=</span> <span class="cm-variable">theName</span>; }
    <span class="cm-keyword">public</span> <span class="cm-variable">move</span>(<span class="cm-variable">distanceInMeters</span>: <span class="cm-variable-3">number</span>) {
        <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-string-2">`${</span><span class="cm-keyword">this</span>.<span class="cm-property">name</span><span class="cm-string-2">}</span> <span class="cm-string-2">moved ${</span><span class="cm-variable">distanceInMeters</span><span class="cm-string-2">}</span><span class="cm-string-2">m.`</span>);
    }
}
</code></pre>
<h2 id="ecmascript-&#xBE44;&#xACF5;&#xAC1C;-&#xD544;&#xB4DC;-ecmascript-private-fields">ECMAScript &#xBE44;&#xACF5;&#xAC1C; &#xD544;&#xB4DC; (ECMAScript Private Fields)</h2>
<p>TypeScript 3.8&#xC5D0;&#xC11C;, TypeScript&#xB294; &#xBE44;&#xACF5;&#xAC1C; &#xD544;&#xB4DC;&#xB97C; &#xC704;&#xD55C; JavaScript&#xC758; &#xC0C8;&#xB85C;&#xC6B4; &#xBB38;&#xBC95;&#xC744; &#xC9C0;&#xC6D0;&#xD569;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-keyword">class</span> <span class="cm-variable">Animal</span> {
    <span class="cm-error">#name: string;</span>
    <span class="cm-keyword">constructor</span>(<span class="cm-variable">theName</span>: <span class="cm-variable-3">string</span>) { <span class="cm-keyword">this</span>.<span class="cm-error">#name = theName; }</span>
}

<span class="cm-keyword">new</span> <span class="cm-variable">Animal</span>(<span class="cm-string">&quot;Cat&quot;</span>).<span class="cm-error">#name; // &#xD504;&#xB85C;&#xD37C;&#xD2F0; &apos;#name&apos;&#xC740; &#xBE44;&#xACF5;&#xAC1C; &#xC2DD;&#xBCC4;&#xC790;&#xC774;&#xAE30; &#xB54C;&#xBB38;&#xC5D0; &apos;Animal&apos; &#xD074;&#xB798;&#xC2A4; &#xC678;&#xBD80;&#xC5D0;&#xC120; &#xC811;&#xADFC;&#xD560; &#xC218; &#xC5C6;&#xC2B5;&#xB2C8;&#xB2E4;.</span>
</code></pre>
<p>&#xC774; &#xBB38;&#xBC95;&#xC740; JavaScript &#xB7F0;&#xD0C0;&#xC784;&#xC5D0; &#xB0B4;&#xC7A5;&#xB418;&#xC5B4; &#xC788;&#xC73C;&#xBA70;, &#xAC01;&#xAC01;&#xC758; &#xBE44;&#xACF5;&#xAC1C; &#xD544;&#xB4DC;&#xC758; &#xACA9;&#xB9AC;&#xB97C; &#xB354; &#xC798; &#xBCF4;&#xC7A5;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xD604;&#xC7AC; TypeScript 3.8 <a href="https://devblogs.microsoft.com/typescript/announcing-typescript-3-8-beta/#type-only-imports-exports" target="_blank">&#xB9B4;&#xB9AC;&#xC988; &#xB178;&#xD2B8;</a>&#xC5D0; &#xBE44;&#xACF5;&#xAC1C; &#xD544;&#xB4DC;&#xC5D0; &#xB300;&#xD574; &#xC790;&#xC138;&#xD788; &#xB098;&#xC640;&#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<h2 id="typescript&#xC758;-private-&#xC774;&#xD574;&#xD558;&#xAE30;-understanding-typescripts-private">TypeScript&#xC758; <code>private</code> &#xC774;&#xD574;&#xD558;&#xAE30; (Understanding TypeScript&#x2019;s <code>private</code>)</h2>
<p>TypeScript&#xC5D0;&#xB294; &#xBA64;&#xBC84;&#xB97C; &#xD3EC;&#xD568;&#xD558;&#xB294; &#xD074;&#xB798;&#xC2A4; &#xC678;&#xBD80;&#xC5D0;&#xC11C; &#xC774; &#xBA64;&#xBC84;&#xC5D0; &#xC811;&#xADFC;&#xD558;&#xC9C0; &#xBABB;&#xD558;&#xB3C4;&#xB85D; &#xBA64;&#xBC84;&#xB97C; <code>private</code>&#xC73C;&#xB85C; &#xD45C;&#xC2DC;&#xD558;&#xB294; &#xBC29;&#xBC95;&#xC774; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;. &#xC608;:</p>
<pre><code class="lang-ts"><span class="cm-keyword">class</span> <span class="cm-variable">Animal</span> {
    <span class="cm-keyword">private</span> <span class="cm-variable">name</span>: <span class="cm-variable-3">string</span>;
    <span class="cm-keyword">constructor</span>(<span class="cm-variable">theName</span>: <span class="cm-variable-3">string</span>) { <span class="cm-keyword">this</span>.<span class="cm-variable">name</span> <span class="cm-operator">=</span> <span class="cm-variable">theName</span>; }
}

<span class="cm-keyword">new</span> <span class="cm-variable">Animal</span>(<span class="cm-string">&quot;Cat&quot;</span>).<span class="cm-property">name</span>; <span class="cm-comment">// &#xC624;&#xB958;: &apos;name&apos;&#xC740; &#xBE44;&#xACF5;&#xAC1C;&#xB85C; &#xC120;&#xC5B8;&#xB418;&#xC5B4; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;;</span>
</code></pre>
<p>TypeScript&#xB294; &#xAD6C;&#xC870;&#xC801;&#xC778; &#xD0C0;&#xC785; &#xC2DC;&#xC2A4;&#xD15C;&#xC785;&#xB2C8;&#xB2E4;.
&#xB450;&#xAC1C;&#xC758; &#xB2E4;&#xB978; &#xD0C0;&#xC785;&#xC744; &#xBE44;&#xAD50;&#xD560; &#xB54C; &#xC5B4;&#xB514;&#xC11C; &#xC654;&#xB294;&#xC9C0; &#xC0C1;&#xAD00;&#xC5C6;&#xC774; &#xBAA8;&#xB4E0; &#xBA64;&#xBC84;&#xC758; &#xD0C0;&#xC785;&#xC774; &#xD638;&#xD658; &#xB41C;&#xB2E4;&#xBA74;, &#xADF8; &#xD0C0;&#xC785;&#xB4E4; &#xC790;&#xCCB4;&#xAC00; &#xD638;&#xD658; &#xAC00;&#xB2A5;&#xD558;&#xB2E4;&#xACE0; &#xB9D0;&#xD569;&#xB2C8;&#xB2E4;.</p>
<p>&#xADF8;&#xB7EC;&#xB098; <code>private</code> &#xBC0F; <code>protected</code> &#xBA64;&#xBC84;&#xAC00; &#xC788;&#xB294; &#xD0C0;&#xC785;&#xB4E4;&#xC744; &#xBE44;&#xAD50;&#xD560; &#xB54C;&#xB294; &#xD0C0;&#xC785;&#xC744; &#xB2E4;&#xB974;&#xAC8C; &#xCC98;&#xB9AC;&#xD569;&#xB2C8;&#xB2E4;.
&#xD638;&#xD658;&#xB41C;&#xB2E4;&#xACE0; &#xD310;&#xB2E8;&#xB418;&#xB294; &#xB450; &#xAC1C;&#xC758; &#xD0C0;&#xC785; &#xC911; &#xD55C; &#xCABD;&#xC5D0;&#xC11C; <code>private</code> &#xBA64;&#xBC84;&#xB97C; &#xAC00;&#xC9C0;&#xACE0; &#xC788;&#xB2E4;&#xBA74;, &#xB2E4;&#xB978; &#xD55C; &#xCABD;&#xB3C4; &#xBB34;&#xC870;&#xAC74; &#xB3D9;&#xC77C;&#xD55C; &#xC120;&#xC5B8;&#xC5D0; <code>private</code> &#xBA64;&#xBC84;&#xB97C; &#xAC00;&#xC9C0;&#xACE0; &#xC788;&#xC5B4;&#xC57C; &#xD569;&#xB2C8;&#xB2E4;.
&#xC774;&#xAC83;&#xC740; <code>protected</code> &#xBA64;&#xBC84;&#xC5D0;&#xB3C4; &#xC801;&#xC6A9;&#xB429;&#xB2C8;&#xB2E4;.</p>
<p>&#xC2E4;&#xC81C;&#xB85C; &#xC5B4;&#xB5BB;&#xAC8C; &#xC791;&#xB3D9;&#xD558;&#xB294;&#xC9C0; &#xC54C;&#xC544;&#xBCF4;&#xAE30; &#xC704;&#xD574; &#xB2E4;&#xC74C; &#xC608;&#xC81C;&#xB97C; &#xC0B4;&#xD3B4;&#xBCF4;&#xACA0;&#xC2B5;&#xB2C8;&#xB2E4;:</p>
<pre><code class="lang-ts"><span class="cm-keyword">class</span> <span class="cm-variable">Animal</span> {
    <span class="cm-keyword">private</span> <span class="cm-variable">name</span>: <span class="cm-variable-3">string</span>;
    <span class="cm-keyword">constructor</span>(<span class="cm-variable">theName</span>: <span class="cm-variable-3">string</span>) { <span class="cm-keyword">this</span>.<span class="cm-variable">name</span> <span class="cm-operator">=</span> <span class="cm-variable">theName</span>; }
}

<span class="cm-keyword">class</span> <span class="cm-variable">Rhino</span> <span class="cm-keyword">extends</span> <span class="cm-variable">Animal</span> {
    <span class="cm-keyword">constructor</span>() { <span class="cm-keyword">super</span>(<span class="cm-string">&quot;Rhino&quot;</span>); }
}

<span class="cm-keyword">class</span> <span class="cm-variable">Employee</span> {
    <span class="cm-keyword">private</span> <span class="cm-variable">name</span>: <span class="cm-variable-3">string</span>;
    <span class="cm-keyword">constructor</span>(<span class="cm-variable">theName</span>: <span class="cm-variable-3">string</span>) { <span class="cm-keyword">this</span>.<span class="cm-variable">name</span> <span class="cm-operator">=</span> <span class="cm-variable">theName</span>; }
}

<span class="cm-keyword">let</span> <span class="cm-variable">animal</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Animal</span>(<span class="cm-string">&quot;Goat&quot;</span>);
<span class="cm-keyword">let</span> <span class="cm-variable">rhino</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Rhino</span>();
<span class="cm-keyword">let</span> <span class="cm-variable">employee</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Employee</span>(<span class="cm-string">&quot;Bob&quot;</span>);

<span class="cm-variable">animal</span> <span class="cm-operator">=</span> <span class="cm-variable">rhino</span>;
<span class="cm-variable">animal</span> <span class="cm-operator">=</span> <span class="cm-variable">employee</span>; <span class="cm-comment">// &#xC624;&#xB958;: &apos;Animal&apos;&#xACFC; &apos;Employee&apos;&#xC740; &#xD638;&#xD658;&#xB420; &#xC218; &#xC5C6;&#xC74C;.</span>
</code></pre>
<p>&#xC774; &#xC608;&#xC81C;&#xC5D0;&#xC11C;&#xB294; <code>Animal</code>&#xACFC; <code>Animal</code>&#xC758; &#xD558;&#xC704;&#xD074;&#xB798;&#xC2A4;&#xC778; <code>Rhino</code>&#xAC00; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
<code>Animal</code>&#xACFC; &#xD615;&#xD0DC;&#xAC00; &#xAC19;&#xC544;&#xBCF4;&#xC774;&#xB294; <code>Employee</code>&#xB77C;&#xB294; &#xC0C8;&#xB85C;&#xC6B4; &#xD074;&#xB798;&#xC2A4;&#xB3C4; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xC774; &#xD074;&#xB798;&#xC2A4;&#xB4E4;&#xC758; &#xC778;&#xC2A4;&#xD134;&#xC2A4;&#xB97C; &#xC0DD;&#xC131;&#xD558;&#xC5EC; &#xD560;&#xB2F9;&#xD558;&#xACE0; &#xC5B4;&#xB5BB;&#xAC8C; &#xC791;&#xB3D9;&#xD558;&#xB294;&#xC9C0; &#xC0B4;&#xD3B4;&#xBCF4;&#xACA0;&#xC2B5;&#xB2C8;&#xB2E4;.
<code>Animal</code>&#xACFC; <code>Rhino</code>&#xB294; <code>Animal</code>&#xC758; <code>private name:string</code>&#xC774;&#xB77C;&#xB294; &#xB3D9;&#xC77C;&#xD55C; &#xC120;&#xC5B8;&#xC73C;&#xB85C;&#xBD80;&#xD130; <code>private</code> &#xBD80;&#xBD84;&#xC744; &#xACF5;&#xC720;&#xD558;&#xAE30; &#xB54C;&#xBB38;&#xC5D0; &#xD638;&#xD658;&#xC774; &#xAC00;&#xB2A5;&#xD569;&#xB2C8;&#xB2E4;. &#xD558;&#xC9C0;&#xB9CC; <code>Employee</code> &#xACBD;&#xC6B0;&#xB294; &#xADF8;&#xB807;&#xC9C0; &#xC54A;&#xC2B5;&#xB2C8;&#xB2E4;.
<code>Employee</code>&#xB97C; <code>Animal</code>&#xC5D0; &#xD560;&#xB2F9;&#xD560; &#xB54C;, &#xD0C0;&#xC785;&#xC774; &#xD638;&#xD658;&#xB418;&#xC9C0; &#xC54A;&#xB2E4;&#xB294; &#xC624;&#xB958;&#xAC00; &#xBC1C;&#xC0DD;&#xD569;&#xB2C8;&#xB2E4;.
<code>Employee</code>&#xB294; <code>name</code>&#xC774;&#xB77C;&#xB294; <code>private</code> &#xBA64;&#xBC84;&#xB97C; &#xAC00;&#xC9C0;&#xACE0; &#xC788;&#xC9C0;&#xB9CC;, <code>Animal</code>&#xC5D0;&#xC11C; &#xC120;&#xC5B8;&#xD55C; &#xAC83;&#xC774; &#xC544;&#xB2C8;&#xAE30; &#xB54C;&#xBB38;&#xC785;&#xB2C8;&#xB2E4;.</p>
<h2 id="protected-&#xC774;&#xD574;&#xD558;&#xAE30;-understanding-protected"><code>protected</code> &#xC774;&#xD574;&#xD558;&#xAE30; (Understanding protected)</h2>
<p><code>protected</code> &#xC9C0;&#xC815;&#xC790;&#xB3C4; <code>protected</code>&#xB85C; &#xC120;&#xC5B8;&#xB41C; &#xBA64;&#xBC84;&#xB97C; &#xD30C;&#xC0DD;&#xB41C; &#xD074;&#xB798;&#xC2A4; &#xB0B4;&#xC5D0;&#xC11C; &#xC811;&#xADFC;&#xD560; &#xC218; &#xC788;&#xB2E4;&#xB294; &#xC810;&#xB9CC; &#xC81C;&#xC678;&#xD558;&#xBA74; <code>private</code>&#xC9C0;&#xC815;&#xC790;&#xC640; &#xB9E4;&#xC6B0; &#xC720;&#xC0AC;&#xD558;&#xAC8C; &#xB3D9;&#xC791;&#xD569;&#xB2C8;&#xB2E4;. &#xC608;&#xB97C; &#xB4E4;&#xBA74;,</p>
<pre><code class="lang-ts"><span class="cm-keyword">class</span> <span class="cm-variable">Person</span> {
    <span class="cm-keyword">protected</span> <span class="cm-variable">name</span>: <span class="cm-variable-3">string</span>;
    <span class="cm-keyword">constructor</span>(<span class="cm-variable">name</span>: <span class="cm-variable-3">string</span>) { <span class="cm-keyword">this</span>.<span class="cm-variable">name</span> <span class="cm-operator">=</span> <span class="cm-variable">name</span>; }
}

<span class="cm-keyword">class</span> <span class="cm-variable">Employee</span> <span class="cm-keyword">extends</span> <span class="cm-variable">Person</span> {
    <span class="cm-keyword">private</span> <span class="cm-variable">department</span>: <span class="cm-variable-3">string</span>;

    <span class="cm-keyword">constructor</span>(<span class="cm-variable">name</span>: <span class="cm-variable-3">string</span>, <span class="cm-variable">department</span>: <span class="cm-variable-3">string</span>) {
        <span class="cm-keyword">super</span>(<span class="cm-variable">name</span>);
        <span class="cm-keyword">this</span>.<span class="cm-variable">department</span> <span class="cm-operator">=</span> <span class="cm-variable">department</span>;
    }

    <span class="cm-keyword">public</span> <span class="cm-variable">getElevatorPitch</span>() {
        <span class="cm-keyword">return</span> <span class="cm-string-2">`Hello, my name is ${</span><span class="cm-keyword">this</span>.<span class="cm-property">name</span><span class="cm-string-2">}</span> <span class="cm-string-2">and I work in ${</span><span class="cm-keyword">this</span>.<span class="cm-property">department</span><span class="cm-string-2">}</span><span class="cm-string-2">.`</span>;
    }
}

<span class="cm-keyword">let</span> <span class="cm-variable">howard</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Employee</span>(<span class="cm-string">&quot;Howard&quot;</span>, <span class="cm-string">&quot;Sales&quot;</span>);
<span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">howard</span>.<span class="cm-property">getElevatorPitch</span>());
<span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">howard</span>.<span class="cm-property">name</span>); <span class="cm-comment">// &#xC624;&#xB958;</span>
</code></pre>
<p><code>Person</code> &#xC678;&#xBD80;&#xC5D0;&#xC11C; <code>name</code>&#xC744; &#xC0AC;&#xC6A9;&#xD560; &#xC218; &#xC5C6;&#xC9C0;&#xB9CC;, <code>Employee</code>&#xB294; <code>Person</code>&#xC5D0;&#xC11C; &#xD30C;&#xC0DD;&#xB418;&#xC5C8;&#xAE30; &#xB54C;&#xBB38;&#xC5D0; <code>Employee</code>&#xC758; &#xC778;&#xC2A4;&#xD134;&#xC2A4; &#xBA54;&#xC11C;&#xB4DC; &#xB0B4;&#xC5D0;&#xC11C;&#xB294; &#xC5EC;&#xC804;&#xD788; &#xC0AC;&#xC6A9;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<p>&#xC0DD;&#xC131;&#xC790; &#xB610;&#xD55C; <code>protected</code>&#xB85C; &#xD45C;&#xC2DC;&#xB420; &#xC218;&#xB3C4; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xC774;&#xB294; &#xD074;&#xB798;&#xC2A4;&#xB97C; &#xD3EC;&#xD568;&#xD558;&#xB294; &#xD074;&#xB798;&#xC2A4; &#xC678;&#xBD80;&#xC5D0;&#xC11C; &#xC778;&#xC2A4;&#xD134;&#xC2A4;&#xD654; &#xD560; &#xC218; &#xC5C6;&#xC9C0;&#xB9CC; &#xD655;&#xC7A5; &#xD560; &#xC218; &#xC788;&#xC74C;&#xC744; &#xC758;&#xBBF8;&#xD569;&#xB2C8;&#xB2E4;. &#xC608;&#xB97C; &#xB4E4;&#xBA74;,</p>
<pre><code class="lang-ts"><span class="cm-keyword">class</span> <span class="cm-variable">Person</span> {
    <span class="cm-keyword">protected</span> <span class="cm-variable">name</span>: <span class="cm-variable-3">string</span>;
    <span class="cm-keyword">protected</span> <span class="cm-keyword">constructor</span>(<span class="cm-variable">theName</span>: <span class="cm-variable-3">string</span>) { <span class="cm-keyword">this</span>.<span class="cm-variable">name</span> <span class="cm-operator">=</span> <span class="cm-variable">theName</span>; }
}

<span class="cm-comment">// Employee&#xB294; Person&#xC744; &#xD655;&#xC7A5;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</span>
<span class="cm-keyword">class</span> <span class="cm-variable">Employee</span> <span class="cm-keyword">extends</span> <span class="cm-variable">Person</span> {
    <span class="cm-keyword">private</span> <span class="cm-variable">department</span>: <span class="cm-variable-3">string</span>;

    <span class="cm-keyword">constructor</span>(<span class="cm-variable">name</span>: <span class="cm-variable-3">string</span>, <span class="cm-variable">department</span>: <span class="cm-variable-3">string</span>) {
        <span class="cm-keyword">super</span>(<span class="cm-variable">name</span>);
        <span class="cm-keyword">this</span>.<span class="cm-variable">department</span> <span class="cm-operator">=</span> <span class="cm-variable">department</span>;
    }

    <span class="cm-keyword">public</span> <span class="cm-variable">getElevatorPitch</span>() {
        <span class="cm-keyword">return</span> <span class="cm-string-2">`Hello, my name is ${</span><span class="cm-keyword">this</span>.<span class="cm-property">name</span><span class="cm-string-2">}</span> <span class="cm-string-2">and I work in ${</span><span class="cm-keyword">this</span>.<span class="cm-property">department</span><span class="cm-string-2">}</span><span class="cm-string-2">.`</span>;
    }
}

<span class="cm-keyword">let</span> <span class="cm-variable">howard</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Employee</span>(<span class="cm-string">&quot;Howard&quot;</span>, <span class="cm-string">&quot;Sales&quot;</span>);
<span class="cm-keyword">let</span> <span class="cm-variable">john</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Person</span>(<span class="cm-string">&quot;John&quot;</span>); <span class="cm-comment">// &#xC624;&#xB958;: &apos;Person&apos;&#xC758; &#xC0DD;&#xC131;&#xC790;&#xB294; protected &#xC785;&#xB2C8;&#xB2E4;.</span>
</code></pre>
<h1 id="&#xC77D;&#xAE30;&#xC804;&#xC6A9;-&#xC9C0;&#xC815;&#xC790;-readonly-modifier">&#xC77D;&#xAE30;&#xC804;&#xC6A9; &#xC9C0;&#xC815;&#xC790; (Readonly modifier)</h1>
<p><code>readonly</code>&#xD0A4;&#xC6CC;&#xB4DC;&#xB97C; &#xC0AC;&#xC6A9;&#xD558;&#xC5EC; &#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xB97C; &#xC77D;&#xAE30;&#xC804;&#xC6A9;&#xC73C;&#xB85C; &#xB9CC;&#xB4E4; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.
&#xC77D;&#xAE30;&#xC804;&#xC6A9; &#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xB4E4;&#xC740; &#xC120;&#xC5B8; &#xB610;&#xB294; &#xC0DD;&#xC131;&#xC790;&#xC5D0;&#xC11C; &#xCD08;&#xAE30;&#xD654;&#xD574;&#xC57C; &#xD569;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-keyword">class</span> <span class="cm-variable">Octopus</span> {
    <span class="cm-property">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">numberOfLegs</span>: <span class="cm-variable-3">number</span> <span class="cm-operator">=</span> <span class="cm-number">8</span>;
    <span class="cm-keyword">constructor</span> (<span class="cm-variable">theName</span>: <span class="cm-variable-3">string</span>) {
        <span class="cm-keyword">this</span>.<span class="cm-variable">name</span> <span class="cm-operator">=</span> <span class="cm-variable">theName</span>;
    }
}
<span class="cm-keyword">let</span> <span class="cm-variable">dad</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Octopus</span>(<span class="cm-string">&quot;Man with the 8 strong legs&quot;</span>);
<span class="cm-variable">dad</span>.<span class="cm-property">name</span> <span class="cm-operator">=</span> <span class="cm-string">&quot;Man with the 3-piece suit&quot;</span>; <span class="cm-comment">// &#xC624;&#xB958;! name&#xC740; &#xC77D;&#xAE30;&#xC804;&#xC6A9; &#xC785;&#xB2C8;&#xB2E4;.</span>
</code></pre>
<h2 id="&#xB9E4;&#xAC1C;&#xBCC0;&#xC218;-&#xD504;&#xB85C;&#xD37C;&#xD2F0;-parameter-properties">&#xB9E4;&#xAC1C;&#xBCC0;&#xC218; &#xD504;&#xB85C;&#xD37C;&#xD2F0; (Parameter properties)</h2>
<p>&#xB9C8;&#xC9C0;&#xB9C9; &#xC608;&#xC81C;&#xC758; <code>Octopus</code> &#xD074;&#xB798;&#xC2A4; &#xB0B4;&#xC5D0;&#xC11C; <code>name</code>&#xC774;&#xB77C;&#xB294; &#xC77D;&#xAE30;&#xC804;&#xC6A9; &#xBA64;&#xBC84;&#xC640; <code>theName</code>&#xC774;&#xB77C;&#xB294; &#xC0DD;&#xC131;&#xC790; &#xB9E4;&#xAC1C;&#xBCC0;&#xC218;&#xB97C; &#xC120;&#xC5B8;&#xD588;&#xC2B5;&#xB2C8;&#xB2E4;. &#xC774;&#xB294; <code>Octopus</code>&#xC758; &#xC0DD;&#xC131;&#xC790;&#xAC00; &#xC218;&#xD589;&#xB41C; &#xD6C4;&#xC5D0; <code>theName</code>&#xC758; &#xAC12;&#xC5D0; &#xC811;&#xADFC;&#xD558;&#xAE30; &#xC704;&#xD574;&#xC11C; &#xD544;&#xC694;&#xD569;&#xB2C8;&#xB2E4;. <em>&#xB9E4;&#xAC1C;&#xBCC0;&#xC218; &#xD504;&#xB85C;&#xD37C;&#xD2F0;</em>&#xB97C; &#xC0AC;&#xC6A9;&#xD558;&#xBA74; &#xD55C; &#xACF3;&#xC5D0;&#xC11C; &#xBA64;&#xBC84;&#xB97C; &#xB9CC;&#xB4E4;&#xACE0; &#xCD08;&#xAE30;&#xD654;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;. &#xB2E4;&#xC74C;&#xC740; &#xB9E4;&#xAC1C;&#xBCC0;&#xC218; &#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xB97C; &#xC0AC;&#xC6A9;&#xD55C; &#xB354; &#xAC1C;&#xC815;&#xB41C; <code>Octopus</code>&#xD074;&#xB798;&#xC2A4;&#xC785;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-keyword">class</span> <span class="cm-variable">Octopus</span> {
    <span class="cm-property">readonly</span> <span class="cm-variable">numberOfLegs</span>: <span class="cm-variable-3">number</span> <span class="cm-operator">=</span> <span class="cm-number">8</span>;
    <span class="cm-keyword">constructor</span>(<span class="cm-variable">readonly</span> <span class="cm-variable">name</span>: <span class="cm-variable-3">string</span>) {
    }
}
</code></pre>
<p>&#xC0DD;&#xC131;&#xC790;&#xC5D0; &#xC9E7;&#xC544;&#xC9C4; <code>readonly name: string</code> &#xD30C;&#xB77C;&#xBBF8;&#xD130;&#xB97C; &#xC0AC;&#xC6A9;&#xD558;&#xC5EC; <code>theName</code>&#xC744; &#xC81C;&#xAC70;&#xD558;&#xACE0; <code>name</code> &#xBA64;&#xBC84;&#xB97C; &#xC0DD;&#xC131;&#xD558;&#xACE0; &#xCD08;&#xAE30;&#xD654;&#xD588;&#xC2B5;&#xB2C8;&#xB2E4;. &#xC989; &#xC120;&#xC5B8;&#xACFC; &#xD560;&#xB2F9;&#xC744; &#xD55C; &#xACF3;&#xC73C;&#xB85C; &#xD1B5;&#xD569;&#xD588;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<p>&#xB9E4;&#xAC1C;&#xBCC0;&#xC218; &#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xB294; &#xC811;&#xADFC; &#xC9C0;&#xC815;&#xC790;&#xB098; <code>readonly</code> &#xB610;&#xB294; &#xB458; &#xBAA8;&#xB450;&#xB97C; &#xC0DD;&#xC131;&#xC790; &#xB9E4;&#xAC1C;&#xBCC0;&#xC218;&#xC5D0; &#xC811;&#xB450;&#xC5B4;&#xB85C; &#xBD99;&#xC5EC; &#xC120;&#xC5B8;&#xD569;&#xB2C8;&#xB2E4;. &#xB9E4;&#xAC1C;&#xBCC0;&#xC218; &#xD504;&#xB85C;&#xD37C;&#xD2F0;&#xC5D0; <code>private</code>&#xC744; &#xC0AC;&#xC6A9;&#xD558;&#xBA74; &#xBE44;&#xACF5;&#xAC1C; &#xBA64;&#xBC84;&#xB97C; &#xC120;&#xC5B8;&#xD558;&#xACE0; &#xCD08;&#xAE30;&#xD654;&#xD569;&#xB2C8;&#xB2E4;. &#xB9C8;&#xCC2C;&#xAC00;&#xC9C0;&#xB85C;, <code>public</code>, <code>protected</code>, <code>readonly</code>&#xB3C4; &#xB3D9;&#xC77C;&#xD558;&#xAC8C; &#xC791;&#xC6A9;&#xD569;&#xB2C8;&#xB2E4;.</p>
<h1 id="&#xC811;&#xADFC;&#xC790;-accessors">&#xC811;&#xADFC;&#xC790; (Accessors)</h1>
<p>TypeScript&#xB294; &#xAC1D;&#xCCB4;&#xC758; &#xBA64;&#xBC84;&#xC5D0; &#xB300;&#xD55C; &#xC811;&#xADFC;&#xC744; &#xAC00;&#xB85C;&#xCC44;&#xB294; &#xBC29;&#xC2DD;&#xC73C;&#xB85C; getters/setters&#xB97C; &#xC9C0;&#xC6D0;&#xD569;&#xB2C8;&#xB2E4;. &#xC774;&#xB97C; &#xD1B5;&#xD574; &#xAC01; &#xAC1D;&#xCCB4;&#xC758; &#xBA64;&#xBC84;&#xC5D0; &#xC811;&#xADFC;&#xD558;&#xB294; &#xBC29;&#xBC95;&#xC744; &#xC138;&#xBC00;&#xD558;&#xAC8C; &#xC81C;&#xC5B4;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<p>&#xAC04;&#xB2E8;&#xD55C; &#xD074;&#xB798;&#xC2A4;&#xB97C; <code>get</code>&#xACFC; <code>set</code>&#xC744; &#xC0AC;&#xC6A9;&#xD558;&#xB3C4;&#xB85D; &#xBCC0;&#xD658;&#xD574;&#xBD05;&#xC2DC;&#xB2E4;. &#xBA3C;&#xC800; getters&#xC640; setters&#xAC00; &#xC5C6;&#xB294; &#xC608;&#xC81C;&#xB85C; &#xC2DC;&#xC791;&#xD569;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-keyword">class</span> <span class="cm-variable">Employee</span> {
    <span class="cm-property">fullName</span>: <span class="cm-variable-3">string</span>;
}

<span class="cm-keyword">let</span> <span class="cm-variable">employee</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Employee</span>();
<span class="cm-variable">employee</span>.<span class="cm-property">fullName</span> <span class="cm-operator">=</span> <span class="cm-string">&quot;Bob Smith&quot;</span>;
<span class="cm-keyword">if</span> (<span class="cm-variable">employee</span>.<span class="cm-property">fullName</span>) {
    <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">employee</span>.<span class="cm-property">fullName</span>);
}
</code></pre>
<p>&#xC0AC;&#xB78C;&#xB4E4;&#xC774; &#xC784;&#xC758;&#xB85C; <code>fullName</code>&#xC744; &#xC9C1;&#xC811; &#xC124;&#xC815;&#xD560; &#xC218; &#xC788;&#xB3C4;&#xB85D; &#xD5C8;&#xC6A9;&#xD558;&#xB294; &#xAC83;&#xC740; &#xB9E4;&#xC6B0; &#xD3B8;&#xB9AC;&#xD558;&#xC9C0;&#xB9CC;, &#xC6B0;&#xB9AC;&#xB294; <code>fullName</code>&#xC774; &#xC124;&#xC815;&#xB420; &#xB54C; &#xBA87; &#xAC00;&#xC9C0; &#xC81C;&#xC57D; &#xC870;&#xAC74;&#xC774; &#xC801;&#xC6A9;&#xB418;&#xB294; &#xAC83;&#xC744; &#xC6D0;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<p>&#xC774; &#xBC84;&#xC804;&#xC5D0;&#xC11C;&#xB294; &#xBC31;&#xC5C5; &#xB370;&#xC774;&#xD130;&#xBCA0;&#xC774;&#xC2A4; &#xD544;&#xB4DC;&#xC758; &#xCD5C;&#xB300; &#xAE38;&#xC774;&#xC640; &#xD638;&#xD658;&#xB418;&#xB294;&#xC9C0; &#xD655;&#xC778;&#xD558;&#xAE30; &#xC704;&#xD574; <code>newName</code>&#xC758; &#xAE38;&#xC774;&#xB97C; &#xD655;&#xC778;&#xD558;&#xB294; setter&#xB97C; &#xCD94;&#xAC00;&#xD569;&#xB2C8;&#xB2E4;. &#xB9CC;&#xC57D; &#xCD5C;&#xB300; &#xAE38;&#xC774;&#xB97C; &#xCD08;&#xACFC;&#xD55C;&#xB2E4;&#xBA74;, &#xD074;&#xB77C;&#xC774;&#xC5B8;&#xD2B8; &#xCF54;&#xB4DC;&#xC5D0; &#xBB38;&#xC81C;&#xAC00; &#xC788;&#xB2E4;&#xB294; &#xAC83;&#xC744; &#xC54C;&#xB9AC;&#xAE30; &#xC704;&#xD574; &#xC624;&#xB958;&#xB97C; &#xBC1C;&#xC0DD;&#xC2DC;&#xD0B5;&#xB2C8;&#xB2E4;.</p>
<p>&#xAE30;&#xC874;&#xC758; &#xAE30;&#xB2A5;&#xC744; &#xC720;&#xC9C0;&#xD558;&#xAE30; &#xC704;&#xD574;, <code>fullName</code>&#xC744; &#xC218;&#xC815;&#xD558;&#xC9C0; &#xC54A;&#xB294; &#xAC04;&#xB2E8;&#xD55C; getter&#xB3C4; &#xCD94;&#xAC00;&#xD569;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-keyword">const</span> <span class="cm-variable">fullNameMaxLength</span> <span class="cm-operator">=</span> <span class="cm-number">10</span>;

<span class="cm-keyword">class</span> <span class="cm-variable">Employee</span> {
    <span class="cm-keyword">private</span> <span class="cm-variable">_fullName</span>: <span class="cm-variable-3">string</span>;

    <span class="cm-variable">get</span> <span class="cm-variable">fullName</span>(): <span class="cm-variable-3">string</span> {
        <span class="cm-keyword">return</span> <span class="cm-keyword">this</span>.<span class="cm-variable">_fullName</span>;
    }

    <span class="cm-variable">set</span> <span class="cm-variable">fullName</span>(<span class="cm-variable">newName</span>: <span class="cm-variable-3">string</span>) {
        <span class="cm-keyword">if</span> (<span class="cm-variable">newName</span> <span class="cm-operator">&amp;&amp;</span> <span class="cm-variable">newName</span>.<span class="cm-property">length</span> <span class="cm-operator">&gt;</span> <span class="cm-variable">fullNameMaxLength</span>) {
            <span class="cm-keyword">throw</span> <span class="cm-keyword">new</span> <span class="cm-variable">Error</span>(<span class="cm-string">&quot;fullName has a max length of &quot;</span> <span class="cm-operator">+</span> <span class="cm-variable">fullNameMaxLength</span>);
        }

        <span class="cm-keyword">this</span>.<span class="cm-property">_fullName</span> <span class="cm-operator">=</span> <span class="cm-variable">newName</span>;
    }
}

<span class="cm-keyword">let</span> <span class="cm-variable">employee</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Employee</span>();
<span class="cm-variable">employee</span>.<span class="cm-property">fullName</span> <span class="cm-operator">=</span> <span class="cm-string">&quot;Bob Smith&quot;</span>;
<span class="cm-keyword">if</span> (<span class="cm-variable">employee</span>.<span class="cm-property">fullName</span>) {
    <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">employee</span>.<span class="cm-property">fullName</span>);
}
</code></pre>
<p>&#xC811;&#xADFC;&#xC790;&#xAC00; &#xAC12;&#xC758; &#xAE38;&#xC774;&#xB97C; &#xD655;&#xC778;&#xD558;&#xACE0; &#xC788;&#xB294;&#xC9C0; &#xAC80;&#xC99D;&#xD558;&#xAE30; &#xC704;&#xD574;&#xC11C;, 10&#xC790;&#xAC00; &#xB118;&#xB294; &#xC774;&#xB984;&#xC744; &#xD560;&#xB2F9;&#xD558;&#xACE0; &#xC624;&#xB958;&#xAC00; &#xBC1C;&#xC0DD;&#xD568;&#xC744; &#xD655;&#xC778;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<p>&#xC811;&#xADFC;&#xC790;&#xC5D0; &#xB300;&#xD574; &#xC8FC;&#xC758;&#xD574;&#xC57C; &#xD560; &#xC0AC;&#xD56D;:</p>
<p>&#xBA3C;&#xC800; &#xC811;&#xADFC;&#xC790;&#xB294; ECMAScript 5 &#xC774;&#xC0C1;&#xC744; &#xCD9C;&#xB825;&#xD558;&#xB3C4;&#xB85D; &#xCEF4;&#xD30C;&#xC77C;&#xB7EC;&#xB97C; &#xC124;&#xC815;&#xD574;&#xC57C; &#xD569;&#xB2C8;&#xB2E4;. ECMAScript 3&#xC73C;&#xB85C;&#xC758; &#xD558;&#xD5A5; &#xC870;&#xC815;&#xC740; &#xC9C0;&#xC6D0;&#xB418;&#xC9C0; &#xC54A;&#xC2B5;&#xB2C8;&#xB2E4;. &#xB458;&#xC9F8;, <code>get</code>&#xACFC; <code>set</code>&#xC774; &#xC5C6;&#xB294; &#xC811;&#xADFC;&#xC790;&#xB294; &#xC790;&#xB3D9;&#xC73C;&#xB85C; <code>readonly</code>&#xB85C; &#xC720;&#xCD94;&#xB429;&#xB2C8;&#xB2E4;. &#xC774;&#xB294; &#xD504;&#xB85C;&#xD37C;&#xD2F0; &#xB0B4;&#xC758; &#xC0AC;&#xC6A9;&#xC790;&#xB4E4;&#xC774; &#xBCC0;&#xACBD;&#xD560; &#xC218; &#xC5C6;&#xC74C;&#xC744; &#xC54C; &#xC218; &#xC788;&#xAE30; &#xB54C;&#xBB38;&#xC5D0; &#xCF54;&#xB4DC; &#xB0B4;&#xC5D0;&#xC11C; <code>.d.ts</code> &#xD30C;&#xC77C;&#xC744; &#xC0DD;&#xC131;&#xD560; &#xB54C; &#xC720;&#xC6A9;&#xD569;&#xB2C8;&#xB2E4;.</p>
<h1 id="&#xC804;&#xC5ED;-&#xD504;&#xB85C;&#xD37C;&#xD2F0;-static-properties">&#xC804;&#xC5ED; &#xD504;&#xB85C;&#xD37C;&#xD2F0; (Static Properties)</h1>
<p>&#xC9C0;&#xAE08;&#xAE4C;&#xC9C0;&#xB294; &#xC778;&#xC2A4;&#xD134;&#xC2A4;&#xD654;&#xB420; &#xB54C; &#xAC1D;&#xCCB4;&#xC5D0; &#xBCF4;&#xC774;&#xB294; <em>&#xC778;&#xC2A4;&#xD134;&#xC2A4;</em> &#xBA64;&#xBC84;&#xC5D0; &#xB300;&#xD574;&#xC11C;&#xB9CC; &#xC0B4;&#xD3B4;&#xBCF4;&#xC558;&#xC2B5;&#xB2C8;&#xB2E4;. &#xB610;&#xD55C; &#xC6B0;&#xB9AC;&#xB294; &#xC778;&#xC2A4;&#xD134;&#xC2A4;&#xAC00; &#xC544;&#xB2CC; &#xD074;&#xB798;&#xC2A4; &#xC790;&#xCCB4;&#xC5D0;&#xC11C; &#xBCF4;&#xC774;&#xB294; <em>&#xC804;&#xC5ED;</em> &#xBA64;&#xBC84;&#xB97C; &#xC0DD;&#xC131;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;. &#xC774; &#xC608;&#xC81C;&#xC5D0;&#xC11C;&#xB294; &#xBAA8;&#xB4E0; grid&#xC758; &#xC77C;&#xBC18;&#xC801;&#xC778; &#xAC12;&#xC774;&#xAE30; &#xB54C;&#xBB38;&#xC5D0; origin&#xC5D0; <code>static</code>&#xC744; &#xC0AC;&#xC6A9;&#xD569;&#xB2C8;&#xB2E4;. &#xAC01; &#xC778;&#xC2A4;&#xD134;&#xC2A4;&#xB294; &#xD074;&#xB798;&#xC2A4; &#xC774;&#xB984;&#xC744; &#xC55E;&#xC5D0; &#xBD99;&#xC5EC; &#xC774; &#xAC12;&#xC5D0; &#xC811;&#xADFC;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;. &#xC778;&#xC2A4;&#xD134;&#xC2A4; &#xC811;&#xADFC; &#xC55E;&#xC5D0; <code>this.</code>&#xB97C; &#xBD99;&#xC774;&#xB294; &#xAC83;&#xACFC; &#xBE44;&#xC2B7;&#xD558;&#xAC8C; &#xC5EC;&#xAE30;&#xC120; &#xC804;&#xC5ED; &#xC811;&#xADFC; &#xC55E;&#xC5D0; <code>Grid.</code>&#xB97C; &#xBD99;&#xC785;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-keyword">class</span> <span class="cm-variable">Grid</span> {
    <span class="cm-keyword">static</span> <span class="cm-variable">origin</span> <span class="cm-operator">=</span> {<span class="cm-variable">x</span>: <span class="cm-number">0</span>, <span class="cm-variable">y</span>: <span class="cm-number">0</span>};
    <span class="cm-variable">calculateDistanceFromOrigin</span>(<span class="cm-variable">point</span>: {<span class="cm-variable">x</span>: <span class="cm-variable-3">number</span>; <span class="cm-variable">y</span>: <span class="cm-variable-3">number</span>;}) {
        <span class="cm-keyword">let</span> <span class="cm-variable">xDist</span> <span class="cm-operator">=</span> (<span class="cm-variable">point</span>.<span class="cm-property">x</span> <span class="cm-operator">-</span> <span class="cm-variable">Grid</span>.<span class="cm-property">origin</span>.<span class="cm-property">x</span>);
        <span class="cm-keyword">let</span> <span class="cm-variable">yDist</span> <span class="cm-operator">=</span> (<span class="cm-variable">point</span>.<span class="cm-property">y</span> <span class="cm-operator">-</span> <span class="cm-variable">Grid</span>.<span class="cm-property">origin</span>.<span class="cm-property">y</span>);
        <span class="cm-keyword">return</span> <span class="cm-variable">Math</span>.<span class="cm-property">sqrt</span>(<span class="cm-variable">xDist</span> <span class="cm-operator">*</span> <span class="cm-variable">xDist</span> <span class="cm-operator">+</span> <span class="cm-variable">yDist</span> <span class="cm-operator">*</span> <span class="cm-variable">yDist</span>) <span class="cm-operator">/</span> <span class="cm-keyword">this</span>.<span class="cm-property">scale</span>;
    }
    <span class="cm-keyword">constructor</span> (<span class="cm-keyword">public</span> <span class="cm-variable">scale</span>: <span class="cm-variable-3">number</span>) { }
}

<span class="cm-keyword">let</span> <span class="cm-variable">grid1</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Grid</span>(<span class="cm-number">1.0</span>);  <span class="cm-comment">// 1x scale</span>
<span class="cm-keyword">let</span> <span class="cm-variable">grid2</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Grid</span>(<span class="cm-number">5.0</span>);  <span class="cm-comment">// 5x scale</span>

<span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">grid1</span>.<span class="cm-property">calculateDistanceFromOrigin</span>({<span class="cm-property">x</span>: <span class="cm-number">10</span>, <span class="cm-property">y</span>: <span class="cm-number">10</span>}));
<span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">grid2</span>.<span class="cm-property">calculateDistanceFromOrigin</span>({<span class="cm-property">x</span>: <span class="cm-number">10</span>, <span class="cm-property">y</span>: <span class="cm-number">10</span>}));
</code></pre>
<h1 id="&#xCD94;&#xC0C1;-&#xD074;&#xB798;&#xC2A4;-abstract-classes">&#xCD94;&#xC0C1; &#xD074;&#xB798;&#xC2A4; (Abstract Classes)</h1>
<p>&#xCD94;&#xC0C1; &#xD074;&#xB798;&#xC2A4;&#xB294; &#xB2E4;&#xB978; &#xD074;&#xB798;&#xC2A4;&#xB4E4;&#xC774; &#xD30C;&#xC0DD;&#xB420; &#xC218; &#xC788;&#xB294; &#xAE30;&#xCD08; &#xD074;&#xB798;&#xC2A4;&#xC785;&#xB2C8;&#xB2E4;. &#xCD94;&#xC0C1; &#xD074;&#xB798;&#xC2A4;&#xB294; &#xC9C1;&#xC811; &#xC778;&#xC2A4;&#xD134;&#xC2A4;&#xD654;&#xD560; &#xC218; &#xC5C6;&#xC2B5;&#xB2C8;&#xB2E4;. &#xCD94;&#xC0C1; &#xD074;&#xB798;&#xC2A4;&#xB294; &#xC778;&#xD130;&#xD398;&#xC774;&#xC2A4;&#xC640; &#xB2EC;&#xB9AC; &#xBA64;&#xBC84;&#xC5D0; &#xB300;&#xD55C; &#xAD6C;&#xD604; &#xC138;&#xBD80; &#xC815;&#xBCF4;&#xB97C; &#xD3EC;&#xD568;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;. <code>abstract</code> &#xD0A4;&#xC6CC;&#xB4DC;&#xB294; &#xCD94;&#xC0C1; &#xD074;&#xB798;&#xC2A4;&#xBFD0;&#xB9CC; &#xC544;&#xB2C8;&#xB77C; &#xCD94;&#xC0C1; &#xD074;&#xB798;&#xC2A4; &#xB0B4;&#xC5D0;&#xC11C; &#xCD94;&#xC0C1; &#xBA54;&#xC11C;&#xB4DC;&#xB97C; &#xC815;&#xC758;&#xD558;&#xB294;&#xB370; &#xC0AC;&#xC6A9;&#xB429;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-variable">abstract</span> <span class="cm-keyword">class</span> <span class="cm-variable">Animal</span> {
    <span class="cm-property">abstract</span> <span class="cm-variable">makeSound</span>(): <span class="cm-variable">void</span>;
    <span class="cm-variable">move</span>(): <span class="cm-variable">void</span> {
        <span class="cm-variable">console</span>.<span class="cm-variable">log</span>(<span class="cm-string">&quot;roaming the earth...&quot;</span>);
    }
}
</code></pre>
<p>&#xCD94;&#xC0C1; &#xD074;&#xB798;&#xC2A4; &#xB0B4;&#xC5D0;&#xC11C; &#xCD94;&#xC0C1;&#xC73C;&#xB85C; &#xD45C;&#xC2DC;&#xB41C; &#xBA54;&#xC11C;&#xB4DC;&#xB294; &#xAD6C;&#xD604;&#xC744; &#xD3EC;&#xD568;&#xD558;&#xC9C0; &#xC54A;&#xC73C;&#xBA70; &#xBC18;&#xB4DC;&#xC2DC; &#xD30C;&#xC0DD;&#xB41C; &#xD074;&#xB798;&#xC2A4;&#xC5D0;&#xC11C; &#xAD6C;&#xD604;&#xB418;&#xC5B4;&#xC57C; &#xD569;&#xB2C8;&#xB2E4;. &#xCD94;&#xC0C1; &#xBA54;&#xC11C;&#xB4DC;&#xB294; &#xC778;&#xD130;&#xD398;&#xC774;&#xC2A4; &#xBA54;&#xC11C;&#xB4DC;&#xC640; &#xBE44;&#xC2B7;&#xD55C; &#xBB38;&#xBC95;&#xC744; &#xACF5;&#xC720;&#xD569;&#xB2C8;&#xB2E4;. &#xB458; &#xB2E4; &#xBA54;&#xC11C;&#xB4DC; &#xBCF8;&#xBB38;&#xC744; &#xD3EC;&#xD568;&#xD558;&#xC9C0; &#xC54A;&#xACE0; &#xBA54;&#xC11C;&#xB4DC;&#xB97C; &#xC815;&#xC758;&#xD569;&#xB2C8;&#xB2E4;. &#xADF8;&#xB7EC;&#xB098; &#xCD94;&#xC0C1; &#xBA54;&#xC11C;&#xB4DC;&#xB294; &#xBC18;&#xB4DC;&#xC2DC; <code>abstract</code> &#xD0A4;&#xC6CC;&#xB4DC;&#xB97C; &#xD3EC;&#xD568;&#xD574;&#xC57C; &#xD558;&#xBA70;, &#xC120;&#xD0DD;&#xC801;&#xC73C;&#xB85C; &#xC811;&#xADFC; &#xC9C0;&#xC815;&#xC790;&#xB97C; &#xD3EC;&#xD568;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-variable">abstract</span> <span class="cm-keyword">class</span> <span class="cm-variable">Department</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-variable">printName</span>(): <span class="cm-variable">void</span> {
        <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-string">&quot;Department name: &quot;</span> <span class="cm-operator">+</span> <span class="cm-keyword">this</span>.<span class="cm-property">name</span>);
    }

    <span class="cm-variable">abstract</span> <span class="cm-variable">printMeeting</span>(): <span class="cm-variable">void</span>; <span class="cm-comment">// &#xBC18;&#xB4DC;&#xC2DC; &#xD30C;&#xC0DD;&#xB41C; &#xD074;&#xB798;&#xC2A4;&#xC5D0;&#xC11C; &#xAD6C;&#xD604;&#xB418;&#xC5B4;&#xC57C; &#xD569;&#xB2C8;&#xB2E4;.</span>
}

<span class="cm-keyword">class</span> <span class="cm-variable">AccountingDepartment</span> <span class="cm-keyword">extends</span> <span class="cm-variable">Department</span> {

    <span class="cm-keyword">constructor</span>() {
        <span class="cm-keyword">super</span>(<span class="cm-string">&quot;Accounting and Auditing&quot;</span>); <span class="cm-comment">// &#xD30C;&#xC0DD;&#xB41C; &#xD074;&#xB798;&#xC2A4;&#xC758; &#xC0DD;&#xC131;&#xC790;&#xB294; &#xBC18;&#xB4DC;&#xC2DC; super()&#xB97C; &#xD638;&#xCD9C;&#xD574;&#xC57C; &#xD569;&#xB2C8;&#xB2E4;.</span>
    }

    <span class="cm-variable">printMeeting</span>(): <span class="cm-variable">void</span> {
        <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-string">&quot;The Accounting Department meets each Monday at 10am.&quot;</span>);
    }

    <span class="cm-variable">generateReports</span>(): <span class="cm-variable">void</span> {
        <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-string">&quot;Generating accounting reports...&quot;</span>);
    }
}

<span class="cm-keyword">let</span> <span class="cm-variable">department</span>: <span class="cm-variable-3">Department</span>; <span class="cm-comment">// &#xCD94;&#xC0C1; &#xD0C0;&#xC785;&#xC758; &#xB808;&#xD37C;&#xB7F0;&#xC2A4;&#xB97C; &#xC0DD;&#xC131;&#xD569;&#xB2C8;&#xB2E4;</span>
<span class="cm-variable">department</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Department</span>(); <span class="cm-comment">// &#xC624;&#xB958;: &#xCD94;&#xC0C1; &#xD074;&#xB798;&#xC2A4;&#xB294; &#xC778;&#xC2A4;&#xD134;&#xC2A4;&#xD654; &#xD560; &#xC218; &#xC5C6;&#xC2B5;&#xB2C8;&#xB2E4;</span>
<span class="cm-variable">department</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">AccountingDepartment</span>(); <span class="cm-comment">// &#xCD94;&#xC0C1;&#xC774; &#xC544;&#xB2CC; &#xD558;&#xC704; &#xD074;&#xB798;&#xC2A4;&#xB97C; &#xC0DD;&#xC131;&#xD558;&#xACE0; &#xD560;&#xB2F9;&#xD569;&#xB2C8;&#xB2E4;</span>
<span class="cm-variable">department</span>.<span class="cm-property">printName</span>();
<span class="cm-variable">department</span>.<span class="cm-property">printMeeting</span>();
<span class="cm-variable">department</span>.<span class="cm-property">generateReports</span>(); <span class="cm-comment">// &#xC624;&#xB958;: &#xC120;&#xC5B8;&#xB41C; &#xCD94;&#xC0C1; &#xD0C0;&#xC785;&#xC5D0; &#xBA54;&#xC11C;&#xB4DC;&#xAC00; &#xC874;&#xC7AC;&#xD558;&#xC9C0; &#xC54A;&#xC2B5;&#xB2C8;&#xB2E4;</span>
</code></pre>
<h1 id="&#xACE0;&#xAE09;-&#xAE30;&#xBC95;-advanced-techniques">&#xACE0;&#xAE09; &#xAE30;&#xBC95; (Advanced Techniques)</h1>
<h2 id="&#xC0DD;&#xC131;&#xC790;-&#xD568;&#xC218;-constructor-functions">&#xC0DD;&#xC131;&#xC790; &#xD568;&#xC218; (Constructor functions)</h2>
<p>TypeScript&#xC5D0;&#xC11C;&#xB294; &#xD074;&#xB798;&#xC2A4;&#xB97C; &#xC120;&#xC5B8;&#xD558;&#xBA74; &#xC2E4;&#xC81C;&#xB85C; &#xC5EC;&#xB7EC; &#xAC1C;&#xC758; &#xC120;&#xC5B8;&#xC774; &#xB3D9;&#xC2DC;&#xC5D0; &#xC0DD;&#xC131;&#xB429;&#xB2C8;&#xB2E4;. &#xCCAB; &#xBC88;&#xC9F8;&#xB85C; &#xD074;&#xB798;&#xC2A4;&#xC758; &#xC778;&#xC2A4;&#xD134;&#xC2A4; &#xD0C0;&#xC785;&#xC785;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-keyword">class</span> <span class="cm-variable">Greeter</span> {
    <span class="cm-property">greeting</span>: <span class="cm-variable-3">string</span>;
    <span class="cm-keyword">constructor</span>(<span class="cm-variable">message</span>: <span class="cm-variable-3">string</span>) {
        <span class="cm-keyword">this</span>.<span class="cm-variable">greeting</span> <span class="cm-operator">=</span> <span class="cm-variable">message</span>;
    }
    <span class="cm-variable">greet</span>() {
        <span class="cm-keyword">return</span> <span class="cm-string">&quot;Hello, &quot;</span> <span class="cm-operator">+</span> <span class="cm-keyword">this</span>.<span class="cm-property">greeting</span>;
    }
}

<span class="cm-keyword">let</span> <span class="cm-variable">greeter</span>: <span class="cm-variable-3">Greeter</span>;
<span class="cm-variable">greeter</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Greeter</span>(<span class="cm-string">&quot;world&quot;</span>);
<span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">greeter</span>.<span class="cm-property">greet</span>()); <span class="cm-comment">// &quot;Hello, world&quot;&quot;</span>
</code></pre>
<p>&#xC5EC;&#xAE30;&#xC11C; <code>let greeter: Greeter</code>&#xB77C;&#xACE0; &#xD560; &#xB54C;, <code>Greeter</code> &#xD074;&#xB798;&#xC2A4;&#xC758; &#xC778;&#xC2A4;&#xD134;&#xC2A4; &#xD0C0;&#xC785;&#xC73C;&#xB85C; <code>Greeter</code>&#xB97C; &#xC0AC;&#xC6A9;&#xD569;&#xB2C8;&#xB2E4;. &#xC774;&#xAC83;&#xC740; &#xAC70;&#xC758; &#xB2E4;&#xB978; &#xAC1D;&#xCCB4; &#xC9C0;&#xD5A5; &#xC5B8;&#xC5B4;&#xB97C; &#xC0AC;&#xC6A9;&#xD558;&#xB294; &#xD504;&#xB85C;&#xADF8;&#xB798;&#xBA38;&#xB4E4;&#xC5D0;&#xAC90; &#xC790;&#xC5F0;&#xC2A4;&#xB7EC;&#xC6B4; &#xC131;&#xC9C8;&#xC785;&#xB2C8;&#xB2E4;.</p>
<p>&#xB610;&#xD55C; <em>&#xC0DD;&#xC131;&#xC790; &#xD568;&#xC218;</em>&#xB77C;&#xACE0; &#xBD88;&#xB9AC;&#xB294; &#xB610; &#xB2E4;&#xB978; &#xAC12;&#xC744; &#xC0DD;&#xC131;&#xD558;&#xACE0; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;. &#xC774;&#xAC83;&#xC740; &#xD074;&#xB798;&#xC2A4;&#xC758; &#xC778;&#xC2A4;&#xD134;&#xC2A4;&#xB97C; <code>new</code> &#xD560; &#xB54C; &#xD638;&#xCD9C;&#xB418;&#xB294; &#xD568;&#xC218;&#xC785;&#xB2C8;&#xB2E4;. &#xC2E4;&#xC81C;&#xB85C; &#xC5B4;&#xB5BB;&#xAC8C; &#xBCF4;&#xC774;&#xB294;&#xC9C0; &#xD655;&#xC778;&#xD558;&#xAE30; &#xC704;&#xD574; &#xC704;&#xC758; &#xC608;&#xC81C;&#xC5D0;&#xC11C; &#xB9CC;&#xB4E4;&#xC5B4;&#xC9C4; JavaScript&#xB97C; &#xC0B4;&#xD3B4;&#xBCF4;&#xACA0;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-keyword">let</span> <span class="cm-variable">Greeter</span> <span class="cm-operator">=</span> (<span class="cm-keyword">function</span> () {
    <span class="cm-keyword">function</span> <span class="cm-def">Greeter</span>(<span class="cm-def">message</span>) {
        <span class="cm-keyword">this</span>.<span class="cm-property">greeting</span> <span class="cm-operator">=</span> <span class="cm-variable-2">message</span>;
    }
    <span class="cm-variable-2">Greeter</span>.<span class="cm-property">prototype</span>.<span class="cm-property">greet</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span> () {
        <span class="cm-keyword">return</span> <span class="cm-string">&quot;Hello, &quot;</span> <span class="cm-operator">+</span> <span class="cm-keyword">this</span>.<span class="cm-property">greeting</span>;
    };
    <span class="cm-keyword">return</span> <span class="cm-variable-2">Greeter</span>;
})();

<span class="cm-keyword">let</span> <span class="cm-variable">greeter</span>;
<span class="cm-variable">greeter</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Greeter</span>(<span class="cm-string">&quot;world&quot;</span>);
<span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">greeter</span>.<span class="cm-property">greet</span>()); <span class="cm-comment">// &quot;Hello, world&quot;</span>
</code></pre>
<p>&#xC5EC;&#xAE30;&#xC11C;, <code>let Greeter</code>&#xB294; &#xC0DD;&#xC131;&#xC790; &#xD568;&#xC218;&#xB97C; &#xD560;&#xB2F9;&#xBC1B;&#xC744; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;. <code>new</code>&#xB97C; &#xD638;&#xCD9C;&#xD558;&#xACE0; &#xC774; &#xD568;&#xC218;&#xB97C; &#xC2E4;&#xD589;&#xD560; &#xB54C;, &#xD074;&#xB798;&#xC2A4;&#xC758; &#xC778;&#xC2A4;&#xD134;&#xC2A4;&#xB97C; &#xC5BB;&#xC2B5;&#xB2C8;&#xB2E4;. &#xB610;&#xD55C; &#xC0DD;&#xC131;&#xC790; &#xD568;&#xC218;&#xB294; &#xD074;&#xB798;&#xC2A4;&#xC758; &#xBAA8;&#xB4E0; &#xC804;&#xC5ED; &#xBCC0;&#xC218;&#xB4E4;&#xC744; &#xD3EC;&#xD568;&#xD558;&#xACE0; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;. &#xAC01; &#xD074;&#xB798;&#xC2A4;&#xB97C; &#xC0DD;&#xAC01;&#xD558;&#xB294; &#xB610; &#xB2E4;&#xB978; &#xBC29;&#xBC95;&#xC740; <em>&#xC778;&#xC2A4;&#xD134;&#xC2A4;</em> &#xCE21;&#xBA74;&#xACFC; <em>&#xC815;&#xC801;</em> &#xCE21;&#xBA74;&#xC774; &#xC788;&#xB2E4;&#xB294; &#xAC83; &#xC785;&#xB2C8;&#xB2E4;.</p>
<p>&#xC774; &#xCC28;&#xC774;&#xB97C; &#xBCF4;&#xC5EC;&#xC8FC;&#xAE30; &#xC704;&#xD574; &#xC608;&#xC81C;&#xB97C; &#xC218;&#xC815;&#xD574;&#xBD05;&#xC2DC;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-keyword">class</span> <span class="cm-variable">Greeter</span> {
    <span class="cm-keyword">static</span> <span class="cm-variable">standardGreeting</span> <span class="cm-operator">=</span> <span class="cm-string">&quot;Hello, there&quot;</span>;
    <span class="cm-variable">greeting</span>: <span class="cm-variable-3">string</span>;
    <span class="cm-variable">greet</span>() {
        <span class="cm-keyword">if</span> (<span class="cm-keyword">this</span>.<span class="cm-variable">greeting</span>) {
            <span class="cm-keyword">return</span> <span class="cm-string">&quot;Hello, &quot;</span> <span class="cm-operator">+</span> <span class="cm-keyword">this</span>.<span class="cm-variable">greeting</span>;
        }
        <span class="cm-keyword">else</span> {
            <span class="cm-keyword">return</span> <span class="cm-variable">Greeter</span>.<span class="cm-property">standardGreeting</span>;
        }
    }
}

<span class="cm-keyword">let</span> <span class="cm-variable">greeter1</span>: <span class="cm-variable-3">Greeter</span>;
<span class="cm-variable">greeter1</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Greeter</span>();
<span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">greeter1</span>.<span class="cm-property">greet</span>()); <span class="cm-comment">// &quot;Hello, there&quot;</span>

<span class="cm-keyword">let</span> <span class="cm-variable">greeterMaker</span>: <span class="cm-keyword">typeof</span> <span class="cm-variable">Greeter</span> <span class="cm-operator">=</span> <span class="cm-variable">Greeter</span>;
<span class="cm-variable">greeterMaker</span>.<span class="cm-property">standardGreeting</span> <span class="cm-operator">=</span> <span class="cm-string">&quot;Hey there!&quot;</span>;

<span class="cm-keyword">let</span> <span class="cm-variable">greeter2</span>: <span class="cm-variable-3">Greeter</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">greeterMaker</span>();
<span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">greeter2</span>.<span class="cm-property">greet</span>()); <span class="cm-comment">// &quot;Hey there!&quot;</span>
</code></pre>
<p>&#xC774; &#xC608;&#xC81C;&#xC5D0;&#xC11C; <code>greeter1</code>&#xC740; &#xC774;&#xC804;&#xACFC; &#xBE44;&#xC2B7;&#xD558;&#xAC8C; &#xC791;&#xB3D9;&#xD569;&#xB2C8;&#xB2E4;. <code>Greeter</code> &#xD074;&#xB798;&#xC2A4;&#xB97C; &#xC778;&#xC2A4;&#xD134;&#xC2A4;&#xD654;&#xD558;&#xACE0; &#xC774; &#xAC1D;&#xCCB4;&#xB97C; &#xC0AC;&#xC6A9;&#xD569;&#xB2C8;&#xB2E4;. &#xC774;&#xAC83;&#xC740; &#xC804;&#xC5D0; &#xBCF8; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;.</p>
<p>&#xB2E4;&#xC74C;&#xC73C;&#xB85C;, &#xD074;&#xB798;&#xC2A4;&#xB97C; &#xC9C1;&#xC811; &#xC0AC;&#xC6A9;&#xD569;&#xB2C8;&#xB2E4;. &#xC5EC;&#xAE30;&#xC11C; <code>greeterMaker</code>&#xB77C;&#xB294; &#xC0C8;&#xB85C;&#xC6B4; &#xBCC0;&#xC218;&#xB97C; &#xC0DD;&#xC131;&#xD569;&#xB2C8;&#xB2E4;. &#xC774; &#xBCC0;&#xC218;&#xB294; &#xD074;&#xB798;&#xC2A4; &#xC790;&#xCCB4;&#xB97C; &#xC720;&#xC9C0;&#xD558;&#xAC70;&#xB098; &#xC0DD;&#xC131;&#xC790; &#xD568;&#xC218;&#xB97C; &#xB2E4;&#xB974;&#xAC8C; &#xC124;&#xBA85;&#xD569;&#xB2C8;&#xB2E4;. &#xC5EC;&#xAE30;&#xC11C; <code>typeof Greeter</code>&#xB97C; &#xC0AC;&#xC6A9;&#xD558;&#xC5EC; &#xC778;&#xC2A4;&#xD134;&#xC2A4; &#xD0C0;&#xC785;&#xC774; &#xC544;&#xB2CC; &quot;<code>Greeter</code> &#xD074;&#xB798;&#xC2A4; &#xC790;&#xCCB4;&#xC758; &#xD0C0;&#xC785;&#xC744; &#xC81C;&#xACF5;&#xD569;&#xB2C8;&#xB2E4;&quot;. &#xD639;&#xC740; &#xB354; &#xC815;&#xD655;&#xD558;&#xAC8C; &#xC0DD;&#xC131;&#xC790; &#xD568;&#xC218;&#xC758; &#xD0C0;&#xC785;&#xC778; &quot;<code>Greeter</code>&#xB77C;&#xB294; &#xC2EC;&#xBCFC;&#xC758; &#xD0C0;&#xC785;&#xC744; &#xC81C;&#xACF5;&#xD569;&#xB2C8;&#xB2E4;&quot;. &#xC774; &#xD0C0;&#xC785;&#xC740; <code>Greeter</code> &#xD074;&#xB798;&#xC2A4;&#xC758; &#xC778;&#xC2A4;&#xD134;&#xC2A4;&#xB97C; &#xB9CC;&#xB4DC;&#xB294; &#xC0DD;&#xC131;&#xC790;&#xC640; &#xD568;&#xAED8; Greeter&#xC758; &#xBAA8;&#xB4E0; &#xC815;&#xC801; &#xBA64;&#xBC84;&#xB97C; &#xD3EC;&#xD568;&#xD560; &#xAC83;&#xC785;&#xB2C8;&#xB2E4;. <code>greeterMaker</code>&#xC5D0; <code>new</code>&#xB97C; &#xC0AC;&#xC6A9;&#xD568;&#xC73C;&#xB85C;&#xC368; <code>Greeter</code>&#xC758; &#xC0C8;&#xB85C;&#xC6B4; &#xC778;&#xC2A4;&#xD134;&#xC2A4;&#xB97C; &#xC0DD;&#xC131;&#xD558;&#xACE0; &#xC774;&#xC804;&#xACFC; &#xAC19;&#xC774; &#xD638;&#xCD9C;&#xD569;&#xB2C8;&#xB2E4;.</p>
<h2 id="&#xC778;&#xD130;&#xD398;&#xC774;&#xC2A4;&#xB85C;&#xC368;-&#xD074;&#xB798;&#xC2A4;-&#xC0AC;&#xC6A9;&#xD558;&#xAE30;-using-a-class-as-an-interface">&#xC778;&#xD130;&#xD398;&#xC774;&#xC2A4;&#xB85C;&#xC368; &#xD074;&#xB798;&#xC2A4; &#xC0AC;&#xC6A9;&#xD558;&#xAE30; (Using a class as an interface)</h2>
<p>&#xC55E;&#xC11C; &#xC5B8;&#xAE09;&#xD55C; &#xAC83;&#xCC98;&#xB7FC;, &#xD074;&#xB798;&#xC2A4; &#xC120;&#xC5B8;&#xC740; &#xD074;&#xB798;&#xC2A4;&#xC758; &#xC778;&#xC2A4;&#xD134;&#xC2A4;&#xB97C; &#xB098;&#xD0C0;&#xB0B4;&#xB294; &#xD0C0;&#xC785;&#xACFC; &#xC0DD;&#xC131;&#xC790; &#xD568;&#xC218;&#xB77C;&#xB294; &#xB450; &#xAC00;&#xC9C0;&#xB97C; &#xC0DD;&#xC131;&#xD569;&#xB2C8;&#xB2E4;. &#xD074;&#xB798;&#xC2A4;&#xB294; &#xD0C0;&#xC785;&#xC744; &#xC0DD;&#xC131;&#xD558;&#xAE30; &#xB54C;&#xBB38;&#xC5D0; &#xC778;&#xD130;&#xD398;&#xC774;&#xC2A4;&#xB97C; &#xC0AC;&#xC6A9;&#xD560; &#xC218; &#xC788;&#xB294; &#xB3D9;&#xC77C;&#xD55C; &#xC704;&#xCE58;&#xC5D0;&#xC11C; &#xC0AC;&#xC6A9;&#xD560; &#xC218; &#xC788;&#xC2B5;&#xB2C8;&#xB2E4;.</p>
<pre><code class="lang-ts"><span class="cm-keyword">class</span> <span class="cm-variable">Point</span> {
    <span class="cm-property">x</span>: <span class="cm-variable-3">number</span>;
    <span class="cm-variable">y</span>: <span class="cm-variable-3">number</span>;
}

<span class="cm-keyword">interface</span> <span class="cm-variable">Point3d</span> <span class="cm-keyword">extends</span> <span class="cm-variable">Point</span> {
    <span class="cm-variable">z</span>: <span class="cm-variable-3">number</span>;
}

<span class="cm-keyword">let</span> <span class="cm-variable">point3d</span>: <span class="cm-variable-3">Point3d</span> <span class="cm-operator">=</span> {<span class="cm-property">x</span>: <span class="cm-number">1</span>, <span class="cm-property">y</span>: <span class="cm-number">2</span>, <span class="cm-property">z</span>: <span class="cm-number">3</span>};
</code></pre>

                                
                                </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="Interfaces.html" class="navigation navigation-prev " aria-label="Previous page: 인터페이스">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="Functions.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":"3.4","depth":1,"next":{"title":"함수","level":"3.5","depth":1,"path":"pages/Functions.md","ref":"pages/Functions.md","articles":[]},"previous":{"title":"인터페이스","level":"3.3","depth":1,"path":"pages/Interfaces.md","ref":"pages/Interfaces.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/Classes.md","mtime":"2020-06-09T11:05:38.940Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2020-06-09T11:06:22.432Z"},"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>