TypeScript 基礎語法

TypeScript 程式由以下幾個部分組成：

  • 模組
  • 函式
  • 變數
  • 語句和表示式
  • 註釋

第一個 TypeScript 程式

我們可以使用以下 TypeScript 程式來輸出 "Hello World" ：

itread01.ts 檔案程式碼：

const hello : string = "Hello World!" console.log(hello)

嘗試一下 ?

以上程式碼首先通過 tsc 命令編譯：

tsc itread01.ts

得到如下 js 程式碼：

itread01.js 檔案程式碼：

var hello = "Hello World!"; console.log(hello);

最後我們使用 node 命令來執行該 js 程式碼。

$ node itread01.js
Hello World

整個流程如下圖所示：

我們可以同時編譯多個 ts 檔案：

tsc file1.ts file2.ts file3.ts

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

序號 編譯引數說明
1.

--help

顯示幫助資訊
2.

--module

載入擴充套件模組
3.

--target

設定 ECMA 版本
4.

--declaration

額外生成一個 .d.ts 副檔名的檔案。

tsc ts-hw.ts --declaration

以上命令會生成 ts-hw.d.ts、ts-hw.js 兩個檔案。
5.

--removeComments

刪除檔案的註釋
6.

--out

編譯多個檔案併合併到一個輸出的檔案
7.

--sourcemap

生成一個 sourcemap (.map) 檔案。

sourcemap 是一個儲存原始碼與編譯程式碼對應位置對映的資訊檔案。
8.

--module noImplicitAny

在表示式和宣告上有隱含的 any 型別時報錯
9.

--watch

在監視模式下執行編譯器。會監視輸出檔案，在它們改變時重新編譯。

TypeScript 保留關鍵字

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
new try yield const
continue do    

空白和換行

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

空格、製表符通常用來縮排程式碼，使程式碼易於閱讀和理解。

TypeScript 區分大小寫

TypeScript 區分大寫和小寫字元。

分號是可選的

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

以下程式碼都是合法的：

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

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

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

TypeScript 註釋

註釋是一個良好的習慣，雖然很多程式設計師討厭註釋，但還是建議你在每段程式碼寫上文字說明。

註釋可以提高程式的可讀性。

註釋可以包含有關程式一些資訊，如程式碼的作者，有關函式的說明等。

編譯器會忽略註釋。

TypeScript 支援兩種型別的註釋

  • 單行註釋 ( // ) ? 在 // 後面的文字都是註釋內容。

  • 多行註釋 (/* */) ? 這種註釋可以跨越多行。

註釋例項：

// 這是一個單行註釋
 
/* 
 這是一個多行註釋 
 這是一個多行註釋 
 這是一個多行註釋 
*/

TypeScript 與面向物件

面向物件是一種對現實世界理解和抽象的方法。

TypeScript 是一種面向物件的程式語言。

面向物件主要有兩個概念：物件和類。

  • 物件：物件是類的一個例項（物件不是找個女朋友），有狀態和行為。例如，一條狗是一個物件，它的狀態有：顏色、名字、品種；行為有：搖尾巴、叫、吃等。
  • 類：類是一個模板，它描述一類物件的行為和狀態。
  • 方法：方法是類的操作的實現步驟。

下圖中 girl、boy 為類，而具體的每個人為該類的物件：

TypeScript 面向物件程式設計例項：

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

以上例項定義了一個類 Site，該類有一個方法 name()，該方法在終端上輸出字串 itread01。

new 關鍵字建立類的物件，該物件呼叫方法 name()。

編譯後生成的 JavaScript 程式碼如下：

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

執行以上 JavaScript 程式碼，輸出結果如下:

itread01