建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
TypeScript是由微軟開(kāi)發(fā)的自由和開(kāi)源的編程語(yǔ)言。
創(chuàng)新互聯(lián)公司是一家成都做網(wǎng)站、網(wǎng)站制作，提供網(wǎng)頁(yè)設(shè)計(jì)，網(wǎng)站設(shè)計(jì)，網(wǎng)站制作，建網(wǎng)站，按需開(kāi)發(fā)，網(wǎng)站開(kāi)發(fā)公司，從2013年開(kāi)始是互聯(lián)行業(yè)建設(shè)者，服務(wù)者。以提升客戶(hù)品牌價(jià)值為核心業(yè)務(wù)，全程參與項(xiàng)目的網(wǎng)站策劃設(shè)計(jì)制作，前端開(kāi)發(fā)，后臺(tái)程序制作以及后期項(xiàng)目運(yùn)營(yíng)并提出專(zhuān)業(yè)建議和思路。
和順網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、響應(yīng)式網(wǎng)站設(shè)計(jì)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)于2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專(zhuān)注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。
TypeScript是JavaScript的一個(gè)超集，從今天數(shù)以百萬(wàn)計(jì)的JavaScript開(kāi)發(fā)者所熟悉的語(yǔ)法和語(yǔ)義開(kāi)始?？梢允褂矛F(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ī)則和類(lèi)型限制，代碼具有更高的預(yù)測(cè)性、可控性，易于維護(hù)和調(diào)試；對(duì)模塊、命名空間和面向?qū)ο蟮闹С郑菀捉M織代碼開(kāi)發(fā)大型復(fù)雜程序。
另外，TypeScript的編譯步驟可以捕獲運(yùn)行之前的錯(cuò)誤。
接下來(lái)，讓我們使用TypeScript開(kāi)始構(gòu)建一個(gè)簡(jiǎn)單的web應(yīng)用程序。
安裝TypeScript
有兩種主要的方式獲取TypeScript工具。
- 通過(guò)npm（Node.js包管理器）
- 安裝TypeScript的Visual Studio插件
Visual Studio2015和Visual Studio 2013 Update 2默認(rèn)包含了TypeScript。如果你沒(méi)有安裝包含TypeScript的Visual Studio ，你仍然可以下載。
使用NPM的開(kāi)發(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)在我們可以開(kāi)始利用TypeScript提供的新工具。給函數(shù)參數(shù)‘person’添加: string類(lèi)型注解，如下所示：
function greeter(person: string){
return "Hello," + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user);
類(lèi)型注解
類(lèi)型注解在TypeScript中是記錄函數(shù)或變量約束的簡(jiǎn)便方法。在這個(gè)示例中，我們想要在調(diào)用greeter函數(shù)時(shí)傳入一個(gè)字符串類(lèi)型參數(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)和類(lèi)型注解可以提供靜態(tài)分析。
注意，雖然有錯(cuò)誤，但是仍然編譯創(chuàng)建了greeter.js文件。即使你的代碼中有錯(cuò)誤，你仍舊可以使用TypeScript。但是在這種情況，TypeScript會(huì)發(fā)出警告：你的代碼可能不能按照你預(yù)想的那樣運(yùn)行。
接口
讓我們進(jìn)一步開(kāi)發(fā)我們的demo。 在這里我們使用一個(gè)接口，它描述了具有firstName和lastName字段的對(duì)象。在TypeScript中，如果兩個(gè)類(lèi)型其內(nèi)部結(jié)構(gòu)兼容，那么這兩種類(lèi)型兼容。這使我們實(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);
類(lèi)
最后，讓我們最后一次使用類(lèi)來(lái)繼續(xù)開(kāi)發(fā)demo。TypeScript支持新的JavaScript特性，像基于類(lèi)的面向?qū)ο缶幊痰闹С帧?/p>
在這里，我們創(chuàng)建一個(gè)具有構(gòu)造函數(shù)和一些公共字段的Student類(lèi)。注意：類(lèi)和接口的良好配合使用，決定一個(gè)程序員的抽象水平。
此外，在構(gòu)造函數(shù)參數(shù)中使用public是一種簡(jiǎn)寫(xiě)形式，它將自動(dòng)創(chuàng)建具有該名稱(chē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中的類(lèi)只是對(duì)于經(jīng)常在JavaScript中使用了相同的基于原型的面向?qū)ο蟮暮?jiǎn)寫(xiě)。
運(yùn)行TypeScript web應(yīng)用程序
現(xiàn)在在greeter.html中輸入以下代碼：
TypeScript Greeter
在瀏覽器中打開(kāi)greeter.html去運(yùn)行第一個(gè)TypeScript web應(yīng)用程序demo！
可選：在Visual Studio中打開(kāi)greeter.ts，或者復(fù)制代碼到TypeScript學(xué)習(xí)樂(lè)園中。你可以將鼠標(biāo)懸浮到標(biāo)識(shí)符上查看類(lèi)型。注意，在某些情況下這些類(lèi)型會(huì)為你自動(dòng)推斷。重新輸入最后一行，查看完成列表和基于DOM元素類(lèi)型的參數(shù)幫助。將光標(biāo)放到引用greeter函數(shù)的地方，并且按下F12鍵去轉(zhuǎn)到定義。同樣注意，你也可以在符號(hào)上右擊使用重構(gòu)來(lái)重命名。
所提供的類(lèi)型信息和工具以及JavaScript在應(yīng)用程序中一起工作。TypeScript更多可能性的示例，請(qǐng)瀏覽網(wǎng)站的案例。
新聞標(biāo)題：創(chuàng)新互聯(lián)TypeScript教程：TypeScript快速入門(mén)
分享地址：http://m.5511xx.com/article/dpdgcdp.html
