.NET Magazine國際中文電子雜誌
作 者：許薰尹
審 稿：張智凱
文章編號： N180919902
出刊日期： 2018/9/19

在這篇文章中，將要介紹什麼是TypeScript ，如何安裝開發環境，以及TypeScript基本型別。

 

什麼是TypeScript?

TypeScript主要目標是為JavaScript提供型別系統（Type System），指定變數型別之後就不可以變更，如此方便於除錯與避免不小心而產生的例外錯誤。

TypeScript程式將會轉換成JavaScript，JavaScript是真正在運作的程式碼，也就是說當下任何使用JavaScript可以做到的事情，都可以使用TypeScript來完成。

TypeScript可以在編譯時期就找到程式的錯誤，不用等到執行階段，能在程式設計的早期就發現問題，降低開發的成本。

 

TypeScript安裝

要安裝TypeScript可以透過「npm」工具來進行下載。「npm」隨著Node.js散發，也就是說只要安裝Node.js就會自動安裝「npm」。你可以由Node.js官網（https://nodejs.org/en/）下載並安裝Node.js。Node.js安裝完成之後，可以在命令提示字元輸入以下「npm install」指令來安裝Typescript，「-g」參數表示要安裝成全域套件：

npm install -g typescript

請參考下圖所示：

圖 1：使用npm下載並安裝typescrpt。

完成後在命令提示字元輸入「tsc」指令：

Tsc

便可以檢視安裝的TypeScript版本、以及使用相關資訊；

圖 2：tsc工具程式。

接下來在命令提示字元輸入以下指令，建立程式要存放的資料夾「TScript」：

mkdir TScript

在命令提示字元輸入以下指令，切換到目前工作路徑到「TScript」資料夾：

cd TScript

在命令提示字元輸入以下指令，建立一個名為「myts.ts」文字檔案：

cd. > myts.ts

接著我們就可以利用任何文書處理軟體，或開發工具來撰寫程式碼，假設「myts.ts」檔案中包含以下程式碼：

var num: number = 123;

console.log(num);

在命令提示字元輸入以下指令，將「myts.ts」檔案中的程式碼轉譯成JavaScript程式碼：

tsc myts.ts

執行完命令後產生的JavaScript程式碼參考如下：

var num = 123;

console.log(num);

在命令提示字元輸入以下指令，使用Node.js執行JavaScript

node myts.js

這個範例的執行結果，請參考下圖所示：

圖 3：使用Node.js執行JavaScript。

若要直接執行TypeScript，可以使用以下指令：

ts-node myts.ts

這個範例的執行結果，請參考下圖所示：

圖 4：執行TypeScript。

任何一個文書處理程式都可以用來撰寫TypeScript程式，然而，工欲善其事，必先利其器，首先你需要一個好用的程式編輯器，微軟建議的TypeScript開發工具清單如下，你可以找尋一個適合自己的工具來撰寫程式碼：https://github.com/Microsoft/TypeScript/wiki/TypeScript-Editor-Support。

接下來我們開始來談談TypeScript型別與變數宣告基本語法。

 

型別與變數宣告

在TypeScript中變數宣告和JavaScript一樣，可以使用兩個關鍵字：「var」或是「let」，例如前文的範例，宣告一個數值型別的變數「num」：

var num: number = 123;

console.log(num);

我們可以改用「let」來改寫這段程式碼，參考程式如下：

let num: number = 123;

console.log(num);

「var」或「let」的最大差異在有效範圍，「let」的有效範圍在於一個區塊（Block）之中，例如以下範例程式碼，在｛ ｝ 中宣告「num」變數，因此在 ｛ ｝ 號之外的程式碼，就無法存取到「num」變數：

{

let num: number = 123;

}

console.log(num); // Error

若改為使用「var」關鍵字來宣告，則以下的「num」之有效範圍為全域，因此在 ｛ ｝ 號之外的程式碼，還是可以存取到「num」變數：

{

var num: number = 123;

}

console.log(num); // 123

 

基本型別（Primitive Type）

TypeScript支援JavaScript中的基本型別（Primitive Type），所謂的基本型別是指變數只能包含一個值。和JavaScript一樣，你可以宣告變數，不指定型別，在執行過程中，變動型別：

var a;

console.log(a);  // undefined

a = 100;

console.log(a);  // 100

a = true;

console.log(a);  // true

a = "mary";

console.log(a);  // mary

這段程式碼也可以改寫如下，使用「:any」：

var a : any;

console.log(a);  // undefined

a = 100;

console.log(a);  // 100

a = true;

console.log(a); // true

a = "mary";

console.log(a); // mary

在宣告變數時指定型別有一個好處，便是在編譯階段能夠進行型別檢查，防止寫錯程式碼。參考以下範例程式碼，使用TypeScript宣告一個字串型別的變數「s」，然後印出變數的值：

var s: string = 'mary'

console.log(s); // mary

宣告一個布林型別的變數「b」：

var b: boolean = true;

console.log(b);

在JavaScript中，使用「==」比較「false」與「0」會得到「true」

console.log(false == 0); // true

在TypeScript中這段程式碼會視為錯誤，「false」與「0」不能透過「==」運算子來進行比較。

此外變數的型別在執行過程中，不可以隨意變動，例如以下範例程式碼，宣告布林型別的變數「b」，而試圖指派字串「mary」到此變數，將會得到一個錯誤；同樣地，將字串「mary」指派到數值型別的「num」變數，這行程式碼也會得到一個錯誤：

var b: boolean = true;

console.log(b);

b = "mary"; // Error

var num: number = 123;

console.log(num); // Error

num = 'mary';

 

陣列型別（Array）

TypeScript可以宣告指定型別的陣列，讓陣列中存放相同型別的項目。宣告陣列的語法為在 [ ] 符號前方，指定型別，參考以下範例程式碼，定義一個字串陣列：

var ar: string[];

ar = ['mary', 'candy', 'LuLu'];

console.log(ar); // [ 'mary', 'candy', 'LuLu' ]

以下範例程式碼，定義一個數值陣列：

var ar: number[];

ar = [100, 200, 300];

console.log(ar);

以下範例程式碼將會產生語法錯誤，數值陣列之中不可包含字串：

var ar: number[];

ar = [100, 200, 300 , 'mary']; // Error

console.log(ar);

同理以下範例程式碼將會產生語法錯誤，數值陣列中不可以包含字串型別的項目：

var ar: number[];

ar = [100, 200, 300];

ar[0] = 'mary'; //Error

console.log(ar[0]);

若要宣告一個陣列，可以存放任意型別項目，則可以在 [ ] 符號之前，使用「:any」，例如以下範例程式碼：

var ar: any[];

ar = [100, true, 'mary'];

console.log(ar); //[ 100, true, 'mary' ]

介面型別（Interface）

TypeScript與JavaScript最大的差別就在於TypeScript提供了介面（Interface），而JavaScript沒有介面的語法。先看一個範例，我們可以利用介面來定義「userName」必需包含「firstName」、「lastName」兩個屬性。接著將「un」變數的型別指定為「userName」：

 

以下程式將產生錯誤，「un」物件缺少了「lastName」屬性：

上述程式碼也可以省略「interface」關鍵字，改成行內（Inline）寫法如下：

 

若「userName」物件，缺少屬性，則會產生錯誤，例如以下範例程式碼：

列舉型別 (Enum)

在TypeScript之中可以使用列舉型別，使用「enum」關鍵字來定義列舉值，列舉中的值對應的數值以「0」開始。參考以下範例程式碼，定義「Gender」列舉描述性別包含「Male」與「Female」兩種，因此指定這兩者以外的值就會產生錯誤：

enum Gender { Male, Female }

var g : Gender = Gender.Female;

console.log(g); // 1

var g : Gender = Gender.Other; //Error

console.log(g);

我們也可以直接指定列舉中的項目對應的數值，例如以下範例程式碼：

enum Gender { Male = 1 , Female = 2 }

var g : Gender = Gender.Female;

console.log(g); //2

 

undefine型別

和JavaScript一樣，在TypeScript中宣告變數但沒有初始化，就代表「undefined」，「undefined」可以指定給任意型別的變數，例如以下範例程式碼：

var s: string

console.log(s); //undefined

s = undefined;

console.log(s); //undefined

console.log(s == undefined); //true

var n: number;

n = undefined;

console.log(n); //undefined

 

null型別

「null」型別和JavaScript一樣，在TypeScript中null型別代表一個空值（Nothing）、值未知的意思。任何型別的變數都可以指定為「null」例如以下範例程式碼：

var s: string

s = null;

console.log(s); //null

var n: number;

n = null;

console.log(n); //null

 

void

函式若無回傳型別，可以使用「void」關鍵字，例如以下範例程式碼：

function myfunc(): void {

console.log('Hello');

}

myfunc();

 

Tuple型別

Tuple通常是指是一個資料結構，可以儲存多個異質項目。JavaScript沒有Tuple型別，通常我們會使用陣列來存放多個資料項目。TypeScript則提供Tuple型別，使用以下語法來定義Tuple：

:[第一個項目的型別, 第二個項目的型別,... 第n個項目的型別]」

例如以下範例程式碼，定義一個Tuple描述座標，它是由兩個數值組成：

var coordinate: [number, number];

coordinate = [10, 20];

console.log(coordinate[0]); // 10

console.log(coordinate[1]); // 20

coordinate = [10, "20"]; // Error

我們也可以結合陣列解構（Array destructuring）語法，將Tuple中的項目指派到變數，例如以下範例程式碼：

var coordinate: [number, number];

var [x, y] = coordinate = [10, 20];

console.log(x); // 10

console.log(y); // 20

 

Type別名

你可以使用「type」關鍵字幫型別取一個別名，以方便在後續的程式碼中重複使用。例如以下範例程式碼：

type Coordinate = [number, number];

var c: Coordinate = [10, 20];

var [x, y] = c;

console.log(x); // 10

console.log(y); // 20