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