千年殇,如何发布网络小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

創(chuàng)新互聯(lián)TypeScript教程：TypeScript快速入門

TypeScript是由微軟開發(fā)的自由和開源的編程語言。

創(chuàng)新互聯(lián)公司是一家成都做網(wǎng)站、網(wǎng)站制作，提供網(wǎng)頁設(shè)計，網(wǎng)站設(shè)計，網(wǎng)站制作，建網(wǎng)站，按需開發(fā)，網(wǎng)站開發(fā)公司，從2013年開始是互聯(lián)行業(yè)建設(shè)者，服務(wù)者。以提升客戶品牌價值為核心業(yè)務(wù)，全程參與項(xiàng)目的網(wǎng)站策劃設(shè)計制作，前端開發(fā)，后臺程序制作以及后期項(xiàng)目運(yùn)營并提出專業(yè)建議和思路。

和順網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站設(shè)計等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)于2013年成立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

TypeScript是JavaScript的一個超集，從今天數(shù)以百萬計的JavaScript開發(fā)者所熟悉的語法和語義開始?？梢允褂矛F(xiàn)有的JavaScript代碼，包括流行的JavaScript庫，并從JavaScript代碼中調(diào)用TypeScript代碼。

TypeScript可以編譯出純凈、簡潔的JavaScript代碼，并且可以運(yùn)行在任何瀏覽器上、Node.js環(huán)境中和任何支持ECMAScript 3（或更高版本）的JavaScript引擎中。

TypeScript的優(yōu)勢在于：它有更多的規(guī)則和類型限制，代碼具有更高的預(yù)測性、可控性，易于維護(hù)和調(diào)試；對模塊、命名空間和面向?qū)ο蟮闹С?，更容易組織代碼開發(fā)大型復(fù)雜程序。

另外，TypeScript的編譯步驟可以捕獲運(yùn)行之前的錯誤。

接下來，讓我們使用TypeScript開始構(gòu)建一個簡單的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)建第一個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é)果你得到一個包含相同JavaScript代碼的greeter.js文件。在我們啟動和運(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ù)或變量約束的簡便方法。在這個示例中，我們想要在調(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ā)出警告：你的代碼可能不能按照你預(yù)想的那樣運(yùn)行。

接口

讓我們進(jìn)一步開發(fā)我們的demo。在這里我們使用一個接口，它描述了具有firstName和lastName字段的對象。在TypeScript中，如果兩個類型其內(nèi)部結(jié)構(gòu)兼容，那么這兩種類型兼容。這使我們實(shí)現(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);

再次運(yùn)行tsc greeter.ts，你將看到生成的JavaScript代碼和以前的一樣。TypeScript中的類只是對于經(jīng)常在JavaScript中使用了相同的基于原型的面向?qū)ο蟮暮唽憽?/p>

運(yùn)行TypeScript web應(yīng)用程序

現(xiàn)在在greeter.html中輸入以下代碼：

 
 
    TypeScript Greeter

在瀏覽器中打開greeter.html去運(yùn)行第一個TypeScript web應(yīng)用程序demo！

可選：在Visual Studio中打開greeter.ts，或者復(fù)制代碼到TypeScript學(xué)習(xí)樂園中。你可以將鼠標(biāo)懸浮到標(biāo)識符上查看類型。注意，在某些情況下這些類型會為你自動推斷。重新輸入最后一行，查看完成列表和基于DOM元素類型的參數(shù)幫助。將光標(biāo)放到引用greeter函數(shù)的地方，并且按下F12鍵去轉(zhuǎn)到定義。同樣注意，你也可以在符號上右擊使用重構(gòu)來重命名。

所提供的類型信息和工具以及JavaScript在應(yīng)用程序中一起工作。TypeScript更多可能性的示例，請瀏覽網(wǎng)站的案例。

網(wǎng)頁標(biāo)題：創(chuàng)新互聯(lián)TypeScript教程：TypeScript快速入門
本文網(wǎng)址：http://m.fisionsoft.com.cn/article/dpdgcdp.html