TypeScript入門

by vivid 19. 九月 2018 06:24

.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

請參考下圖所示:

clip_image002

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

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

Tsc

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

clip_image004

圖 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

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

clip_image006

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

若要直接執行TypeScript,可以使用以下指令:

ts-node myts.ts

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

clip_image008

圖 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

Tags:

TypeScript

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List