TypeScript基本使用

TypeScript 是 JavaScript 的一個超集，支援 ECMAScript 6 标準。

• ​​TypeScript 安裝​​
• ​​編譯參數​​
• ​​關鍵字​​
• ​​基礎文法​​

• ​​空白和換行​​
• ​​區分大小寫​​
• ​​分号是可選的​​
• ​​TypeScript 面向對象程式設計執行個體​​

• ​​基礎類型​​

• ​​Any 類型​​
• ​​Null 和 Undefined​​
• ​​never 類型​​

• ​​變量聲明​​

• ​​類型斷言（Type Assertion）​​
• ​​類型推斷​​
• ​​變量作用域​​

• ​​運算符​​

• ​​算術運算符​​
• ​​關系運算符​​
• ​​邏輯運算符​​
• ​​短路運算符(&& 與 ||)​​
• ​​位運算符​​
• ​​指派運算符​​
• ​​三元運算符 (?)​​
• ​​類型運算符​​

• ​​typeof 運算符​​
• ​​instanceof​​

• ​​其他運算符​​

• ​​負号運算符(-)​​
• ​​字元串運算符: 連接配接運算符 (+)​​

• ​​條件語句​​

• ​​switch…case 語句​​

• ​​循環​​

• ​​for 循環​​
• ​​for...in 循環​​
• ​​for…of 、forEach、every 和 some 循環​​
• ​​while 循環​​
• ​​do...while 循環​​
• ​​break 語句​​
• ​​continue 語句​​
• ​​無限循環​​

• ​​函數​​

• ​​可選參數​​
• ​​預設參數​​
• ​​剩餘參數​​
• ​​匿名函數​​
• ​​構造函數​​
• ​​遞歸函數​​
• ​​Lambda 函數​​
• ​​函數重載​​

• ​​Number​​

• ​​prototype 執行個體​​
• ​​Number 對象方法​​

• ​​String（字元串）​​

• ​​String 對象屬性​​
• ​​String 方法​​

• ​​Array(數組)​​

• ​​數組解構​​
• ​​數組疊代​​
• ​​多元數組​​
• ​​數組方法​​

• ​​Map對象​​
• ​​疊代 Map​​
• ​​元組​​
• ​​聯合類型​​
• ​​接口​​

• ​​聯合類型和接口​​
• ​​接口和數組​​
• ​​接口繼承​​

• ​​類​​

• ​​建立類的資料成員​​
• ​​建立執行個體化對象​​
• ​​類的繼承​​
• ​​繼承類的方法重寫​​
• ​​static 關鍵字​​
• ​​instanceof 運算符​​
• ​​通路控制修飾符​​
• ​​類和接口​​

• ​​對象​​

• ​​鴨子類型(Duck Typing)​​

• ​​命名空間​​

• ​​嵌套命名空間​​

• ​​子產品​​
• ​​聲明檔案​​

TypeScript 安裝

安裝 typescript：

npm install -g typescript      

安裝完成後我們可以使用 tsc 指令來執行 TypeScript 的相關代碼，以下是檢視版本号：

$ tsc -v
Version 3.2.2      

然後執行以下指令将 TypeScript 轉換為 JavaScript 代碼：

tsc app.ts      

很多 IDE 都有支援 TypeScript 插件，如：​​Visual Studio​​，Sublime Text 2，WebStorm / PHPStorm，Eclipse 等。

編譯參數

tsc 常用編譯參數如下表所示：

參數	編譯參數說明
–help	顯示幫助資訊
–module	載入擴充子產品
–target	設定 ECMA 版本
–declaration	額外生成一個 .d.ts 擴充名的檔案。
tsc ts-hw.ts --declaration	以上指令會生成 ts-hw.d.ts、ts-hw.js 兩個檔案。
–removeComments	删除檔案的注釋
–out	編譯多個檔案并合并到一個輸出的檔案
–sourcemap	生成一個 sourcemap (.map) 檔案。
sourcemap	是一個存儲源代碼與編譯代碼對應位置映射的資訊檔案。
–module noImplicitAny	在表達式和聲明上有隐含的 any 類型時報錯
–watch	在監視模式下運作編譯器。會監視輸出檔案，在它們改變時重新編譯。

關鍵字

TypeScript 保留關鍵字如下表所示：

break

as

catch

switch

case

if

throw

else

var

number

string

get

module

type

instanceof

typeof

public

private

enum

export

finally

for

while

void

null

super

this

new

in

return

true

false

any

extends

static

let

package

implements

interface

function

do

try

yield

const

continue

基礎文法

空白和換行

TypeScript 會忽略程式中出現的空格、制表符和換行符。

空格、制表符通常用來縮進代碼，使代碼易于閱讀和了解。

區分大小寫

TypeScript 區分大寫和小寫字元。

分号是可選的

每行指令都是一段語句，你可以使用分号或不使用， 分号在 TypeScript 中是可選的，建議使用。

以下代碼都是合法的：

console.log("Runoob")
console.log("Google");      

如果語句寫在同一行則一定需要使用分号來分隔，否則會報錯，如：

console.log("Runoob");console.log("Google");      

TypeScript 面向對象程式設計執行個體

class Site { 
   name():void { 
      console.log("Runoob") 
   } 
} 
var obj = new Site(); 
obj.name();      

編譯後生成的 JavaScript 代碼如下：

var Site = /** @class */ (function () {
    function Site() {
    }
    Site.prototype.name = function () {
        console.log("Runoob");
    };
    return Site;
}());
var obj = new Site();
obj.name();      

基礎類型

TypeScript 包含的資料類型如下表:

資料類型	關鍵字	描述
任意類型	any	聲明為 any 的變量可以賦予任意類型的值。
數字類型	number	雙精度 64 位浮點值。它可以用來表示整數和分數。
let binaryLiteral: number = 0b1010; // 二進制
let octalLiteral: number = 0o744; // 八進制
let decLiteral: number = 6; // 十進制
let hexLiteral: number = 0xf00d; // 十六進制
字元串類型	string	一個字元系列，使用單引号（'）或雙引号（"）來表示字元串類型。反引号（`）來定義多行文本和内嵌表達式。
let name: string = “Runoob”;
let years: number = 5;
let words: string = ​ ​您好，今年是 ${ name } 釋出 ${ years + 1} 周年​ ​;
布爾類型	boolean	表示邏輯值：true 和 false。
let flag: boolean = true;
數組類型	無	聲明變量為數組。
// 在元素類型後面加上[]
let arr: number[] = [1, 2];
// 或者使用數組泛型
let arr: Array = [1, 2];
元組	無	元組類型用來表示已知元素數量和類型的數組，各元素的類型不必相同，對應位置的類型需要相同。
let x: [string, number];
x = [‘Runoob’, 1]; // 運作正常
x = [1, ‘Runoob’]; // 報錯
console.log(x[0]); // 輸出 Runoob
枚舉	enum	枚舉類型用于定義數值集合。
enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log©; // 輸出 2
void	void	用于辨別方法傳回值的類型，表示該方法沒有傳回值。
​ ​function hello(): void {alert("Hello Runoob");}​ ​
null	null	表示對象值缺失。
undefined	undefined	用于初始化變量為一個未定義的值
never	never	never 是其它類型（包括 null 和 undefined）的子類型，代表從不會出現的值。

Any 類型

任意值是 TypeScript 針對程式設計時類型不明确的變量使用的一種資料類型，它常用于以下三種情況。

1. 變量的值會動态改變時，比如來自使用者的輸入，任意值類型可以讓這些變量跳過編譯階段的類型檢查，示例代碼如下：

let x: any = 1;    // 數字類型
 x = 'I am who I am';    // 字元串類型
 x = false;    // 布爾類型      

1. 改寫現有代碼時，任意值允許在編譯時可選擇地包含或移除類型檢查，示例代碼如下：

let x: any = 4;
 x.ifItExists();    // 正确，ifItExists方法在運作時可能存在，但這裡并不會檢查
 x.toFixed();    // 正确      

1. 定義存儲各種類型資料的數組時，示例代碼如下：

let arrayList: any[] = [1, false, 'fine'];
 arrayList[1] = 100;      

Null 和 Undefined

Null 和 Undefined 是其他任何類型（包括 void）的子類型，可以指派給其它類型，如數字類型，此時，指派後的類型會變成 null 或 undefined。而在TypeScript中啟用嚴格的空校驗（–strictNullChecks）特性，就可以使得null 和 undefined 隻能被指派給 void 或本身對應的類型，示例代碼如下：

// 啟用 --strictNullChecks
let x: number;
x = 1; // 編譯正确
x = undefined;    // 編譯錯誤
x = null;    // 編譯錯誤      

上面的例子中變量 x 隻能是數字類型。如果一個類型可能出現 null 或 undefined， 可以用 | 來支援多種類型，示例代碼如下：

// 啟用 --strictNullChecks
let x: number | null | undefined;
x = 1; // 編譯正确
x = undefined;    // 編譯正确
x = null;    // 編譯正确      

never 類型

never 是其它類型（包括 null 和 undefined）的子類型，代表從不會出現的值。這意味着聲明為 never 類型的變量隻能被 never 類型所指派，在函數中它通常表現為抛出異常或無法執行到終止點（例如無限循環），示例代碼如下：

let x: never;
let y: number;

// 編譯錯誤，數字類型不能轉為 never 類型
x = 123;

// 運作正确，never 類型可以指派給 never類型
x = (()=>{ throw new Error('exception')})();

// 運作正确，never 類型可以指派給 數字類型
y = (()=>{ throw new Error('exception')})();

// 傳回值為 never 的函數可以是抛出異常的情況
function error(message: string): never {
    throw new Error(message);
}

// 傳回值為 never 的函數可以是無法被執行到的終止點的情況
function loop(): never {
    while (true) {}
}      

變量聲明

TypeScript 變量的命名規則：

1. 變量名稱可以包含數字和字母。
2. 除了下劃線 _ 和美元 $ 符号外，不能包含其他特殊字元，包括空格。
3. 變量名不能以數字開頭。

聲明變量的類型及初始值：

var [變量名] : [類型] = 值;      

例如：

var uname:string = "Runoob";      

聲明變量的類型，但沒有初始值，變量值會設定為 undefined：

var [變量名] : [類型];      

例如：

var uname:string;      

聲明變量并初始值，但不設定類型，該變量可以是任意類型：

var [變量名] = 值;      

例如：

var uname = "Runoob";      

聲明變量沒有設定類型和初始值，類型可以是任意類型，預設初始值為 undefined：

var [變量名];      

例如：

var uname;      

TypeScript 遵循強類型，如果将不同的類型指派給變量會編譯錯誤，如下執行個體：

var num:number = "hello"     // 這個代碼會編譯錯誤      

類型斷言（Type Assertion）

類型斷言可以用來手動指定一個值的類型，即允許變量從一種類型更改為另一種類型。

文法格式：

<類型>值      

或:

值 as 類型      

執行個體

var str = '1' 
var str2:number = <number> <any> str   //str、str2 是 string 類型
console.log(str2)      

TypeScript 是怎麼确定單個斷言是否足夠

當 S 類型是 T 類型的子集，或者 T 類型是 S 類型的子集時，S 能被成功斷言成 T。這是為了在進行類型斷言時提供額外的安全性，完全毫無根據的斷言是危險的，如果你想這麼做，你可以使用 any。

它之是以不被稱為類型轉換，是因為轉換通常意味着某種運作時的支援。但是，類型斷言純粹是一個編譯時文法，同時，它也是一種為編譯器提供關于如何分析代碼的方法。

類型推斷

當類型沒有給出時，TypeScript 編譯器利用類型推斷來推斷類型。

如果由于缺乏聲明而不能推斷出類型，那麼它的類型被視作預設的動态 any 類型。

var num = 2;    // 類型推斷為 number
console.log("num 變量的值為 "+num); 
num = "12";    // 編譯錯誤
console.log(num);      

變量作用域

TypeScript 有以下幾種作用域：

1. 全局作用域 − 全局變量定義在程式結構的外部，它可以在你代碼的任何位置使用。
2. 類作用域 − 這個變量也可以稱為 字段。類變量聲明在一個類裡頭，但在類的方法外面。 該變量可以通過類的對象來通路。類變量也可以是靜态的，靜态的變量可以通過類名直接通路。
3. 局部作用域 − 局部變量，局部變量隻能在聲明它的一個代碼塊（如：方法）中使用。

運算符

算術運算符

假定 y=5，下面的表格解釋了這些算術運算符的操作：

運算符	描述	例子	x 運算結果	y 運算結果
+	加法	x=y+2	7	5
-	減法	x=y-2	3	5
*	乘法	x=y*2	10	5
/	除法	x=y/2	2.5	5
%	取模（餘數）	x=y%2	1	5
++	自增	x=++y	6	6
x=y++	5	6
–	自減	x=–y	4	4
x=y–	5	4

關系運算符

關系運算符用于計算結果是否為 true 或者 false。

x=5，下面的表格解釋了關系運算符的操作：

運算符	描述	比較	傳回值
==	等于	x==8	false
x==5	true
!=	不等于	x!=8	true
>	大于	x>8	false
<	小于	x<8	true
>=	大于或等于	x>=8	false
<=	小于或等于	x<=8	true

邏輯運算符

邏輯運算符用于測定變量或值之間的邏輯。

給定 x=6 以及 y=3，下表解釋了邏輯運算符：

運算符	描述	例子
&&	and	(x < 10 && y > 1) 為 true
||	or	(x5 || y5) 為 false
!	not	!(x==y) 為 true

短路運算符(&& 與 ||)

&& 與 || 運算符可用于組合表達式。 && 運算符隻有在左右兩個表達式都為 true 時才傳回 true。|| 運算符隻要其中一個表達式為 true ，則該組合表達式就會傳回 true。

位運算符

位操作是程式設計中對位模式按位或二進制數的一進制和二進制操作。

運算符	描述	例子	類似于	結果	十進制
&	AND，按位與處理兩個長度相同的二進制數，兩個相應的二進位都為 1，該位的結果值才為 1，否則為 0。	x = 5 & 1	0101 & 0001	0001	1
|	OR，按位或處理兩個長度相同的二進制數，兩個相應的二進位中隻要有一個為 1，該位的結果值為 1。	x = 5| 1	0101 | 0001	0101	5
~	取反，取反是一進制運算符，對一個二進制數的每一位執行邏輯反操作。使數字 1 成為 0，0 成為 1。	x = ~ 5	~0101	1010	-6
^	異或，按位異或運算，對等長二進制模式按位或二進制數的每一位執行邏輯異按位或操作。操作的結果是如果某位不同則該位為 1，否則該位為 0。	x = 5 ^ 1	0101 ^ 0001	0100	4
<<	左移，把 << 左邊的運算數的各二進位全部左移若幹位，由 << 右邊的數指定移動的位數，高位丢棄，低位補 0。	x = 5 << 1	0101 << 1	1010	10
>>	右移，把 >> 左邊的運算數的各二進位全部右移若幹位，>> 右邊的數指定移動的位數。	x = 5 >> 1	0101 >> 1	0010	2
>>>	無符号右移，與有符号右移位類似，除了左邊一律使用0 補位。	x = 2 >>> 1	0010 >>> 1	0001	1

指派運算符

指派運算符用于給變量指派。

給定 x=10 和 y=5，下面的表格解釋了指派運算符：

運算符	例子	執行個體	x 值
= (指派)	x = y	x = y	x = 5
+= (先進行加運算後指派)	x += y	x = x + y	x = 15
-= (先進行減運算後指派)	x -= y	x = x - y	x = 5
*= (先進行乘運算後指派)	x *= y	x = x * y	x = 50
/= (先進行除運算後指派)	x /= y	x = x / y	x = 2

類似的邏輯運算符也可以與指派運算符聯合使用：<<=, >>=, >>=, &=, |= 與 ^=。

三元運算符 (?)

Test ? expr1 : expr2      

Test − 指定的條件語句

expr1 − 如果條件語句 Test 傳回 true 則傳回該值

expr2 − 如果條件語句 Test 傳回 false 則傳回該值

類型運算符

typeof 運算符

typeof 是一進制運算符，傳回操作數的資料類型。

檢視以下執行個體:

var num = 12 
console.log(typeof num);   //輸出結果: number      

使用 tsc 指令編譯以上代碼得到如下 JavaScript 代碼：

var num = 12;
console.log(typeof num); //輸出結果: number      

instanceof

instanceof 運算符用于判斷對象是否為指定的類型

其他運算符

負号運算符(-)

更改操作數的符号，檢視以下執行個體：

var x:number = 4 
var y = -x; 
console.log("x 值為: ",x);   // 輸出結果 4 
console.log("y 值為: ",y);   // 輸出結果 -4      

字元串運算符: 連接配接運算符 (+)

+ 運算符可以拼接兩個字元串，檢視以下執行個體：

var msg:string = "RUNOOB"+".COM" 
console.log(msg)      

條件語句

在 TypeScript 中，我們可使用以下條件語句：

1. if 語句 - 隻有當指定條件為 true 時，使用該語句來執行代碼
2. if…else 語句 - 當條件為 true 時執行代碼，當條件為 false 時執行其他代碼
3. if…else if…else 語句- 使用該語句來選擇多個代碼塊之一來執行
4. switch 語句 - 使用該語句來選擇多個代碼塊之一來執行

switch…case 語句

一個 switch 語句允許測試一個變量等于多個值時的情況。每個值稱為一個 case，且被測試的變量會對每個 switch case 進行檢查。

switch 語句的文法：

switch(expression){
    case constant-expression  :
       statement(s);
       break; /* 可選的 */
    case constant-expression  :
       statement(s);
       break; /* 可選的 */
  
    /* 您可以有任意數量的 case 語句 */
    default : /* 可選的 */
       statement(s);
}      

switch 語句必須遵循下面的規則：

1. switch 語句中的 expression 是一個常量表達式，必須是一個整型或枚舉類型。
2. 在一個 switch 中可以有任意數量的 case 語句。每個 case 後跟一個要比較的值和一個冒号。
3. case 的 constant-expression 必須與 switch 中的變量具有相同的資料類型，且必須是一個常量或字面量。
4. 當被測試的變量等于 case 中的常量時，case 後跟的語句将被執行，直到遇到 break 語句為止。
5. 當遇到 break 語句時，switch 終止，控制流将跳轉到 switch 語句後的下一行。
6. 不是每一個 case 都需要包含 break。如果 case 語句不包含 break，控制流将會繼續後續的 case，直到遇到 break 為止。
7. 一個 switch 語句可以有一個可選的 default case，出現在 switch 的結尾。default case 可用于在上面所有 case 都不為真時執行一個任務。default case 中的 break 語句不是必需的。

循環

for 循環

for ( init; condition; increment ){
    statement(s);
}      

下面是 for 循環的控制流程解析：

1. init 會首先被執行，且隻會執行一次。這一步允許您聲明并初始化任何循環控制變量。您也可以不在這裡寫任何語句，隻要有一個分号出現即可。
2. 接下來，會判斷 condition。如果為 true，則執行循環主體。如果為 false，則不執行循環主體，且控制流會跳轉到緊接着 for 循環的下一條語句。
3. 在執行完 for 循環主體後，控制流會跳回上面的 increment 語句。該語句允許您更新循環控制變量。該語句可以留白，隻要在條件後有一個分号出現即可。
4. 條件再次被判斷。如果為 true，則執行循環，這個過程會不斷重複（循環主體，然後增加步值，再然後重新判斷條件）。在條件變為 false 時，for 循環終止。

for…in 循環

for…in 語句用于一組值的集合或清單進行疊代輸出。

for (var val in list) { 
    //語句 
}      

val 需要為 string 或 any 類型。

TypeScript

var j:any; 
var n:any = "a b c" 
 
for(j in n) {
    console.log(n[j])  
}      

編譯以上代碼得到如下 JavaScript 代碼：

JavaScript

var j;
var n = "a b c";
for (j in n) {
    console.log(n[j]);
}      

for…of 、forEach、every 和 some 循環

for…of 允許你周遊 Arrays（數組）, Strings（字元串）, Maps（映射）, Sets（集合）等可疊代的資料結構等。

TypeScript for…of 循環

let someArray = [1, "string", false];
 
for (let entry of someArray) {
    console.log(entry); // 1, "string", false
}      

forEach、every 和 some 是 JavaScript 的循環文法，TypeScript 作為 JavaScript 的文法超集，當然預設也是支援的。

因為 forEach 在 iteration 中是無法傳回的，是以可以使用 every 和 some 來取代 forEach。

TypeScript forEach 循環

let list = [4, 5, 6];
list.forEach((val, idx, array) => {
    // val: 目前值
    // idx：目前index
    // array: Array
});      

TypeScript every 循環

let list = [4, 5, 6];
list.every((val, idx, array) => {
    // val: 目前值
    // idx：目前index
    // array: Array
    return true; // Continues
    // Return false will quit the iteration
});      

while 循環

while 語句在給定條件為 true 時，重複執行語句或語句組。循環主體執行之前會先測試條件。

do…while 循環

不像 for 和 while 循環，它們是在循環頭部測試循環條件。do…while 循環是在循環的尾部檢查它的條件。

break 語句

break 語句有以下兩種用法：

1. 當 break 語句出現在一個循環内時，循環會立即終止，且程式流将繼續執行緊接着循環的下一條語句。

2. 它可用于終止 switch 語句中的一個 case。

   如果您使用的是嵌套循環（即一個循環内嵌套另一個循環），break 語句會停止執行最内層的循環，然後開始執行該塊之後的下一行代碼。

continue 語句

continue 語句有點像 break 語句。但它不是強制終止，continue 會跳過目前循環中的代碼，強迫開始下一次循環。

對于 for 循環，continue 語句執行後自增語句仍然會執行。對于 while 和 do…while 循環，continue 語句會重新執行條件判斷語句。

無限循環

無限循環就是一直在運作不會停止的循環。 for 和 while 循環都可以建立無限循環。

for 建立無限循環文法格式：

for(;;) { 
   // 語句
}      

while 建立無限循環文法格式：

while(true) { 
   // 語句
}      

函數

可選參數

在 TypeScript 函數裡，如果我們定義了參數，則我們必須傳入這些參數，除非将這些參數設定為可選，可選參數使用問号辨別 ？。

執行個體

TypeScript

function buildName(firstName: string, lastName: string) {
    return firstName + " " + lastName;
}
 
let result1 = buildName("Bob");                  // 錯誤，缺少參數
let result2 = buildName("Bob", "Adams", "Sr.");  // 錯誤，參數太多了
let result3 = buildName("Bob", "Adams");         // 正确      

以下執行個體，我們将 lastName 設定為可選參數：

TypeScript

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}
 
let result1 = buildName("Bob");  // 正确
let result2 = buildName("Bob", "Adams", "Sr.");  // 錯誤，參數太多了
let result3 = buildName("Bob", "Adams");  // 正确      

可選參數必須跟在必需參數後面。 如果上例我們想讓 firstName 是可選的，lastName 必選，那麼就要調整它們的位置，把 firstName 放在後面。

如果都是可選參數就沒關系。

預設參數

我們也可以設定參數的預設值，這樣在調用函數的時候，如果不傳入該參數的值，則使用預設參數，文法格式為：

function function_name(param1[:type],param2[:type] = default_value) { 
}      

注意：參數不能同時設定為可選和預設。

執行個體

以下執行個體函數的參數 rate 設定了預設值為 0.50，調用該函數時如果未傳入參數則使用該預設值：

TypeScript

function calculate_discount(price:number,rate:number = 0.50) { 
    var discount = price * rate; 
    console.log("計算結果: ",discount); 
} 
calculate_discount(1000) 
calculate_discount(1000,0.30)      

剩餘參數

有一種情況，我們不知道要向函數傳入多少個參數，這時候我們就可以使用剩餘參數來定義。

剩餘參數文法允許我們将一個不确定數量的參數作為一個數組傳入。

TypeScript

function buildName(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}

let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");      

函數的最後一個命名參數 restOfName 以 … 為字首，它将成為一個由剩餘參數組成的數組，索引值從0（包括）到 restOfName.length（不包括）。

TypeScript

function addNumbers(...nums:number[]) {  
    var i;   
    var sum:number = 0; 
    
    for(i = 0;i<nums.length;i++) { 
       sum = sum + nums[i]; 
    } 
    console.log("和為：",sum) 
 } 
 addNumbers(1,2,3) 
 addNumbers(10,10,10,10,10)      

匿名函數

匿名函數是一個沒有函數名的函數。匿名函數在程式運作時動态聲明，除了沒有函數名外，其他的與标準函數一樣。我們可以将匿名函數指派給一個變量，這種表達式就成為函數表達式。

匿名函數自調用：匿名函數自調用在函數後使用 () 即可：

TypeScript

(function () { 
    var x = "Hello!!";   
    console.log(x)     
 })()      

構造函數

TypeScript 也支援使用 JavaScript 内置的構造函數 Function() 來定義函數：

var res = new Function ([arg1[, arg2[, ...argN]],] functionBody)      

參數說明：

arg1, arg2, ... argN：參數清單。
functionBody：一個含有包括函數定義的 JavaScript 語句的字元串。      

執行個體

TypeScript

var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 
console.log(x);      

遞歸函數

遞歸函數即在函數内調用函數本身。

TypeScript

function factorial(number) {
    if (number <= 0) {         // 停止執行
        return 1; 
    } else {     
        return (number * factorial(number - 1));     // 調用自身
    } 
}; 
console.log(factorial(6));      // 輸出 720      

Lambda 函數

Lambda 函數也稱之為箭頭函數。箭頭函數表達式的文法比函數表達式更短。函數隻有一行語句：

( [param1, parma2,…param n] )=>statement;      

函數重載

重載是方法名字相同，而參數不同，傳回類型可以相同也可以不同。

每個重載的方法（或者構造函數）都必須有一個獨一無二的參數類型清單。

TypeScript

function disp(s1:string):void; 
function disp(n1:number,s1:string):void; 
 
function disp(x:any,y?:any):void { 
    console.log(x); 
    console.log(y); 
} 
disp("abc") 
disp(1,"xyz");      

Number

下表列出了 Number 對象支援的屬性：

屬性	描述
MAX_VALUE	可表示的最大的數，MAX_VALUE 屬性值接近于 1.79E+308。大于 MAX_VALUE 的值代表 “Infinity”。
MIN_VALUE	可表示的最小的數，即最接近 0 的正數 (實際上不會變成 0)。最大的負數是 -MIN_VALUE，MIN_VALUE 的值約為 5e-324。小于 MIN_VALUE (“underflow values”) 的值将會轉換為 0。
NaN	非數字值（Not-A-Number）。
NEGATIVE_INFINITY	負無窮大，溢出時傳回該值。該值小于 MIN_VALUE。
POSITIVE_INFINITY	正無窮大，溢出時傳回該值。該值大于 MAX_VALUE。
prototype	Number 對象的靜态屬性。使您有能力向對象添加屬性和方法。
constructor	傳回對建立此對象的 Number 函數的引用。

prototype 執行個體

TypeScript

function employee(id:number,name:string) { 
    this.id = id 
    this.name = name 
} 
 
var emp = new employee(123,"admin") 
employee.prototype.email = "[email protected]" 
 
console.log("員工号: "+emp.id) 
console.log("員工姓名: "+emp.name) 
console.log("員工郵箱: "+emp.email)      

Number 對象方法

Number對象支援以下方法：

序号 方法 & 描述 執行個體

1. toExponential()
 把對象的值轉換為指數計數法。
 //toExponential()
 var num1 = 1225.30
 var val = num1.toExponential();
 console.log(val) // 輸出： 1.2253e+32. toFixed()
 把數字轉換為字元串，并對小數點指定位數。
 var num3 = 177.234
 console.log("num3.toFixed() 為 "+num3.toFixed()) // 輸出：177
 console.log("num3.toFixed(2) 為 "+num3.toFixed(2)) // 輸出：177.23
 console.log("num3.toFixed(6) 為 "+num3.toFixed(6)) // 輸出：177.2340003. toLocaleString()
 把數字轉換為字元串，使用本地數字格式順序。
 var num = new Number(177.1234);
 console.log( num.toLocaleString()); // 輸出：177.12344. toPrecision()
 把數字格式化為指定的長度。
 var num = new Number(7.123456);
 console.log(num.toPrecision()); // 輸出：7.123456
 console.log(num.toPrecision(1)); // 輸出：7
 console.log(num.toPrecision(2)); // 輸出：7.15. toString()
 把數字轉換為字元串，使用指定的基數。數字的基數是 2 ~ 36 之間的整數。若省略該參數，則使用基數 10。
 var num = new Number(10);
 console.log(num.toString()); // 輸出10進制：10
 console.log(num.toString(2)); // 輸出2進制：1010
 console.log(num.toString(8)); // 輸出8進制：126. valueOf()
 傳回一個 Number 對象的原始數字值。
 var num = new Number(10);
 console.log(num.valueOf()); // 輸出：10      

String（字元串）

String 對象屬性

下表列出了 String 對象支援的屬性：

1. constructor

   對建立該對象的函數的引用。

var str = new String( "This is string" ); 
console.log("str.constructor is:" + str.constructor)      

輸出結果：

str.constructor is:function String() { [native code] }      

1. length

   傳回字元串的長度。

var uname = new String("Hello World") 
console.log("Length "+uname.length)  // 輸出 11      

1. prototype

   允許您向對象添加屬性和方法。

function employee(id:number,name:string) { 
    this.id = id 
    this.name = name 
 } 
 var emp = new employee(123,"admin") 
 employee.prototype.email="[email protected]" // 添加屬性 email
 console.log("員工号: "+emp.id) 
 console.log("員工姓名: "+emp.name) 
 console.log("員工郵箱: "+emp.email)      

String 方法

下表列出了 String 對象支援的方法：

1. charAt()

   傳回在指定位置的字元。

var str = new String("RUNOOB"); 
console.log("str.charAt(0) 為:" + str.charAt(0)); // R
console.log("str.charAt(1) 為:" + str.charAt(1)); // U 
console.log("str.charAt(2) 為:" + str.charAt(2)); // N 
console.log("str.charAt(3) 為:" + str.charAt(3)); // O 
console.log("str.charAt(4) 為:" + str.charAt(4)); // O 
console.log("str.charAt(5) 為:" + str.charAt(5)); // B      

1. charCodeAt()

   傳回在指定的位置的字元的 Unicode 編碼。

var str = new String("RUNOOB"); 
console.log("str.charCodeAt(0) 為:" + str.charCodeAt(0)); // 82
console.log("str.charCodeAt(1) 為:" + str.charCodeAt(1)); // 85 
console.log("str.charCodeAt(2) 為:" + str.charCodeAt(2)); // 78 
console.log("str.charCodeAt(3) 為:" + str.charCodeAt(3)); // 79 
console.log("str.charCodeAt(4) 為:" + str.charCodeAt(4)); // 79
console.log("str.charCodeAt(5) 為:" + str.charCodeAt(5)); // 66      

1. concat()

   連接配接兩個或更多字元串，并傳回新的字元串。

var str1 = new String( "RUNOOB" ); 
var str2 = new String( "GOOGLE" ); 
var str3 = str1.concat( str2 ); 
console.log("str1 + str2 : "+str3) // RUNOOBGOOGLE      

1. indexOf()

   傳回某個指定的字元串值在字元串中首次出現的位置。

var str1 = new String( "RUNOOB" ); 

var index = str1.indexOf( "OO" ); 
console.log("查找的字元串位置 :" + index );  // 3      

1. lastIndexOf()

   從後向前搜尋字元串，并從起始位置（0）開始計算傳回字元串最後出現的位置。

var str1 = new String( "This is string one and again string" ); 
var index = str1.lastIndexOf( "string" );
console.log("lastIndexOf 查找到的最後字元串位置 :" + index ); // 29
    
index = str1.lastIndexOf( "one" ); 
console.log("lastIndexOf 查找到的最後字元串位置 :" + index ); // 15      

1. localeCompare()

   用本地特定的順序來比較兩個字元串。

var str1 = new String( "This is beautiful string" );
  
var index = str1.localeCompare( "This is beautiful string");  

console.log("localeCompare first :" + index );  // 0      

1. match()

   查找找到一個或多個正規表達式的比對。

var str="The rain in SPAIN stays mainly in the plain"; 
var n=str.match(/ain/g);  // ain,ain,ain      

1. replace()

   替換與正規表達式比對的子串

var re = /(\w+)\s(\w+)/; 
var str = "zara ali"; 
var newstr = str.replace(re, "$2, $1"); 
console.log(newstr); // ali, zara      

1. search()

   檢索與正規表達式相比對的值

var re = /apples/gi; 
var str = "Apples are round, and apples are juicy.";
if (str.search(re) == -1 ) { 
   console.log("Does not contain Apples" ); 
} else { 
   console.log("Contains Apples" ); 
}      

1. slice()

   提取字元串的片斷，并在新的字元串中傳回被提取的部分。

2. split()

   把字元串分割為子字元串數組。

var str = "Apples are round, and apples are juicy."; 
var splitted = str.split(" ", 3); 
console.log(splitted)  // [ 'Apples', 'are', 'round,' ]      

1. substr()

   從起始索引号提取字元串中指定數目的字元。

2. substring()

   提取字元串中兩個指定的索引号之間的字元。

var str = "RUNOOB GOOGLE TAOBAO FACEBOOK"; 
console.log("(1,2): "    + str.substring(1,2));   // U
console.log("(0,10): "   + str.substring(0, 10)); // RUNOOB GOO
console.log("(5): "      + str.substring(5));     // B GOOGLE TAOBAO FACEBOOK      

1. toLocaleLowerCase()

   根據主機的語言環境把字元串轉換為小寫，隻有幾種語言（如土耳其語）具有地方特有的大小寫映射。

var str = "Runoob Google"; 
console.log(str.toLocaleLowerCase( ));  // runoob google      

1. toLocaleUpperCase()

   據主機的語言環境把字元串轉換為大寫，隻有幾種語言（如土耳其語）具有地方特有的大小寫映射。

var str = "Runoob Google"; 
console.log(str.toLocaleUpperCase( ));  // RUNOOB GOOGLE      

1. toLowerCase()

   把字元串轉換為小寫。

var str = "Runoob Google"; 
console.log(str.toLowerCase( ));  // runoob google      

1. toString()

   傳回字元串。

var str = "Runoob"; 
console.log(str.toString( )); // Runoob      

1. toUpperCase()

   把字元串轉換為大寫。

var str = "Runoob Google"; 
console.log(str.toUpperCase( ));  // RUNOOB GOOGLE      

1. valueOf()

   傳回指定字元串對象的原始值。

var str = new String("Runoob"); 
console.log(str.valueOf( ));  // Runoob      

Array(數組)

TypeScript 聲明數組的文法格式如下所示：

var array_name[:datatype];        //聲明 
array_name = [val1,val2,valn..]   //初始化      

或者直接在聲明時初始化：

var array_name[:datatype] = [val1,val2…valn]      

如果數組聲明時未設定類型，則會被認為是 any 類型，在初始化時根據第一個元素的類型來推斷數組的類型。

建立一個 number 類型的數組：

var numlist:number[] = [2,4,6,8]      

數組解構

我們也可以把數組元素指派給變量，如下所示：

TypeScript

var arr:number[] = [12,13] 
var[x,y] = arr // 将數組的兩個元素指派給變量 x 和 y
console.log(x) 
console.log(y)      

數組疊代

我們可以使用 for 語句來循環輸出數組的各個元素：

TypeScript

var j:any; 
var nums:number[] = [1001,1002,1003,1004] 
 
for(j in nums) { 
    console.log(nums[j]) 
}      

多元數組

一個數組的元素可以是另外一個數組，這樣就構成了多元數組（Multi-dimensional Array）。

最簡單的多元數組是二維數組，定義方式如下：

var arr_name:datatype[][]=[ [val1,val2,val3],[v1,v2,v3] ]      

數組方法

下表列出了一些常用的數組方法：

1. concat()

   連接配接兩個或更多的數組，并傳回結果。

var alpha = ["a", "b", "c"]; 
var numeric = [1, 2, 3];

var alphaNumeric = alpha.concat(numeric); 
console.log("alphaNumeric : " + alphaNumeric );    // a,b,c,1,2,3      

1. every()

   檢測數值元素的每個元素是否都符合條件。

function isBigEnough(element, index, array) { 
        return (element >= 10); 
} 
        
var passed = [12, 5, 8, 130, 44].every(isBigEnough); 
console.log("Test Value : " + passed ); // false      

1. filter()

   檢測數值元素，并傳回符合條件所有元素的數組。

function isBigEnough(element, index, array) { 
   return (element >= 10); 
} 
          
var passed = [12, 5, 8, 130, 44].filter(isBigEnough); 
console.log("Test Value : " + passed ); // 12,130,44      

1. forEach()

   數組每個元素都執行一次回調函數。

let num = [7, 8, 9];
num.forEach(function (value) {
    console.log(value);
}); 
編譯成 JavaScript 代碼：

var num = [7, 8, 9];
num.forEach(function (value) {
    console.log(value);  // 7   8   9
});      

1. indexOf()

   搜尋數組中的元素，并傳回它所在的位置。

如果搜尋不到，傳回值 -1，代表沒有此項。

var index = [12, 5, 8, 130, 44].indexOf(8); 
console.log("index is : " + index );  // 2      

1. join()

   把數組的所有元素放入一個字元串。

var arr = new Array("Google","Runoob","Taobao"); 
          
var str = arr.join(); 
console.log("str : " + str );  // Google,Runoob,Taobao
          
var str = arr.join(", "); 
console.log("str : " + str );  // Google, Runoob, Taobao
          
var str = arr.join(" + "); 
console.log("str : " + str );  // Google + Runoob + Taobao      

1. lastIndexOf()

   傳回一個指定的字元串值最後出現的位置，在一個字元串中的指定位置從後向前搜尋。

var index = [12, 5, 8, 130, 44].lastIndexOf(8); 
console.log("index is : " + index );  // 2      

1. map()

   通過指定函數處理數組的每個元素，并傳回處理後的數組。

var numbers = [1, 4, 9]; 
var roots = numbers.map(Math.sqrt); 
console.log("roots is : " + roots );  // 1,2,3      

1. pop()

   删除數組的最後一個元素并傳回删除的元素。

var numbers = [1, 4, 9]; 
          
var element = numbers.pop(); 
console.log("element is : " + element );  // 9
          
var element = numbers.pop(); 
console.log("element is : " + element );  // 4      

1. push()

   向數組的末尾添加一個或更多元素，并傳回新的長度。

var numbers = new Array(1, 4, 9); 
var length = numbers.push(10); 
console.log("new numbers is : " + numbers );  // 1,4,9,10 
length = numbers.push(20); 
console.log("new numbers is : " + numbers );  // 1,4,9,10,20      

1. reduce()

   将數組元素計算為一個值（從左到右）。

var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; }); 
console.log("total is : " + total );  // 6      

1. reduceRight()

   将數組元素計算為一個值（從右到左）。

var total = [0, 1, 2, 3].reduceRight(function(a, b){ return a + b; }); 
console.log("total is : " + total );  // 6      

1. reverse()

   反轉數組的元素順序。

var arr = [0, 1, 2, 3].reverse(); 
console.log("Reversed array is : " + arr );  // 3,2,1,0      

1. shift()

   删除并傳回數組的第一個元素。

var arr = [10, 1, 2, 3].shift(); 
console.log("Shifted value is : " + arr );  // 10      

1. slice()

   選取數組的的一部分，并傳回一個新數組。

var arr = ["orange", "mango", "banana", "sugar", "tea"]; 
console.log("arr.slice( 1, 2) : " + arr.slice( 1, 2) );  // mango
console.log("arr.slice( 1, 3) : " + arr.slice( 1, 3) );  // mango,banana      

1. some()

   檢測數組元素中是否有元素符合指定條件。

function isBigEnough(element, index, array) { 
   return (element >= 10); 
          
} 
          
var retval = [2, 5, 8, 1, 4].some(isBigEnough);
console.log("Returned value is : " + retval );  // false
          
var retval = [12, 5, 8, 1, 4].some(isBigEnough); 
console.log("Returned value is : " + retval );  // true      

1. sort()

   對數組的元素進行排序。

var arr = new Array("orange", "mango", "banana", "sugar"); 
var sorted = arr.sort(); 
console.log("Returned string is : " + sorted );  // banana,mango,orange,sugar      

1. splice()

   從數組中添加或删除元素。

var arr = ["orange", "mango", "banana", "sugar", "tea"];  
var removed = arr.splice(2, 0, "water");  
console.log("After adding 1: " + arr );    // orange,mango,water,banana,sugar,tea 
console.log("removed is: " + removed); 
          
removed = arr.splice(3, 1);  
console.log("After removing 1: " + arr );  // orange,mango,water,sugar,tea 
console.log("removed is: " + removed);  // banana      

1. toString()

   把數組轉換為字元串，并傳回結果。

var arr = new Array("orange", "mango", "banana", "sugar");         
var str = arr.toString(); 
console.log("Returned string is : " + str );  // orange,mango,banana,sugar      

1. unshift()

   向數組的開頭添加一個或更多元素，并傳回新的長度。

var arr = new Array("orange", "mango", "banana", "sugar"); 
var length = arr.unshift("water"); 
console.log("Returned array is : " + arr );  // water,orange,mango,banana,sugar 
console.log("Length of the array is : " + length ); // 5      

Map對象

Map 對象儲存鍵值對，并且能夠記住鍵的原始插入順序。任何值(對象或者原始值) 都可以作為一個鍵或一個值。

TypeScript 使用 Map 類型和 new 關鍵字來建立 Map：

let myMap = new Map();      

初始化 Map，可以以數組的格式來傳入鍵值對：

let myMap = new Map([
        ["key1", "value1"],
        ["key2", "value2"]
    ]);      

Map 相關的函數與屬性：

map.clear() – 移除 Map 對象的所有鍵/值對 。
map.set() – 設定鍵值對，傳回該 Map 對象。
map.get() – 傳回鍵對應的值，如果不存在，則傳回 undefined。
map.has() – 傳回一個布爾值，用于判斷 Map 中是否包含鍵對應的值。
map.delete() – 删除 Map 中的元素，删除成功傳回 true，失敗傳回 false。
map.size – 傳回 Map 對象鍵/值對的數量。
map.keys() - 傳回一個 Iterator 對象， 包含了 Map 對象中每個元素的鍵 。
map.values() – 傳回一個新的Iterator對象，包含了Map對象中每個元素的值 。      

疊代 Map

Map 對象中的元素是按順序插入的，我們可以疊代 Map 對象，每一次疊代傳回 [key, value] 數組。

TypeScript使用 for…of 來實作疊代：

執行個體 -test.ts 檔案

let nameSiteMapping = new Map();
 
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 2);
nameSiteMapping.set("Taobao", 3);
 
// 疊代 Map 中的 key
for (let key of nameSiteMapping.keys()) {
    console.log(key);                  
}
 
// 疊代 Map 中的 value
for (let value of nameSiteMapping.values()) {
    console.log(value);                 
}
 
// 疊代 Map 中的 key => value
for (let entry of nameSiteMapping.entries()) {
    console.log(entry[0], entry[1]);   
}
 
// 使用對象解析
for (let [key, value] of nameSiteMapping) {
    console.log(key, value);            
}      

元組

我們知道數組中元素的資料類型都一般是相同的（any[] 類型的數組可以不同），如果存儲的元素資料類型不同，則需要使用元組。

元組中允許存儲不同類型的元素，元組可以作為參數傳遞給函數。

建立元組的文法格式如下：

var tuple_name = [value1,value2,value3,…value n]      

聲明一個元組并初始化：

var mytuple = [10,"Runoob"];      

聯合類型

聯合類型（Union Types）可以通過管道(|)将變量設定多種類型，指派時可以根據設定的類型來指派。

聲明一個聯合類型：

TypeScript

var val:string|number 
val = 12 
console.log("數字為 "+ val) 
val = "Runoob" 
console.log("字元串為 " + val)      

也可以将聯合類型作為函數參數使用：

TypeScript

function disp(name:string|string[]) { 
        if(typeof name == "string") { 
                console.log(name) 
        } else { 
                var i; 
                for(i = 0;i<name.length;i++) { 
                console.log(name[i])
                } 
        } 
} 
disp("Runoob") 
console.log("輸出數組....") 
disp(["Runoob","Google","Taobao","Facebook"])      

我們也可以将數組聲明為聯合類型：

TypeScript

var arr:number[]|string[]; 
var i:number; 
arr = [1,2,4] 
console.log("**數字數組**")  
 
for(i = 0;i<arr.length;i++) { 
   console.log(arr[i]) 
}  
 
arr = ["Runoob","Google","Taobao"] 
console.log("**字元串數組**")  
 
for(i = 0;i<arr.length;i++) { 
   console.log(arr[i]) 
}      

接口

接口是一系列抽象方法的聲明，是一些方法特征的集合，這些方法都應該是抽象的，需要由具體的類去實作，然後第三方就可以通過這組抽象方法調用，讓具體的類執行具體的方法。

TypeScript 接口定義如下：

interface interface_name { 
}      

執行個體

以下執行個體中，我們定義了一個接口 IPerson，接着定義了一個變量 customer，它的類型是 IPerson。customer 實作了接口 IPerson 的屬性和方法。

TypeScript

interface IPerson { 
    firstName:string, 
    lastName:string, 
    sayHi: ()=>string 
} 
 
var customer:IPerson = { 
    firstName:"Tom",
    lastName:"Hanks", 
    sayHi: ():string =>{return "Hi there"} 
} 
 
console.log("Customer 對象 ") 
console.log(customer.firstName) 
console.log(customer.lastName) 
console.log(customer.sayHi())  
 
var employee:IPerson = { 
    firstName:"Jim",
    lastName:"Blakes", 
    sayHi: ():string =>{return "Hello!!!"} 
} 
 
console.log("Employee  對象 ") 
console.log(employee.firstName) 
console.log(employee.lastName)      

聯合類型和接口

以下執行個體示範了如何在接口中使用聯合類型：

TypeScript

interface RunOptions { 
    program:string; 
    commandline:string[]|string|(()=>string); 
} 
 
// commandline 是字元串
var options:RunOptions = {program:"test1",commandline:"Hello"}; 
console.log(options.commandline)  
 
// commandline 是字元串數組
options = {program:"test1",commandline:["Hello","World"]}; 
console.log(options.commandline[0]); 
console.log(options.commandline[1]);  
 
// commandline 是一個函數表達式
options = {program:"test1",commandline:()=>{return "**Hello World**";}}; 
 
var fn:any = options.commandline; 
console.log(fn());      

接口和數組

接口中我們可以将數組的索引值和元素設定為不同類型，索引值可以是數字或字元串。

設定元素為字元串類型：

執行個體

interface namelist { 
   [index:number]:string 
} 
 
// 類型一緻，正确
var list2:namelist = ["Google","Runoob","Taobao"]
// 錯誤元素 1 不是 string 類型
// var list2:namelist = ["Runoob",1,"Taobao"]      

接口繼承

接口繼承就是說接口可以通過其他接口來擴充自己。

Typescript 允許接口繼承多個接口。

繼承使用關鍵字 extends。

單接口繼承文法格式：

Child_interface_name extends super_interface_name      

多接口繼承文法格式：

Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name      

繼承的各個接口使用逗号 , 分隔。

單繼承執行個體

TypeScript

interface Person { 
   age:number 
} 
 
interface Musician extends Person { 
   instrument:string 
} 
 
var drummer = <Musician>{}; 
drummer.age = 27 
drummer.instrument = "Drums" 
console.log("年齡:  "+drummer.age)
console.log("喜歡的樂器:  "+drummer.instrument)      

多繼承執行個體

TypeScript

interface IParent1 { 
    v1:number 
} 
 
interface IParent2 { 
    v2:number 
} 
 
interface Child extends IParent1, IParent2 { } 
var Iobj:Child = { v1:12, v2:23} 
console.log("value 1: "+Iobj.v1+" value 2: "+Iobj.v2)      

類

TypeScript 是面向對象的 JavaScript。

類描述了所建立的對象共同的屬性和方法。

TypeScript 支援面向對象的所有特性，比如 類、接口等。

TypeScript 類定義方式如下：

class class_name { 
    // 類作用域
}      

建立類的資料成員

以下執行個體我們聲明了類 Car，包含字段為 engine，構造函數在類執行個體化後初始化字段 engine。

this 關鍵字表示目前類執行個體化的對象。注意構造函數的參數名與字段名相同，this.engine 表示類的字段。

此外我們也在類中定義了一個方法 disp()。

TypeScript

class Car { 
    // 字段 
    engine:string; 
 
    // 構造函數 
    constructor(engine:string) { 
        this.engine = engine 
    }  
 
    // 方法 
    disp():void { 
        console.log("發動機為 :   "+this.engine) 
    } 
}      

建立執行個體化對象

我們使用 new 關鍵字來執行個體化類的對象，文法格式如下：

var object_name = new class_name([ arguments ])      

類執行個體化時會調用構造函數，例如：

var obj = new Car("Engine 1")      

類的繼承

TypeScript 支援繼承類，即我們可以在建立類的時候繼承一個已存在的類，這個已存在的類稱為父類，繼承它的類稱為子類。

類繼承使用關鍵字 extends，子類除了不能繼承父類的私有成員(方法和屬性)和構造函數，其他的都可以繼承。

TypeScript 一次隻能繼承一個類，不支援繼承多個類，但 TypeScript 支援多重繼承（A 繼承 B，B 繼承 C）。

文法格式如下：

class child_class_name extends parent_class_name      

執行個體

類的繼承：執行個體中建立了 Shape 類，Circle 類繼承了 Shape 類，Circle 類可以直接使用 Area 屬性：

TypeScript

class Shape { 
   Area:number 
   
   constructor(a:number) { 
      this.Area = a 
   } 
} 
 
class Circle extends Shape { 
   disp():void { 
      console.log("圓的面積:  "+this.Area) 
   } 
}
  
var obj = new Circle(223); 
obj.disp()      

繼承類的方法重寫

類繼承後，子類可以對父類的方法重新定義，這個過程稱之為方法的重寫。

其中 super 關鍵字是對父類的直接引用，該關鍵字可以引用父類的屬性和方法。

TypeScript

class PrinterClass { 
      doPrint():void {
         console.log("父類的 doPrint() 方法。") 
      } 
   } 
    
class StringPrinter extends PrinterClass { 
   doPrint():void { 
      super.doPrint() // 調用父類的函數
      console.log("子類的 doPrint()方法。")
   } 
}      

static 關鍵字

static 關鍵字用于定義類的資料成員（屬性和方法）為靜态的，靜态成員可以直接通過類名調用。

TypeScript

class StaticMem {  
   static num:number; 
   
   static disp():void { 
      console.log("num 值為 "+ StaticMem.num) 
   } 
} 
 
StaticMem.num = 12     // 初始化靜态變量
StaticMem.disp()       // 調用靜态方法      

instanceof 運算符

instanceof 運算符用于判斷對象是否是指定的類型，如果是傳回 true，否則傳回 false。

TypeScript

class Person{ } 
var obj = new Person() 
var isPerson = obj instanceof Person; 
console.log("obj 對象是 Person 類執行個體化來的嗎？ " + isPerson);      

通路控制修飾符

TypeScript 中，可以使用通路控制符來保護對類、變量、方法和構造方法的通路。TypeScript 支援 3 種不同的通路權限。

1. public（預設） : 公有，可以在任何地方被通路。
2. protected : 受保護，可以被其自身以及其子類通路。
3. private : 私有，隻能被其定義所在的類通路。

以下執行個體定義了兩個變量 str1 和 str2，str1 為 public，str2 為 private，執行個體化後可以通路 str1，如果要通路 str2 則會編譯錯誤。

TypeScript

class Encapsulate { 
   str1:string = "hello" 
   private str2:string = "world" 
}
 
var obj = new Encapsulate() 
console.log(obj.str1)     // 可通路 
console.log(obj.str2)   // 編譯錯誤， str2 是私有的      

類和接口

類可以實作接口，使用關鍵字 implements，并将 interest 字段作為類的屬性使用。

以下執行個體紅 AgriLoan 類實作了 ILoan 接口：

TypeScript

interface ILoan { 
   interest:number 
} 
 
class AgriLoan implements ILoan { 
   interest:number 
   rebate:number 
   
   constructor(interest:number,rebate:number) { 
      this.interest = interest 
      this.rebate = rebate 
   } 
} 
 
var obj = new AgriLoan(10,1) 
console.log("利潤為 : "+obj.interest+"，抽成為 : "+obj.rebate )      

對象

鴨子類型(Duck Typing)

命名空間

TypeScript 中命名空間使用 namespace 來定義，文法格式如下：

namespace SomeNameSpaceName { 
   export interface ISomeInterfaceName {      }  
   export class SomeClassName {      }  
}      

以上定義了一個命名空間 SomeNameSpaceName，如果我們需要在外部可以調用 SomeNameSpaceName 中的類和接口，則需要在類和接口添加 export 關鍵字。

要在另外一個命名空間調用文法格式為：

SomeNameSpaceName.SomeClassName;      

如果一個命名空間在一個單獨的 TypeScript 檔案中，則應使用三斜杠 /// 引用它，文法格式如下：

/// <reference path = "SomeFileName.ts" />      

嵌套命名空間

命名空間支援嵌套，即你可以将命名空間定義在另外一個命名空間裡頭。

namespace namespace_name1 { 
    export namespace namespace_name2 {
        export class class_name {    } 
    } 
}      

子產品

TypeScript 子產品的設計理念是可以更換的組織代碼。

子產品是在其自身的作用域裡執行，并不是在全局作用域，這意味着定義在子產品裡面的變量、函數和類等在子產品外部是不可見的，除非明确地使用 export 導出它們。類似地，我們必須通過 import 導入其他子產品導出的變量、函數、類等。

兩個子產品之間的關系是通過在檔案級别上使用 import 和 export 建立的。

子產品使用子產品加載器去導入其它的子產品。 在運作時，子產品加載器的作用是在執行此子產品代碼前去查找并執行這個子產品的所有依賴。 大家最熟知的JavaScript子產品加載器是服務于 Node.js 的 CommonJS 和服務于 Web 應用的 Require.js。

此外還有有 SystemJs 和 Webpack。

子產品導出使用關鍵字 export 關鍵字，文法格式如下：

// 檔案名 : SomeInterface.ts 
export interface SomeInterface { 
   // 代碼部分
}      

要在另外一個檔案使用該子產品就需要使用 import 關鍵字來導入:

import someInterfaceRef = require("./SomeInterface");      

聲明檔案

聲明檔案以 .d.ts 為字尾，例如：

runoob.d.ts      

declare module Module_Name {
}      

/// <reference path = " runoob.d.ts" />