前端開發:TypeScript入門教程

官網:https://www。typescriptlang。org/zh/github:https://github。com/microsoft/TypeScript

介紹

TypeScript 是適用於任何規模應用的 JavaScript

TypeScript 擴充套件了 JavaScript ,為它添加了型別支援。

TypeScript 可以在您執行程式碼之前找到錯誤並提供修復,從而改善您的開發體驗。

任何瀏覽器,任何作業系統,任何執行 JavaScript 的地方,完全開源。

特點

1、TypeScript 是一個開源的程式語言,透過在 JavaScript(世界上最常用的語言之一) 的基礎上新增靜態型別定義構建而成。

型別提供了一種描述物件形狀的方法。可以幫助提供更好的文件,還可以讓 TypeScript 驗證你的程式碼可以正常工作。

在 TypeScript 中,不是每個地方都需要標註型別,因為型別推斷允許您無需編寫額外的程式碼即可獲得大量功能。

2、所有有效的 JavaScript 程式碼同時也是有效的 TypeScript 程式碼。你也許會有型別檢查的錯誤,但是這不會阻止你執行生成的 JavaScript。儘管您可以選擇更嚴格的行為,但是這意味著一切依然在您的控制中。

TypeScript 程式碼透過 TypeScript 編譯器或 Babel 轉譯為 JavaScript 程式碼,生成後的程式碼也是乾淨,簡潔,執行在任何可以執行 JavaScript 的地方,無論是在瀏覽器,Node。JS 還是在您的應用中。

3、使用 TypeScript 並不是一個二元選擇,您可以首先使用 JSDoc 來註釋現有的 JavaScript,然後只讓 TypeScript 檢查一小部分檔案,從而讓您的程式碼可以在後續迭代中逐漸完成遷移。

TypeScript 的型別推導意味著只有您希望獲得更佳的安全性時,才需要在您的程式碼中寫更多的型別註釋。

TypeScript 安裝

我們需要使用到 npm 工具安裝,如果你還不瞭解 npm,可以參考NPM 使用介紹。

NPM 安裝 TypeScript

如果你的本地環境已經安裝了 npm 工具,可以使用以下命令來安裝。

使用國內映象:

npm config set registry https://registry。npm。taobao。org

安裝 typescript:

npm install -g typescript

安裝完成後我們可以使用

tsc

命令來執行 TypeScript 的相關程式碼,以下是檢視版本號:

$ tsc -vVersion 3。2。2

然後我們新建一個 app。ts 的檔案,程式碼如下:

var message:string = “Hello World” console。log(message)

通常我們使用

.ts

作為 TypeScript 程式碼檔案的副檔名。

然後執行以下命令將 TypeScript 轉換為 JavaScript 程式碼:

tsc app。ts

前端開發:TypeScript入門教程

這時候再當前目錄下(與 app。ts 同一目錄)就會生成一個 app。js 檔案,程式碼如下:

var message = “Hello World”; console。log(message);

使用 node 命令來執行 app。js 檔案:

$ node app。js Hello World

TypeScript 轉換為 JavaScript 過程如下圖:

前端開發:TypeScript入門教程

typeScript 基礎語法

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

模組

函式

變數

語句和表示式

註釋

第一個 TypeScript 程式

我們可以使用以下 TypeScript 程式來輸出 “Hello World” :

Runoob。ts 檔案程式碼:

const hello : string = “Hello World!” console。log(hello)

以上程式碼首先透過

tsc

命令編譯:

tsc Runoob。ts

Runoob。js 檔案程式碼:

var hello = “Hello World!”; console。log(hello);

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

$ node Runoob。jsHello World

整個流程如下圖所示:

前端開發:TypeScript入門教程

我們可以同時編譯多個 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(“Runoob”)console。log(“Google”);

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

console。log(“Runoob”);console。log(“Google”);

TypeScript 註釋

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

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

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

編譯器會忽略註釋。

TypeScript 支援兩種型別的註釋

單行註釋 ( // )

− 在 // 後面的文字都是註釋內容。

多行註釋 (/* */)

− 這種註釋可以跨越多行。

註釋例項:

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

TypeScript 與面向物件

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

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

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

物件

:物件是類的一個例項(

物件不是找個女朋友

),有狀態和行為。例如,一條狗是一個物件,它的狀態有:顏色、名字、品種;行為有:搖尾巴、叫、吃等。

:類是一個模板,它描述一類物件的行為和狀態。

方法

:方法是類的操作的實現步驟。

下圖中

girl、boy

為類,而具體的每個人為該類的物件:

前端開發:TypeScript入門教程

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

class Site { name():void { console。log(“Runoob”) } } var obj = new Site(); obj。name();

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

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

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

var Site = /** @class */ (function () { function Site() { } Site。prototype。name = function () { console。log(“Runoob”); }; return Site; }()); var obj = new Site(); obj。name();

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

Runoob

覺得效果不錯的請幫忙加個關注點個贊,每天分享前端實用開發技巧