TypeScript 基礎(chǔ)語(yǔ)法

TypeScript 程序由以下幾個(gè)部分組成：

• 模塊
• 函數(shù)
• 變量
• 語(yǔ)句和表達(dá)式
• 注釋

1. 第一個(gè) TypeScript 程序

我們可以使用以下 TypeScript 程序來(lái)輸出 "Hello World" ：

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

以上代碼存放到 yapf.ts 文件中，首先通過(guò) tsc 命令編譯：

tsc yapf.ts

得到 js 代碼文件 yapf.js：

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

最后我們使用 node 命令來(lái)執(zhí)行該 js 代碼。

$ node Runoob.js
Hello World

整個(gè)流程如下圖所示：

我們可以同時(shí)編譯多個(gè) ts 文件：

tsc file1.ts file2.ts file3.ts

tsc 常用編譯參數(shù)如下表所示：

tsc ts-hw.ts --declaration

2. TypeScript 保留關(guān)鍵字

TypeScript 保留關(guān)鍵字如下表所示：

1）空白和換行

TypeScript 會(huì)忽略程序中出現(xiàn)的空格、制表符和換行符。

空格、制表符通常用來(lái)縮進(jìn)代碼，使代碼易于閱讀和理解。

2) TypeScript 區(qū)分大小寫(xiě)

TypeScript 區(qū)分大寫(xiě)和小寫(xiě)字符。

3) 分號(hào)是可選的

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

以下代碼都是合法的：

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

如果語(yǔ)句寫(xiě)在同一行則一定需要使用分號(hào)來(lái)分隔，否則會(huì)報(bào)錯(cuò)，如：

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

4) TypeScript 注釋

注釋是一個(gè)良好的習(xí)慣，雖然很多程序員討厭注釋，但還是建議你在每段代碼寫(xiě)上文字說(shuō)明。

注釋可以提高程序的可讀性。

注釋可以包含有關(guān)程序一些信息，如代碼的作者，有關(guān)函數(shù)的說(shuō)明等。

編譯器會(huì)忽略注釋。

5) TypeScript 支持兩種類型的注釋

• 單行注釋 ( // ) ? 在 // 后面的文字都是注釋內(nèi)容。
• 多行注釋 (/* */) ? 這種注釋可以跨越多行。

注釋范例：

// 這是一個(gè)單行注釋
 
/* 
 這是一個(gè)多行注釋 
 這是一個(gè)多行注釋 
 這是一個(gè)多行注釋 
*/

2. TypeScript 與面向?qū)ο?/h2>

面向?qū)ο笫且环N對(duì)現(xiàn)實(shí)世界理解和抽象的方法。

TypeScript 是一種面向?qū)ο蟮木幊陶Z(yǔ)言。

面向?qū)ο笾饕袃蓚€(gè)概念：對(duì)象和類。

• 對(duì)象：對(duì)象是類的一個(gè)范例（對(duì)象不是找個(gè)女朋友），有狀態(tài)和行為。例如，一條狗是一個(gè)對(duì)象，它的狀態(tài)有：顏色、名字、品種；行為有：搖尾巴、叫、吃等。
• 類：類是一個(gè)模板，它描述一類對(duì)象的行為和狀態(tài)。
• 方法：方法是類的操作的實(shí)現(xiàn)步驟。

下圖中 girl、boy 為類，而具體的每個(gè)人為該類的對(duì)象：

TypeScript 面向?qū)ο缶幊谭独?/p>

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

以上范例定義了一個(gè)類 Site，該類有一個(gè)方法 name()，該方法在終端上輸出字符串 Codebaoku。

new 關(guān)鍵字創(chuàng)建類的對(duì)象，該對(duì)象調(diào)用方法 name()。

編譯后生成的 JavaScript 代碼如下：

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

執(zhí)行以上 JavaScript 代碼，輸出結(jié)果如下:

Codebaoku

下一節(jié)：TypeScript 數(shù)據(jù)類型

TypeScript 教程