免費(fèi)AI編程助手
TypeScript 快速入門
TypeScript是由微軟開發(fā)的自由和開源的編程語(yǔ)言。
TypeScript是JavaScript的一個(gè)超集，從今天數(shù)以百萬計(jì)的JavaScript開發(fā)者所熟悉的語(yǔ)法和語(yǔ)義開始。可以使用現(xiàn)有的JavaScript代碼，包括流行的JavaScript庫(kù)，并從JavaScript代碼中調(diào)用TypeScript代碼。
TypeScript可以編譯出純凈、 簡(jiǎn)潔的JavaScript代碼，并且可以運(yùn)行在任何瀏覽器上、Node.js環(huán)境中和任何支持ECMAScript 3（或更高版本）的JavaScript引擎中。
TypeScript的優(yōu)勢(shì)在于：它有更多的規(guī)則和類型限制，代碼具有更高的預(yù)測(cè)性、可控性，易于維護(hù)和調(diào)試；對(duì)模塊、命名空間和面向?qū)ο蟮闹С?，更容易組織代碼開發(fā)大型復(fù)雜程序。
另外，TypeScript的編譯步驟可以捕獲運(yùn)行之前的錯(cuò)誤。
接下來，讓我們使用TypeScript開始構(gòu)建一個(gè)簡(jiǎn)單的web應(yīng)用程序。
安裝TypeScript
有兩種主要的方式獲取TypeScript工具。
- 通過npm（Node.js包管理器）
- 安裝TypeScript的Visual Studio插件
Visual Studio2015和Visual Studio 2013 Update 2默認(rèn)包含了TypeScript。如果你沒有安裝包含TypeScript的Visual Studio ，你仍然可以下載。
使用NPM的開發(fā)者：
npm install -g typescript
創(chuàng)建第一個(gè)TypeScript文件
在編輯器中創(chuàng)建greeter.ts文件，并輸入以下JavaScript代碼：
function greeter(person){
return "Hello," + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user);
編譯代碼
雖然我們使用了.ts作為文件擴(kuò)展名，但是這些代碼僅僅是JavaScript代碼。你可以將代碼直接復(fù)制粘貼到已有的JavaScript應(yīng)用程序中。
在命令行中運(yùn)行TypeScript編譯器：
tsc greeter.ts
其結(jié)果你得到一個(gè)包含相同JavaScript代碼的greeter.js文件。在我們啟動(dòng)和運(yùn)行的JavaScript應(yīng)用程序中使用TypeScript。
現(xiàn)在我們可以開始利用TypeScript提供的新工具。給函數(shù)參數(shù)‘person’添加: string類型注解，如下所示：
function greeter(person: string){
return "Hello," + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user);
類型注解
類型注解在TypeScript中是記錄函數(shù)或變量約束的簡(jiǎn)便方法。在這個(gè)示例中，我們想要在調(diào)用greeter函數(shù)時(shí)傳入一個(gè)字符串類型參數(shù)。我們可以嘗試在調(diào)用greeter函數(shù)時(shí)變?yōu)閭魅胍粋€(gè)數(shù)組：
function greeter(person: string){
return"Hello, " + person;
}
var user = [0, 1 , 2];
document.body.innerHTML = greeter(user);
重新編譯，將看到一個(gè)錯(cuò)誤：
greeter.ts(7,26): Supplied parameters do not match any signature of call target
同樣，在調(diào)用greeter函數(shù)時(shí)嘗試不傳入任何參數(shù)。TypeScript將會(huì)告訴你調(diào)用這個(gè)函數(shù)時(shí)需要帶一個(gè)參數(shù)。在這兩個(gè)示例中，TypeScript基于你的代碼結(jié)構(gòu)和類型注解可以提供靜態(tài)分析。
注意，雖然有錯(cuò)誤，但是仍然編譯創(chuàng)建了greeter.js文件。即使你的代碼中有錯(cuò)誤，你仍舊可以使用TypeScript。但是在這種情況，TypeScript會(huì)發(fā)出警告：你的代碼可能不能按照你預(yù)想的那樣運(yùn)行。
接口
讓我們進(jìn)一步開發(fā)我們的demo。 在這里我們使用一個(gè)接口，它描述了具有firstName和lastName字段的對(duì)象。在TypeScript中，如果兩個(gè)類型其內(nèi)部結(jié)構(gòu)兼容，那么這兩種類型兼容。這使我們實(shí)現(xiàn)一個(gè)接口，僅僅只需必要的結(jié)構(gòu)形狀，而不必有明確的implements子句。
interface Person {
firstName: string ;
lastName: string ;
}
function greeter ( person: Person ) {
return "Hello, " + person.firstName + " " + person.lastName;
}
var user = { firstName: "Jane" , lastName: "User" };
document .body.innerHTML = greeter(user);
類
最后，讓我們最后一次使用類來繼續(xù)開發(fā)demo。TypeScript支持新的JavaScript特性，像基于類的面向?qū)ο缶幊痰闹С帧?/p>
在這里，我們創(chuàng)建一個(gè)具有構(gòu)造函數(shù)和一些公共字段的Student類。注意：類和接口的良好配合使用，決定一個(gè)程序員的抽象水平。
此外，在構(gòu)造函數(shù)參數(shù)中使用public是一種簡(jiǎn)寫形式，它將自動(dòng)創(chuàng)建具有該名稱的屬性。
class Student {
fullName: string ;
constructor( public firstName, public middleInitial, public lastName) {
this .fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string ;
lastName: string ;
}
function greeter ( person : Person ) {
return "Hello, " + person.firstName + " " + person.lastName;
}
var user = new Student( "Jane" , "M." , "User" );
document.body.innerHTML = greeter(user);
再次運(yùn)行tsc greeter.ts，你將看到生成的JavaScript代碼和以前的一樣。TypeScript中的類只是對(duì)于經(jīng)常在JavaScript中使用了相同的基于原型的面向?qū)ο蟮暮?jiǎn)寫。
運(yùn)行TypeScript web應(yīng)用程序
現(xiàn)在在greeter.html中輸入以下代碼：
<!DOCTYPE html>
<html>
<head><title>TypeScript Greeter</title></head>
<body>
<script src = "greeter.js"></script>
</body>
</html>
在瀏覽器中打開greeter.html去運(yùn)行第一個(gè)TypeScript web應(yīng)用程序demo！
可選：在Visual Studio中打開greeter.ts，或者復(fù)制代碼到TypeScript學(xué)習(xí)樂園中。你可以將鼠標(biāo)懸浮到標(biāo)識(shí)符上查看類型。注意，在某些情況下這些類型會(huì)為你自動(dòng)推斷。重新輸入最后一行，查看完成列表和基于DOM元素類型的參數(shù)幫助。將光標(biāo)放到引用greeter函數(shù)的地方，并且按下F12鍵去轉(zhuǎn)到定義。同樣注意，你也可以在符號(hào)上右擊使用重構(gòu)來重命名。
所提供的類型信息和工具以及JavaScript在應(yīng)用程序中一起工作。TypeScript更多可能性的示例，請(qǐng)瀏覽網(wǎng)站的案例。
更多建議：