mirror of
https://github.com/gnu4cn/ts-learnings.git
synced 2025-01-14 14:20:29 +08:00
717 lines
59 KiB
HTML
717 lines
59 KiB
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">
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="gitbook/style.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">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<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="04_interfaces.html" />
|
|
|
|
|
|
<link rel="prev" href="02_variables_declaration.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="./">
|
|
|
|
|
|
Introduction
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.2" data-path="01_basic_data_types.html">
|
|
|
|
<a href="01_basic_data_types.html">
|
|
|
|
|
|
基本数据类型
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.3" data-path="02_variables_declaration.html">
|
|
|
|
<a href="02_variables_declaration.html">
|
|
|
|
|
|
变量声明
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter active" data-level="1.4" data-path="03_classes.html">
|
|
|
|
<a href="03_classes.html">
|
|
|
|
|
|
类
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.5" data-path="04_interfaces.html">
|
|
|
|
<a href="04_interfaces.html">
|
|
|
|
|
|
接口
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.6" data-path="05_functions.html">
|
|
|
|
<a href="05_functions.html">
|
|
|
|
|
|
函数
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.7" data-path="06_generics.html">
|
|
|
|
<a href="06_generics.html">
|
|
|
|
|
|
泛型
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.8" data-path="07_enums.html">
|
|
|
|
<a href="07_enums.html">
|
|
|
|
|
|
枚举
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " data-level="1.9" data-path="08_type_inference.html">
|
|
|
|
<a href="08_type_inference.html">
|
|
|
|
|
|
类型推导
|
|
|
|
</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">
|
|
|
|
<h2 id="类（classes）">类（Classes）</h2>
|
|
<h2 id="简介">简介</h2>
|
|
<p>传统的JavaScript使用函数与基于原型的继承（prototype-based inheritance），来建立可重用的组件。但这种处理会令到那些习惯于面向对象方法的程序员不自在，面向对象方法有着功能继承、对象建立自类等特性。从ECMAScript 2015, 也就是ES6开始，JavaScript程序员就可以使用面向对象的、基于类的方法，来构建他们的应用了。在TypeScript中，现在就可以用上这些技术，并将其向下编译到可工作于所有主流浏览器与平台的JavaScript，而无需等待下一版的JavaScript。</p>
|
|
<h2 id="关于类">关于类</h2>
|
|
<p>让我们来看一个简单的基于类的实例吧：</p>
|
|
<pre><code class="lang-typescript"><span class="hljs-keyword">class</span> Greeter {
|
|
greeting: <span class="hljs-built_in">string</span>;
|
|
|
|
<span class="hljs-keyword">constructor</span> ( message: string ) {
|
|
<span class="hljs-keyword">this</span>.greeting = message;
|
|
}
|
|
|
|
greet () {
|
|
<span class="hljs-keyword">return</span> <span class="hljs-string">"Hello, "</span> + <span class="hljs-keyword">this</span>.greeting;
|
|
}
|
|
}
|
|
|
|
<span class="hljs-keyword">let</span> greeter = <span class="hljs-keyword">new</span> Greeter (<span class="hljs-string">"world"</span>);
|
|
</code></pre>
|
|
<p>如你之前曾使用过C#或Java, 那么就应该对这段代码的语法比较熟悉了。这里声明了一个新的类<code>Greeter</code>（declare a new class <code>Greeter</code>）。此类有三个成员：一个名为<code>greeting</code>的属性，一个构建器，以及一个方法<code>greet</code>。</p>
|
|
<p>在类中，将注意到当对该类的某个成员进行引用时，在该成员前加上了<code>this.</code>。这就表名那是一个成员访问（a member access）。</p>
|
|
<p>上面代码的最后一行使用<code>new</code>关键字构建出该<code>Greeter</code>类的一个实例（construct an instance of the <code>Greeter</code> class by using <code>new</code>）。这调用了先前所定义的构建函数（constructor, 构建器），从而以该<code>Greeter</code>为外形(shape)，进行新对象的创建，并运行该构造函数对其进行初始化。</p>
|
|
<h2 id="继承（inheritance">继承（Inheritance)</h2>
|
|
<p>在TypeScript中可使用通常的面向对象模式（common object-oriented patterns)。而基于类编程的最为基础模式之一，就是具备运用继承，对既有类加以扩展，从而创建出新类的能力了。</p>
|
|
<p>看看这个示例：</p>
|
|
<pre><code class="lang-typescript"><span class="hljs-keyword">class</span> Animal {
|
|
move ( distanceInMeters: <span class="hljs-built_in">number</span> = <span class="hljs-number">0</span> ) {
|
|
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">`Animal moved <span class="hljs-subst">${distanceInMeters}</span>m.`</span>);
|
|
}
|
|
}
|
|
|
|
<span class="hljs-keyword">class</span> Dog extends Animal {
|
|
bark () {
|
|
<span class="hljs-built_in">console</span>.log (<span class="hljs-string">'Woof! Woof!'</span>);
|
|
}
|
|
}
|
|
|
|
<span class="hljs-keyword">const</span> dog = <span class="hljs-keyword">new</span> Dog ();
|
|
|
|
dog.bark();
|
|
dog.move(<span class="hljs-number">10</span>);
|
|
dog.bark();
|
|
</code></pre>
|
|
<p>此实例给出了最基本的继承特性：类自基类继承属性及方法（classes inherit properties and methods from base classes）。这里的<code>Dog</code>类是一个使用<code>extends</code>关键字，派生自<code>Animal</code>这个 <em>基类（base class）</em> 的 <em>派生（derived）</em> 类。派生类（derived classes）通常被称作 <em>子类（subclass）</em> ，同时基类又通常被叫做 <em>超类（superclass）</em> 。</p>
|
|
<p>因为<code>Dog</code>扩展了来自<code>Animal</code>的功能，所以这里就能创建一个可同时<code>bark()</code>及<code>move()</code>的<code>Dog</code>的实例。</p>
|
|
<p>再来看一个更复杂的示例：</p>
|
|
<pre><code class="lang-typescript"><span class="hljs-keyword">class</span> Animal {
|
|
name: <span class="hljs-built_in">string</span>;
|
|
|
|
<span class="hljs-keyword">constructor</span> (theName: string) { <span class="hljs-keyword">this</span>.name = theName; }
|
|
|
|
move ( distanceInMeters: <span class="hljs-built_in">number</span> = <span class="hljs-number">0</span> ) {
|
|
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">`<span class="hljs-subst">${this.name}</span> moved <span class="hljs-subst">${distanceInMeters}</span>m.`</span>);
|
|
}
|
|
}
|
|
|
|
<span class="hljs-keyword">class</span> Snake extends Animal {
|
|
<span class="hljs-keyword">constructor</span> (name: string) { <span class="hljs-keyword">super</span>(name); }
|
|
|
|
move ( distanceInMeters = <span class="hljs-number">5</span> ) {
|
|
<span class="hljs-built_in">console</span>.log( <span class="hljs-string">"Slithering..."</span> );
|
|
<span class="hljs-keyword">super</span>.move(distanceInMeters);
|
|
}
|
|
}
|
|
|
|
<span class="hljs-keyword">class</span> Horse extends Animal {
|
|
<span class="hljs-keyword">constructor</span> (name: string) { <span class="hljs-keyword">super</span>(name); }
|
|
|
|
move (distanceInMeters = <span class="hljs-number">45</span>) {
|
|
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Galloping..."</span>);
|
|
<span class="hljs-keyword">super</span>.move(distanceInMeters);
|
|
}
|
|
}
|
|
|
|
<span class="hljs-keyword">let</span> sam = <span class="hljs-keyword">new</span> Snake(<span class="hljs-string">"Sammy the Python"</span>);
|
|
<span class="hljs-keyword">let</span> tom: Animal = <span class="hljs-keyword">new</span> Horse(<span class="hljs-string">"Tommy the Palomino"</span>);
|
|
|
|
sam.move();
|
|
tom.move(<span class="hljs-number">34</span>);
|
|
</code></pre>
|
|
<p>这个示例涵盖了一些前面没有提到的其它特性。再度看到使用了<code>extends</code>关键字建立了<code>Animal</code>的两个新子类：<code>Horse</code>与<code>Snake</code>。</p>
|
|
<p>与前一示例的一点不同，就是每个含有构建器的派生类，都 <strong>必须</strong> 调用<code>super()</code>这个方法，以执行到基类的构造函数，否则编译器将报错（<code>error TS2377: Constructors for derived classes must contain a 'super' call.</code>, 及<code>error TS17009: 'super' must be called before accessing 'this' in the constructor of a derived class</code>）。此外，在构造函数体中，于访问<code>this</code>上的某个属性之前， <strong>必须</strong> 先调用<code>super()</code>方法。TypeScript编译器将强制执行此一规则。</p>
|
|
<p>该示例还展示了怎样以特定于子类的方法，覆写基类中方法。这里的<code>Snake</code>与<code>Horse</code>都创建了一个覆写<code>Animal</code>中的<code>move()</code>方法的<code>move()</code>方法，从而赋予其针对不同类的特定功能。请注意就算<code>tom</code>是作为一个<code>Animal</code>加以声明的，其值还是一个<code>Horse</code>， 对<code>tom.move(34)</code>的调用，将调用到<code>Horse</code>中所覆写的方法：</p>
|
|
<pre><code class="lang-bash">Slithering...
|
|
Sammy the Python moved 5m.
|
|
Galloping...
|
|
Tommy the Palomino moved 34m.
|
|
</code></pre>
|
|
<h2 id="公共属性、私有属性与受保护的修改器（public-private-and-protected-modifiers）">公共属性、私有属性与受保护的修改器（Public, Private and protected modifiers）</h2>
|
|
<h3 id="属性默认是公共的（public-by-default）">属性默认是公共的（Public by default）</h3>
|
|
<p>在上面这些示例中，可在整个程序中自由地访问到所声明的那些成员。如你熟悉其它语言中的类，那么就可能已经注意到上面的示例中，不必使用<code>public</code>关键字来达到此目的；比如，C#就要求显式地给成员打上<code>public</code>标签，以令到其对外部可见。而在TypeScript中，默认各成员都是公共的。</p>
|
|
<p>当然也可以将某个成员显式地标记为<code>public</code>。可以下面的形式编写上一小节中的<code>Animal</code>类：</p>
|
|
<pre><code class="lang-typescript"><span class="hljs-keyword">class</span> Animal {
|
|
<span class="hljs-keyword">public</span> name: <span class="hljs-built_in">string</span>;
|
|
|
|
<span class="hljs-keyword">public</span> <span class="hljs-keyword">constructor</span> ( theName: string ) { <span class="hljs-keyword">this</span>.name = theName; }
|
|
|
|
<span class="hljs-keyword">public</span> move ( distanceInMeters: <span class="hljs-built_in">number</span> ) {
|
|
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">`<span class="hljs-subst">${this.name}</span> moved <span class="hljs-subst">${distanceInMeters}</span>m.`</span>);
|
|
}
|
|
}
|
|
</code></pre>
|
|
<h3 id="掌握private">掌握<code>private</code></h3>
|
|
<p>当某个成员被标记为<code>private</code>时，其就不能从包含它的类的外部访问到了。比如：</p>
|
|
<pre><code class="lang-typescript"><span class="hljs-keyword">class</span> Animal {
|
|
<span class="hljs-keyword">private</span> name: <span class="hljs-built_in">string</span>;
|
|
|
|
<span class="hljs-keyword">constructor</span> ( theName: string ) { <span class="hljs-keyword">this</span>.name = theName; }
|
|
}
|
|
|
|
<span class="hljs-keyword">new</span> Animal(<span class="hljs-string">"Cat"</span>).name(); <span class="hljs-comment">// 报错：`name` 是私有的, error TS2341: Property 'name' is private and only accessible within class 'Creature'.</span>
|
|
</code></pre>
|
|
<p>TypeScript是一个结构化的类型系统。在比较两个不同的类型时，无论它们来自何处，自要所有成员是相容的，那么就说两个类型本身也是相容的（TypeScript is a structural type system. When we compare two different types, regardless of where they come from, if the types of all members are compatible, then we say the types themselves are compatible）。</p>
|
|
<p>但在比较两个有着<code>private</code>及<code>protected</code>成员的类型时，将加以不同的对待。对于两个被认为是相容的类型，如其中之一有一个<code>private</code>成员，那么另一个就必须要有一个源自同样声明的<code>private</code>成员。同样的规则也适用于那些<code>protected</code>成员（For two types to be considered compatible, if one of them has a <code>private</code> member, then the other must have a <code>private</code> member that originated in the same declaration. The same applies to <code>protected</code> members）。</p>
|
|
<p>为搞清楚这一规则在实践中如何发挥作用，让我们看看下面的示例：</p>
|
|
<pre><code class="lang-typescript"><span class="hljs-keyword">class</span> Animal {
|
|
<span class="hljs-keyword">private</span> name: <span class="hljs-built_in">string</span>;
|
|
|
|
<span class="hljs-keyword">constructor</span> ( theName: string ) { <span class="hljs-keyword">this</span>.name = theName; }
|
|
}
|
|
|
|
Class Rhino extends Animal {
|
|
<span class="hljs-keyword">constructor</span> () { <span class="hljs-keyword">super</span> (<span class="hljs-string">'Rhino'</span>); }
|
|
}
|
|
|
|
Class Employee {
|
|
<span class="hljs-keyword">private</span> name: <span class="hljs-built_in">string</span>;
|
|
|
|
<span class="hljs-keyword">constructor</span> ( theName: string ) { <span class="hljs-keyword">this</span>.name = theName; }
|
|
}
|
|
|
|
<span class="hljs-keyword">let</span> animal = <span class="hljs-keyword">new</span> Animal (<span class="hljs-string">"Goat"</span>);
|
|
<span class="hljs-keyword">let</span> rhino = <span class="hljs-keyword">new</span> Rhino();
|
|
<span class="hljs-keyword">let</span> employee = <span class="hljs-keyword">new</span> Employee(<span class="hljs-string">'Bob'</span>);
|
|
|
|
animal = rhino;
|
|
animal = employee; <span class="hljs-comment">// 报错： `Animal` 与 `Employee` 并不相容, error TS2322: Type 'Employee' is not assignable to type 'Creature'. Types have separate declarations of a private property 'name'.</span>
|
|
</code></pre>
|
|
<p>此示例有着一个<code>Animal</code>与<code>Rhino</code>, 其中<code>Rhino</code>是<code>Animal</code>的一个子类。同时还有一个新的<code>Employee</code>类，它在形状上看起来与<code>Animal</code>一致。示例中又创建了几个这些类的实例，并尝试进行相互之间的赋值，以看看会发生什么。因为<code>Animal</code>与<code>Rhino</code>共享了来自<code>Animal</code>中的同一声明<code>private name: string</code>的它们形状的<code>private</code>侧，因此它们是相容的（Because <code>Animal</code> and <code>Rhino</code> share the <code>private</code> side of their shape from the same declaration of <code>private name: string</code> in <code>Animal</code>, they are compatible）。但对于<code>Employee</code>却不是这样了。在尝试将一个<code>Employee</code>赋值给<code>Animal</code>时，就得到一个这些类型不相容的错误。就算<code>Employee</code>也有着一个名为<code>name</code>的<code>private</code>成员，但该成员也并不是那个在<code>Animal</code>中所声明的。</p>
|
|
<h3 id="掌握protected">掌握<code>protected</code></h3>
|
|
<p>除了经由<code>protected</code>关键字声明的成员仍可以被派生类的实例所访问外，<code>protected</code>修改器（the <code>protected</code> modifier）与<code>private</code>修改器有着相似的行为。比如：</p>
|
|
<pre><code class="lang-typescript"><span class="hljs-keyword">class</span> Person {
|
|
<span class="hljs-keyword">protected</span> name: <span class="hljs-built_in">string</span>;
|
|
|
|
<span class="hljs-keyword">constructor</span> ( name: string ) { <span class="hljs-keyword">this</span>.name = name; }
|
|
}
|
|
|
|
<span class="hljs-keyword">class</span> Employee extends Person {
|
|
<span class="hljs-keyword">private</span> department: <span class="hljs-built_in">string</span>;
|
|
|
|
<span class="hljs-keyword">constructor</span> ( name: string, department: string ) {
|
|
<span class="hljs-keyword">super</span>(name);
|
|
<span class="hljs-keyword">this</span>.department = department;
|
|
}
|
|
|
|
<span class="hljs-keyword">public</span> getElevatorPitch () {
|
|
<span class="hljs-keyword">return</span> <span class="hljs-string">`Hello, my name is <span class="hljs-subst">${this.name}</span> and I work in <span class="hljs-subst">${this.department}</span>.`</span>;
|
|
}
|
|
}
|
|
|
|
<span class="hljs-keyword">let</span> howard = <span class="hljs-keyword">new</span> Employee (<span class="hljs-string">"Howard"</span>, <span class="hljs-string">"Sales"</span>);
|
|
<span class="hljs-built_in">console</span>.log(howard.getElevatorPitch());
|
|
<span class="hljs-built_in">console</span>.log(howard.name); <span class="hljs-comment">// 报错： error TS2445: Property 'name' is protected and only accessible within class 'Person' and its subclasses.</span>
|
|
</code></pre>
|
|
<h2 id="关于只读修改器（readonly-modifier）">关于只读修改器（Readonly modifier）</h2>
|
|
<p>使用<code>readonly</code>关键字，可令到属性只读。只读的属性 <strong>必须在其声明处或构造函数里进行初始化</strong> 。</p>
|
|
<pre><code class="lang-typescript"><span class="hljs-keyword">class</span> Octopus {
|
|
readonly name: <span class="hljs-built_in">string</span>;
|
|
readonly numberOfLegs = <span class="hljs-number">8</span>;
|
|
|
|
<span class="hljs-keyword">constructor</span> (theName: string) {
|
|
<span class="hljs-keyword">this</span>.name = theName;
|
|
}
|
|
}
|
|
|
|
<span class="hljs-keyword">let</span> dad = <span class="hljs-keyword">new</span> Octopus (<span class="hljs-string">"Man with the 8 strong legs"</span>);
|
|
dad.name = <span class="hljs-string">"Man with the 3-piece suit"</span>; <span class="hljs-comment">// 报错，`name` 是只读的。error TS2540: Cannot assign to 'name' because it is a constant or a read-only property.</span>
|
|
</code></pre>
|
|
<h3 id="参数式属性（parameter-properties）">参数式属性（Parameter properties）</h3>
|
|
<p>上一个示例不得不在<code>Octopus</code>这个类中，声明一个只读成员<code>name</code>，以及一个构建器参数<code>theName</code>，且随后要立即将<code>name</code>设置为<code>theName</code>。这种做法被证明是一种十分常见的做法。通过 <em>参数式属性（parameter properties）</em> 可在一处就完成成员的创建与初始化。下面是使用参数式属性方法，对上一个<code>Octopus</code>类的更进一步修订：</p>
|
|
<pre><code class="lang-typescript"><span class="hljs-keyword">class</span> Octopus {
|
|
readonly numberOfLegs: <span class="hljs-built_in">number</span> = <span class="hljs-number">8</span>;
|
|
|
|
<span class="hljs-keyword">constructor</span> (readonly: name: string) {}
|
|
}
|
|
</code></pre>
|
|
<p>请注意这里完全丢弃了<code>theName</code>，而仅使用构建器上简化的<code>readonly name: string</code>参数，进行<code>name</code>成员的创建与初始化。从而实现了将声明与赋值强固到一个地方。</p>
|
|
<p>参数式属性是通过在构造函数参数前，加上可访问性修改器（<code>public/private/protected</code>）或<code>readonly</code>，抑或同时加上可访问性修改器与<code>readonly</code>，得以声明的。对于一个声明并初始化私有成员的参数化属性，就使用<code>private</code>做前缀；对于<code>public</code>、<code>protected</code>及<code>readonly</code>亦然。</p>
|
|
<h2 id="访问器（accessors）">访问器（Accessors）</h2>
|
|
<p>TypeScript支持以<code>getters/setters</code>方式，来拦截对某对象成员的访问。此特性赋予对各个对象成员的访问以一种更为精良的控制（TypeScript supports getters/setters as a way of intercepting accesses to a member of an object. This gives you a way of having finer-grained control over how a member is accessed on each object）。</p>
|
|
<p>下面将一个简单的类，转换成使用<code>get</code>及<code>set</code>的形式。首先，从没有获取器与设置器（getter and setter）开始：</p>
|
|
<pre><code class="lang-typescript"><span class="hljs-keyword">class</span> Employee {
|
|
fullName: <span class="hljs-built_in">string</span>;
|
|
}
|
|
|
|
<span class="hljs-keyword">let</span> employee = <span class="hljs-keyword">new</span> Employee ();
|
|
|
|
employee.fullName = <span class="hljs-string">"Bob Smith"</span>;
|
|
|
|
<span class="hljs-keyword">if</span> (employee.fullName) {
|
|
<span class="hljs-built_in">console</span>.log(employee.fullName);
|
|
}
|
|
</code></pre>
|
|
<p>尽管允许人为随机对<code>fullName</code>进行直接设置相当方便，但如果某人可以突发奇想地修改名字，那么这样做就可能带来麻烦（while allowing people to randomly set <code>fullName</code> directly is pretty handy, this might get us in trouble if people can change names on a whim）。</p>
|
|
<p>下面一版中，将在允许用户修改<code>employee</code>对象之前，先检查用户是否有一个可用的密码。这是通过把对<code>fullName</code>的直接访问，替换为一个将检查密码的<code>set</code>方法来实现的。同时还加入了一个相应的<code>get</code>方法，以允许这个示例可以无缝地继续工作。</p>
|
|
<pre><code class="lang-typescript"><span class="hljs-keyword">let</span> passcode = <span class="hljs-string">"secret passcode"</span>;
|
|
|
|
<span class="hljs-keyword">class</span> Employer {
|
|
<span class="hljs-keyword">private</span> _fullName: <span class="hljs-built_in">string</span>;
|
|
|
|
<span class="hljs-keyword">get</span> fullName(): <span class="hljs-built_in">string</span> {
|
|
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>._fullName;
|
|
}
|
|
|
|
<span class="hljs-keyword">set</span> fullName(newName: <span class="hljs-built_in">string</span>) {
|
|
<span class="hljs-keyword">if</span> (passcode && passcode === <span class="hljs-string">"secret passcode"</span>) {
|
|
<span class="hljs-keyword">this</span>._fullName = newName;
|
|
}
|
|
<span class="hljs-keyword">else</span> {
|
|
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Error: Unauthenticated update of employer!"</span>)
|
|
}
|
|
}
|
|
}
|
|
|
|
<span class="hljs-keyword">let</span> employer = <span class="hljs-keyword">new</span> Employer ();
|
|
|
|
employer.fullName = <span class="hljs-string">"Bob Smith"</span>;
|
|
|
|
<span class="hljs-keyword">if</span> (employer.fullName) {
|
|
<span class="hljs-built_in">console</span>.log(employer.fullName);
|
|
}
|
|
</code></pre>
|
|
<p>为了证实这里的访问器有对密码进行检查，可修改一下那个密码，看看在其不匹配时，将得到警告没有更新<code>employer</code>权限的消息。</p>
|
|
<p>有关访问器需要注意以下几点：</p>
|
|
<p>首先，访问器特性要求将TypeScript编译器设置到输出为ECMAScript 5或更高版本。降级到ECMAScript 3是不支持的。其次，带有<code>get</code>却没有<code>set</code>的访问器，将自动推理到是<code>readonly</code>成员。这样做在从代码生成到<code>.d.ts</code>文件时是有帮助的，因为用到该属性的人可以明白他们不能修改该属性。</p>
|
|
<h2 id="关于静态属性（static-properties）">关于静态属性（Static Properties）</h2>
|
|
<p>到目前为止，都讨论的是类的 <em>实例（instance）</em> 成员，这些成员都是在对象被实例化了后才出现在对象上的（Up to this point, we've only talked about the <em>instance</em> members of the class, those that show up on the object when it's instantiated）。其实还可以给类创建 <em>静态（static）</em> 成员，所谓静态成员，就是在类本身，而不是示例上可见的成员。下面的示例在<code>origin</code>上使用了<code>static</code>关键字，因为<code>origin</code>是所有<code>Grid</code>的通用值。各个实例通过在<code>origin</code>前加上该类的名字，来访问此值。与在访问实例时在前面加上<code>this.</code>类似，在访问静态成员时，前面加的是<code>Grid.</code>。</p>
|
|
<pre><code class="lang-typescript"><span class="hljs-keyword">class</span> Grid {
|
|
<span class="hljs-keyword">static</span> origin = { x: <span class="hljs-number">0</span>, y: <span class="hljs-number">0</span> };
|
|
|
|
calculateDistanceFromOrigin ( point: { x: <span class="hljs-built_in">number</span>, y: <span class="hljs-built_in">number</span> } ) {
|
|
<span class="hljs-keyword">let</span> xDist = (point.x - Grid.origin.x);
|
|
<span class="hljs-keyword">let</span> yDist = (point.y - Grid.origin.y);
|
|
|
|
<span class="hljs-keyword">return</span> <span class="hljs-built_in">Math</span>.sqrt( xDist * xDist + yDist * yDist ) / <span class="hljs-keyword">this</span>.scale;
|
|
}
|
|
|
|
<span class="hljs-keyword">constructor</span> ( public scale: number ) {};
|
|
}
|
|
|
|
<span class="hljs-keyword">let</span> grid1 = <span class="hljs-keyword">new</span> Grid(<span class="hljs-number">1.0</span>);
|
|
<span class="hljs-keyword">let</span> grid2 = <span class="hljs-keyword">new</span> Grid(<span class="hljs-number">2.0</span>);
|
|
|
|
<span class="hljs-built_in">console</span>.log(grid1.calculateDistanceFromOrigin({x: <span class="hljs-number">10</span>, y: <span class="hljs-number">10</span>}));
|
|
<span class="hljs-built_in">console</span>.log(grid2.calculateDistanceFromOrigin({x: <span class="hljs-number">10</span>, y: <span class="hljs-number">10</span>}));
|
|
</code></pre>
|
|
<h2 id="关于抽象类（abstract-classes）">关于抽象类（Abstract Classes）</h2>
|
|
<p>抽象类是一些可以派生出其它类的基类。抽象类不可以被直接实例化。与接口的不同之处在于，某个抽象类可以包含其成员实现的细节。抽象类及某个抽象类中的抽象方法的定义，是使用<code>abstract</code>关键字完成的（Unlike an interface, an abstract class may contain implementation details for its members. The <code>abstract</code> keyword is used to define abstract classes as well as abstract methods within an abstract class）。</p>
|
|
<pre><code class="lang-typescript"><span class="hljs-keyword">abstract</span> <span class="hljs-keyword">class</span> Animal {
|
|
<span class="hljs-keyword">abstract</span> makeSound(): <span class="hljs-built_in">void</span>;
|
|
|
|
move(): <span class="hljs-built_in">void</span> {
|
|
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"roaming the earth..."</span>);
|
|
}
|
|
}
|
|
</code></pre>
|
|
<p>抽象类中被标记为<code>abstract</code>的方法，不包含其具体实现，而必须要在派生类中加以实现。抽象方法与接口方法有着类似的语法。二者都定义了不带有方法体的某个方法的签名。但抽象方法必须带有<code>abstract</code>关键字，同时可以包含访问修改器（Abstract methods share a similar syntax to interface methods. Both define the signature of a method without including a method body. However, abstract methods must include the <code>abstract</code> keyword and may optionally include access modifiers）。</p>
|
|
<pre><code class="lang-typescript"><span class="hljs-keyword">abstract</span> <span class="hljs-keyword">class</span> Department {
|
|
<span class="hljs-keyword">constructor</span> ( public name: string ) {}
|
|
|
|
printName (): <span class="hljs-built_in">void</span> {
|
|
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Department name: "</span> + <span class="hljs-keyword">this</span>.name);
|
|
}
|
|
|
|
<span class="hljs-keyword">abstract</span> printMeeting (): <span class="hljs-built_in">void</span>; <span class="hljs-comment">// 在派生类中必须实现此方法</span>
|
|
}
|
|
|
|
<span class="hljs-keyword">class</span> AccountingDepartment extends Department {
|
|
<span class="hljs-keyword">constructor</span> () {
|
|
<span class="hljs-keyword">super</span> (<span class="hljs-string">"Accounting and Auditing"</span>); <span class="hljs-comment">// 派生类中的构建器必须调用 `super()` 方法</span>
|
|
}
|
|
|
|
printMeeting (): <span class="hljs-built_in">void</span> {
|
|
<span class="hljs-built_in">console</span>.log (<span class="hljs-string">"The Accounting Department meets each Monday @10am."</span>);
|
|
}
|
|
|
|
generateReports (): <span class="hljs-built_in">void</span> {
|
|
<span class="hljs-built_in">console</span>.log (<span class="hljs-string">"Generating accounting reports..."</span>);
|
|
}
|
|
}
|
|
|
|
<span class="hljs-keyword">let</span> department: Department; <span class="hljs-comment">// 创建一个到抽象类型的引用是没有问题的 </span>
|
|
department = <span class="hljs-keyword">new</span> Department (); <span class="hljs-comment">// 报错： 无法创建某个抽象类的实例 error TS2511: Cannot create an instance of the abstract class 'Department'.</span>
|
|
department = <span class="hljs-keyword">new</span> AccountingDepartment(); <span class="hljs-comment">// 创建非抽象子类的实例并为其赋值，没有问题</span>
|
|
department.printName();
|
|
department.printMeeting();
|
|
department.generateReports(); <span class="hljs-comment">// 报错：该方法并不存在与所声明的抽象类型上 error TS2339: Property 'generateReports' does not exist on type 'Department'.</span>
|
|
</code></pre>
|
|
<h2 id="一些高级技巧（advanced-techniques）">一些高级技巧（Advanced Techniques）</h2>
|
|
<h3 id="关于构建器函数">关于构建器函数</h3>
|
|
<p>当在TypeScript中声明类的时候，实际上就是同时创建出了多个的声明。首先是该类的 <em>实例（instance）</em> 的类型。</p>
|
|
<pre><code class="lang-typescript"><span class="hljs-keyword">class</span> Greeter {
|
|
greeting: <span class="hljs-built_in">string</span>;
|
|
|
|
construtor (msg: <span class="hljs-built_in">string</span>) {
|
|
<span class="hljs-keyword">this</span>.greeting = msg;
|
|
}
|
|
|
|
greet () {
|
|
<span class="hljs-keyword">return</span> <span class="hljs-string">`Hello, <span class="hljs-subst">${this.greeting}</span>`</span>;
|
|
}
|
|
}
|
|
|
|
<span class="hljs-keyword">let</span> greeter: Greeter;
|
|
|
|
greeter = <span class="hljs-keyword">new</span> Greeter(<span class="hljs-string">"World"</span>);
|
|
<span class="hljs-built_in">console</span>.log(greeter.greet());
|
|
</code></pre>
|
|
<p>这里在说到<code>let greeter: Greeter</code>时，就使用了<code>Greeter</code>作为类<code>Greeter</code>的实例的类型。这对于那些其它面向对象语言的程序员来说，几乎是第二天性了（This is almost second nature to programmers from other object-oriented languages）。</p>
|
|
<p>同时还创建出名为<code>构造函数（construtor function）</code>的另一个值。这就是在使用<code>new</code>关键字，建立该类的实例时，所调用的那个函数。为搞清楚该函数实际面貌，请看看下面由以上示例所生成的JavaScript（ES6）：</p>
|
|
<pre><code class="lang-typescript"><span class="hljs-keyword">let</span> Greeter = (<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>)</span>{
|
|
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Greeter</span> (<span class="hljs-params">msg</span>) </span>{
|
|
<span class="hljs-keyword">this</span>.greeting = msg;
|
|
}
|
|
|
|
Greeter.prototype.greet = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
|
|
<span class="hljs-keyword">return</span> <span class="hljs-string">`Hello, <span class="hljs-subst">${this.greeting}</span>`</span>;
|
|
}
|
|
|
|
<span class="hljs-keyword">return</span> Greeter;
|
|
})();
|
|
|
|
<span class="hljs-keyword">let</span> greeter;
|
|
|
|
greeter = <span class="hljs-keyword">new</span> Greeter(<span class="hljs-string">"World"</span>)!
|
|
<span class="hljs-built_in">console</span>.log(greeter.greet());
|
|
</code></pre>
|
|
<p>这里的<code>let Greeter</code> <strong>即将</strong> 被该构造函数赋值（Here, <code>let Greeter</code> is going to be assigned (by) the construtor function）。在调用<code>new</code>并允许此函数时，就得到一个该类的实例。构造函数还包含了该类的所有静态成员（<code>greet()</code>）。还可以把各个类想成是有着一个 <em>实例</em> 端与 <em>静态</em> 端（Another way to think of each class is that there is an <em>instance</em> side and <em>static</em> side）。</p>
|
|
<p>下面对该示例稍加修改，来展示这种区别：</p>
|
|
<pre><code class="lang-typescript"><span class="hljs-keyword">class</span> Greeter {
|
|
<span class="hljs-keyword">static</span> standardGreeting = <span class="hljs-string">"Hello, there"</span>;
|
|
|
|
greeting: <span class="hljs-built_in">string</span>;
|
|
|
|
greet () {
|
|
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.greeting) {
|
|
<span class="hljs-keyword">return</span> <span class="hljs-string">`Hello, <span class="hljs-subst">${this.greeting}</span>`</span>;
|
|
}
|
|
<span class="hljs-keyword">else</span> {
|
|
<span class="hljs-keyword">return</span> Greeter.standardGreeting;
|
|
}
|
|
}
|
|
}
|
|
|
|
<span class="hljs-keyword">let</span> greeter1 : Greeter;
|
|
greeter1 = <span class="hljs-keyword">new</span> Greeter();
|
|
<span class="hljs-built_in">console</span>.log (greeter1.greet());
|
|
|
|
<span class="hljs-keyword">let</span> greeterMaker: <span class="hljs-keyword">typeof</span> Greeter = Greeter;
|
|
greeterMaker.standardGreeting = <span class="hljs-string">"Hey there!"</span>;
|
|
|
|
<span class="hljs-keyword">let</span> greeter2: Greeter = <span class="hljs-keyword">new</span> greeterMaker();
|
|
<span class="hljs-built_in">console</span>.log(greeter2.greet());
|
|
</code></pre>
|
|
<p>本示例中，<code>greeter1</code>的运作与上面类似。对<code>Greeter</code>类进行了初始化，得到并使用了对象<code>greeter1</code>。这样所在前面有见过。</p>
|
|
<p>接下来就直接使用了类<code>Greeter</code>。于此创建了一个名为<code>greeterMaker</code>的新变量。此变量（注：实际上对应的内存单元）将保有类<code>Greeter</code>自身，换种说法就是类<code>Greeter</code>的构造函数（类实际上是构造函数？）。这里使用了<code>typeof Greeter</code>，从而达到“给我类<code>Greeter</code>本身的类型”，而非类示例类型的目的。或者更准确地说，“给我那个名叫<code>Greeter</code>符号的类型”，那就是<code>Greeter</code>类的构造函数的类型了。此类型将包含<code>Greeter</code>的所有静态成员，以及建立<code>Greeter</code>类实例的构造函数。后面通过在<code>greeterMaker</code>上使用<code>new</code>关键字，创建<code>Greeter</code>的新实例，并如之前那样运行它们，就就证实了这一点。</p>
|
|
<h3 id="将类用作接口（using-a-class-as-an-interface）">将类用作接口（Using a class as an interface）</h3>
|
|
<p>正如上一小节所说，一个类的声明，创建出两个东西：该类实例的类型，以及构造函数（a class declaration creates two things: a type representing instances of the class and a constructor function）。因为类创建了类型，所以就可以在那些可使用接口地方使用类。</p>
|
|
<pre><code class="lang-typescript"><span class="hljs-keyword">class</span> Point {
|
|
x: <span class="hljs-built_in">number</span>;
|
|
y: <span class="hljs-built_in">number</span>;
|
|
}
|
|
|
|
<span class="hljs-keyword">interface</span> Point3d <span class="hljs-keyword">extends</span> Point {
|
|
z: <span class="hljs-built_in">number</span>;
|
|
}
|
|
|
|
<span class="hljs-keyword">let</span> point3d: Point3d = { x: <span class="hljs-number">1</span>, y: <span class="hljs-number">2</span>, z: <span class="hljs-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="02_variables_declaration.html" class="navigation navigation-prev " aria-label="Previous page: 变量声明">
|
|
<i class="fa fa-angle-left"></i>
|
|
</a>
|
|
|
|
|
|
<a href="04_interfaces.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":"1.4","depth":1,"next":{"title":"接口","level":"1.5","depth":1,"path":"04_interfaces.md","ref":"04_interfaces.md","articles":[]},"previous":{"title":"变量声明","level":"1.3","depth":1,"path":"02_variables_declaration.md","ref":"02_variables_declaration.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":["livereload"],"pluginsConfig":{"livereload":{},"highlight":{},"search":{},"lunr":{"ignoreSpecialCharacters":false,"maxIndexSize":1000000},"sharing":{"weibo":false,"all":["facebook","google","twitter","weibo","instapaper"],"google":false,"twitter":true,"vk":false,"instapaper":false,"facebook":true},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css","pdf":"styles/pdf.css","epub":"styles/epub.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":"styles/website.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css","pdf":"styles/pdf.css","epub":"styles/epub.css"}},"file":{"path":"03_classes.md","mtime":"2019-04-03T06:43:16.308Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2019-04-04T00:04:23.982Z"},"basePath":".","book":{"language":""}});
|
|
});
|
|
</script>
|
|
</div>
|
|
|
|
|
|
<script src="gitbook/gitbook.js"></script>
|
|
<script src="gitbook/theme.js"></script>
|
|
|
|
|
|
<script src="gitbook/gitbook-plugin-livereload/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>
|
|
|