.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」:
interface userName {
firstName: string;
lastName: string
}
var un: userName = {
firstName: 'Mary',
lastName: "Lo"
}
console.log(`User Name is : ${un.firstName} ${un.lastName}`); // User Name is : Mary Lo
以下程式將產生錯誤,「un」物件缺少了「lastName」屬性:
interface userName {
firstName: string;
lastName: string
}
var un: userName = { // Error
firstName: 'Mary'
}
console.log(`User Name is : ${un.firstName} ${un.lastName}`);
上述程式碼也可以省略「interface」關鍵字,改成行內(Inline)寫法如下:
var userName : {
firstName: string;
lastName: string
}
userName = {
firstName: 'Mary',
lastName: "Lo"
}
console.log(`User Name is : ${userName.firstName} ${userName.lastName}`); // User Name is : Mary Lo
若「userName」物件,缺少屬性,則會產生錯誤,例如以下範例程式碼:
var userName : {
firstName: string;
lastName: string
}
userName = { //Error
firstName: 'Mary'
}
console.log(`User Name is : ${userName.firstName} ${userName.lastName}`); // User Name is : Mary Lo
列舉型別 (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