TypeScript 快速入門

在 Main.ts 中使用 TypeScript 編寫代碼

function greeter(person:string) {return "Hello, " + person;}let user = "TypeScript User";document.body.innerHTML = greeter(user); 

最後，我們運行測試下代碼，在命令行中輸入：

npm run buildnpm run dev

瀏覽器中輸入 http://localhost:8080，可以看到：

2. TypeScript 的類型

假如我們已經使用過 JavaScript，那麼你要知道 TypeScript 最大的不同就是 Type，這是我們這次分享的重點，我們得花點時間來感受下類型。

2.1. 靜態類型

看看下面的代碼，就是就是 JavaScript 再加上類型定義而已：

function greeter(person: string) {return "Hello, " + person;}let user = "Jane User";document.body.innerHTML = greeter(user);

由於 JavaScript 是不 care 類型的，所以編譯後的代碼類型被移除了，編譯後變成我們熟悉的 JavaScript：

function greeter(person) {return "Hello, " + person;}var user = "Jane User";document.body.innerHTML = greeter(user);

如果我們把一個數組傳入方法：

function greeter(person: string) {return "Hello, " + person;}let user = [0, 1, 2];document.body.innerHTML = greeter(user);

這時就會產生一個錯誤：

main.ts(7,35): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.15:34:56 - Compilation complete. Watching for file changes.

TypeScript 提供了靜態的代碼分析，它可以分析代碼結構和提供的類型註解。要注意的是儘管有錯誤，main.js 文件還是被創建了。

就算你的代碼裡有錯誤，你仍然可以使用 TypeScript。但在這種情況下，TypeScript 會警告你代碼可能不會按預期執行。

很明顯，TypeScript 就是一個有型的 JavaScript。

2.2. 基礎類型

這裡列出一些常用的數據類型：

• 布爾值

最基本的數據類型就是簡單的 true/false 值，在 JavaScript 和 TypeScript 裡叫做 boolean（其它語言中也一樣），使用 0 和 1 將導致編譯錯誤。

let isDone: boolean = false;

• 數字

和 JavaScript 一樣，TypeScript 裡的所有數字都是浮點數，這些浮點數的類型是 number。

除了支持十進制和十六進制字面量，TypeScript 還支持 ECMAScript 2015 中引入的二進制和八進制字面量。沒有分別定義為 integers、floats 或是其它值。

let decLiteral: number = 6;let hexLiteral: number = 0xf00d;let binaryLiteral: number = 0b1010;let octalLiteral: number = 0o744;

• 字符串

JavaScript 程序的另一項基本操作是處理網頁或服務器端的文本數據。

像其它語言裡一樣，我們使用 string 表示文本數據類型，和 JavaScript 一樣，可以使用雙引號（ “）或單引號（’）表示字符串。

let name: string = "bob";name = "smith";

開發過程中拼字符串是最常用的了，使用模版字符串比 format 更加強大，它可以定義多行文本和內嵌表達式。

這種字符串是被反引號包圍（ `）（鍵盤佈局左上方數字鍵 1 左邊），可以通過 ${ expr } 這種形式嵌入表達式

let name: string = `Gene`;let age: number = 37;let sentence: string = `Hello, my name is ${ name }.I'll be ${ age + 1 } years old next month.`;

這與下面加號拼接的方式效果相同，但是明顯字符串模版更簡單強大：

let sentence: string = "Hello, my name is " + name + ".\n\n" +"I'll be " + (age + 1) + " years old next month.";

• 數組

TypeScript 像 JavaScript 一樣可以操作數組元素，有兩種方式可以定義數組。

第一種，可以在元素類型後面接上 []，表示由此類型元素組成的一個數組：

let list: number[] = [1, 2, 3]; 

第二種方式是使用數組泛型，Array：

let list: Array = [1, 2, 3];

let list: any[] = [1, true, "free"];list[1] = 100;

• Any

有時候，我們會想要為那些在編程階段還不清楚類型的變量指定一個類型，這些值可能來自於動態的內容，比如來自用戶輸入或第三方代碼庫。

這種情況下，我們不希望類型檢查器對這些值進行檢查而是直接讓它們通過編譯階段的檢查，那麼我們可以使用 any 類型來標記這些變量：

let notSure: any = 4;notSure = "maybe a string instead";notSure = false; // okay, definitely a boolean

在對現有代碼進行改寫的時候，any 類型是十分有用的，它允許你在編譯時可選擇地包含或移除類型檢查。

你可能認為 Object 有相似的作用，就像它在其它語言中那樣。 但是 Object 類型的變量只是允許你給它賦任意值 - 但是卻不能夠在它上面調用任意的方法，即便它真的有這些方法：

let notSure: any = 4;notSure.ifItExists(); // okay, ifItExists might exist at runtimenotSure.toFixed(); // okay, toFixed exists (but the compiler doesn't check)let prettySure: Object = 4;prettySure.toFixed(); // Error: Property 'toFixed' doesn't exist on type 'Object'.

具有這種類型的變量可以將它的值設置為字符串、數字或其他任何東西。

• Void

用於不返回任何東西的函數。

某種程度上來說，void 類型像是與 any 類型相反，它表示沒有任何類型。 當一個函數沒有返回值時，你通常會見到其返回值類型是 void：

function warnUser(): void {alert("This is my warning message");}

let unusable: void = undefined;

• Null 和 Undefined

TypeScript 裡，undefined 和 null 兩者各自有自己的類型分別叫做 undefined 和 null。和 void 相似，它們的本身的類型用處不是很大：

// Not much else we can assign to these variables!let u: undefined = undefined;let n: null = null;

默認情況下 null 和 undefined 是所有類型的子類型，就是說你可以把 null 和 undefined 賦值給 number 類型的變量。

然而，當你指定了—strictNullChecks 標記，null 和 undefined 只能賦值給 void 和它們各自，這能避免很多常見的問題。

也許在某處你想傳入一個 string 或 null 或 undefined，你可以使用聯合類型 string | null | undefined。

注意：儘可能地使用—strictNullChecks。

• Never

never 類型表示的是那些永不存在的值的類型。

例如， never 類型是那些總是會拋出異常或根本就不會有返回值的函數表達式或箭頭函數表達式的返回值類型； 變量也可能是 never 類型，當它們被永不為真的類型保護所約束時。

never 類型是任何類型的子類型，也可以賦值給任何類型；然而，沒有類型是 never 的子類型或可以賦值給 never 類型（除了 never 本身之外），即使 any 也不可以賦值給 never。

下面是一些返回 never 類型的函數：

// 返回 never 的函數必須存在無法達到的終點function error(message: string): never {throw new Error(message);}// 推斷的返回值類型為 neverfunction fail() {return error("Something failed");}// 返回 never 的函數必須存在無法達到的終點function infiniteLoop(): never {while (true) {}}

2.3. 類型轉換

好比其它語言裡的類型轉換，但是不進行特殊的數據檢查和解構，它對運行時時沒有影響，只在編譯時起作用。

TypeScript 會假設你知道自己在幹什麼，已經進行了必須的檢查。

有兩種形式。 其一是 “尖括號” 語法：

let someValue: any = "this is a string";let strLength: number = (someValue).length;

另一個為 as 語法：

let someValue: any = "this is a string";let strLength: number = (someValue as string).length;

兩種形式是等價的，至於使用哪個大多數情況下是憑個人喜好；然而，當你在 TypeScript 裡使用 JSX 時，只有 as 語法斷言是被允許的。

閱讀更多 解放號眾包平臺 的文章

關鍵字: JSON 入門 JavaScript