這篇文章主要為大家展示了“TypeScript是什么意思”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“TypeScript是什么意思”這篇文章吧。
10余年的赤峰網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都營(yíng)銷(xiāo)網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶(hù)設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整赤峰建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“赤峰網(wǎng)站設(shè)計(jì)”,“赤峰網(wǎng)站推廣”以來(lái)，每個(gè)客戶(hù)項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
TypeScript 并沒(méi)有很多可用于聲明變量的內(nèi)置數(shù)據(jù)類(lèi)型，只有字符串、數(shù)字和布爾。這三種類(lèi)型都是 any 類(lèi)型（any 類(lèi)型在聲明變量時(shí)也可以使用）的子類(lèi)型。您可以針對(duì) null 或未定義的類(lèi)型來(lái)設(shè)置或測(cè)試通過(guò)這四種類(lèi)型聲明的變量。您還可以將這些方法聲明為 void，來(lái)指明他們未返回值。
此示例將一個(gè)變量聲明為字符串：
var name: string;
您可以使用枚舉值和四種對(duì)象類(lèi)型來(lái)擴(kuò)展此簡(jiǎn)單類(lèi)型系統(tǒng)：接口、類(lèi)、數(shù)組和函數(shù)。例如，以下代碼使用名稱(chēng) ICustomerShort 定義了一個(gè)接口（一種對(duì)象類(lèi)型）。該接口包含兩個(gè)成員：屬性 Id 和方法 CalculateDiscount：
重慶分公司
重慶分公司
interface ICustomerShort
{
Id: number;
CalculateDiscount(): number;
}正如在 C# 中一樣，在聲明變量時(shí)，您可以使用接口并返回類(lèi)型。此示例將變量 cs 聲明為類(lèi)型 ICustomerShort：
var cs: ICustomerShort;
您還可以將對(duì)象類(lèi)型定義為類(lèi)，類(lèi)不同于接口，可以包含可執(zhí)行代碼。此示例使用一個(gè)屬性和一個(gè)方法定義了 CustomerShort 類(lèi)：
class CustomerShort
{
FullName: string;
UpdateStatus( status: string ): string
{
...manipulate status...
return status;
}
}類(lèi)似于 C# 的較新版本，在定義屬性時(shí)，不需要提供實(shí)現(xiàn)代碼。此名稱(chēng)和類(lèi)型的簡(jiǎn)單聲明就足夠了。類(lèi)可以實(shí)現(xiàn)一個(gè)或多個(gè)接口，如圖 1中所示，通過(guò)其屬性將我的 ICustomerShort 接口添加到我的 CustomerShort 類(lèi)。
圖 1 將接口添加到類(lèi)
class CustomerShort implements ICustomerShort
{
Id: number;
FullName: string;
UpdateStatus(status: string): string
{
...manipulate status...
return status;
}
CalculateDiscount(): number
{
var discAmount: number;
...calculate discAmount...
return discAmount;
}
}如圖 1所示，在 TypeScript 中實(shí)現(xiàn)接口的語(yǔ)法與在 C# 中的實(shí)現(xiàn)一樣簡(jiǎn)單。要實(shí)現(xiàn)此接口的成員，您只需添加帶有相同名稱(chēng)的成員，而無(wú)需將接口名稱(chēng)綁定到相關(guān)類(lèi)成員。在此示例中，我只將 Id 和 CalculateDiscount 添加到了類(lèi)以實(shí)現(xiàn) ICustomerShort。TypeScript 還允許您使用對(duì)象類(lèi)型文字。此代碼將變量 cst 設(shè)置為包含一個(gè)屬性和一個(gè)方法的對(duì)象文字：
var csl = {
Age: 61,
HaveBirthday(): number
{
return this.Age++;
}
};此示例使用對(duì)象類(lèi)型指定 UpdateStatus 方法的返回值：
UpdateStatus( status: string ): {
status: string; valid: boolean }
{
return {status: "New",
valid: true
};
}除了對(duì)象類(lèi)型（類(lèi)、接口、文字和數(shù)組）之外，您還可以定義描述函數(shù)簽名的函數(shù)類(lèi)型。以下代碼對(duì)我的 CustomerShort 類(lèi)的 CalculateDiscount 進(jìn)行重寫(xiě)以接受名為 discountAmount 的單個(gè)參數(shù)：
interface ICustomerShort
{
Id: number;
CalculateDiscount( discountAmount:
( discountClass: string,
multipleDiscount: boolean ) => number): number
}使用接受兩個(gè)參數(shù)（一個(gè)字符串參數(shù)、一個(gè)布爾參數(shù)）的函數(shù)類(lèi)型對(duì)該參數(shù)進(jìn)行定義，并返回一個(gè)數(shù)字。如果您是 C# 開(kāi)發(fā)人員，您可能會(huì)發(fā)現(xiàn)此語(yǔ)法看上去像是 lambda 表達(dá)式。
實(shí)現(xiàn)此接口的類(lèi)如圖 2所示。
圖 2 此類(lèi)實(shí)現(xiàn)適當(dāng)?shù)慕涌?/strong>
class CustomerShort implements ICustomerShort
{
Id: number;
FullName: string;
CalculateDiscount( discountedAmount:
( discountClass: string,
multipleDiscounts: boolean ) => number ): number
{
var discAmount: number;
...calculate discAmount...
return discAmount;
}
}類(lèi)似于 C# 的較新版本，TypeScript 還可以從初始化變量的值，推斷出此變量的數(shù)據(jù)類(lèi)型。在此示例中，TypeScript 假設(shè)變量 myCust 為 CustomerShort：
var myCust= new CustomerShort(); myCust.FullName = "Peter Vogel";
類(lèi)似于 C#，您可以使用接口來(lái)聲明變量，然后將此變量設(shè)置為實(shí)現(xiàn)此接口的對(duì)象：
var cs: ICustomerShort; cs = new CustomerShort(); cs.Id = 11; cs.FullName = "Peter Vogel";
最后，您還可以使用類(lèi)型參數(shù)（看起來(lái)很像 C# 中的泛型）來(lái)使調(diào)用代碼指定要使用的數(shù)據(jù)類(lèi)型。此示例允許創(chuàng)建類(lèi)的代碼設(shè)置 Id 屬性的數(shù)據(jù)類(lèi)型：
class CustomerTyped{ Id: T; }
此代碼先將 Id 屬性的數(shù)據(jù)類(lèi)型設(shè)置為字符串，然后才使用它：
var cst: CustomerTyped; cst = new CustomerTyped (); cst.Id = "A123";
要隔離類(lèi)、接口和其他公共成員并避免名稱(chēng)沖突，您可以在與 C# 命名空間類(lèi)似的模塊中聲明這些構(gòu)造。您必須使用導(dǎo)出關(guān)鍵字標(biāo)記這些您希望提供給其他模塊使用的項(xiàng)。圖 3中的模塊導(dǎo)出兩個(gè)接口和一個(gè)類(lèi)。
圖 3 導(dǎo)出兩個(gè)接口和一個(gè)類(lèi)
module TypeScriptSample
{
export interface ICustomerDTO
{
Id: number;
}
export interface ICustomerShort extends ICustomerDTO
{
FullName: string;
}
export class CustomerShort implements ICustomerShort
{
Id: number;
FullName: string;
}要使用導(dǎo)出的組件，您可以使用模塊名稱(chēng)作為此組件名稱(chēng)的前綴，如以下示例中所示：
var cs: TypeScriptSample.CustomerShort;
或者，您可以使用 TypeScript 導(dǎo)入關(guān)鍵字來(lái)建立此模塊的快捷方式：
import tss = TypeScriptSample; ... var cs:tss.CustomerShort;
如果您是 C# 程序員，除了可能的變量聲明反轉(zhuǎn)（變量名稱(chēng)在前，數(shù)據(jù)類(lèi)型在后）和對(duì)象文字之外，您對(duì)這一切應(yīng)該非常熟悉。然而，TypeScript 中幾乎所有數(shù)據(jù)類(lèi)型化都是可選的。此規(guī)范將數(shù)據(jù)類(lèi)型描述為“注釋”。如果您省略數(shù)據(jù)類(lèi)型（并且 TypeScript 無(wú)法推斷出此數(shù)據(jù)類(lèi)型），則數(shù)據(jù)類(lèi)型默認(rèn)為 any 類(lèi)型。
TypeScript 也不要求數(shù)據(jù)類(lèi)型嚴(yán)格匹配。TypeScript 使用規(guī)范稱(chēng)為“結(jié)構(gòu)子類(lèi)型化”的功能來(lái)確定兼容性。這與通常稱(chēng)為“鴨子類(lèi)型化”的功能類(lèi)似。在 TypeScript 中，如果兩個(gè)類(lèi)擁有具有相同類(lèi)型的成員，就將他們視為相同。例如，以下是一個(gè)實(shí)現(xiàn) ICustomerShort 接口的 CustomerShort 類(lèi)：
interface ICustomerShort
{
Id: number;
FullName: string;
}
class CustomerShort implements ICustomerShort
{
Id: number;
FullName: string;
}以下是一個(gè)與我的 CustomerShort 類(lèi)相似的 CustomerDeviant 類(lèi)：
class CustomerDeviant
{
Id: number;
FullName: string;
}借助結(jié)構(gòu)子類(lèi)型化，我可以使用帶有使用我的 CustomerShort 類(lèi)或 ICustomerShort 接口定義的變量的 CustomerDevient。這些示例將 CustomerDeviant 與聲明為 CustomerShort 或 ICustomerShort 的變量互換使用：
var cs: CustomerShort; cs = new CustomerDeviant cs.Id = 11; var csi: ICustomerShort; csi = new CustomerDeviant csi.FullName = "Peter Vogel";
這種靈活性使您可以將 TypeScript 對(duì)象文字分配給聲明為類(lèi)或接口的變量，假設(shè)它們?cè)诮Y(jié)構(gòu)上兼容，如以下示例所示：
var cs: CustomerShort;
cs = {Id: 2,
FullName: "Peter Vogel"
}
var csi: ICustomerShort;
csi = {Id: 2,
FullName: "Peter Vogel"
}這會(huì)引入導(dǎo)致可分配性常見(jiàn)問(wèn)題的有關(guān)明顯類(lèi)型、父類(lèi)型和子類(lèi)型的 TypeScript 特定功能，本文將跳過(guò)這部分內(nèi)容。例如，這些功能將允許 CustomerDeviant 擁有 CustomerShort 中不存在的成員，而不會(huì)導(dǎo)致我的示例代碼失敗。
TypeScript 規(guī)范將此語(yǔ)言稱(chēng)作實(shí)現(xiàn)“在面向?qū)ο蟮睦^承機(jī)制上[使用]原型鏈來(lái)實(shí)現(xiàn)許多變體的類(lèi)模式”。實(shí)際上，這意味著 TypeScript 不只是數(shù)據(jù)類(lèi)型化，而是高效地面向?qū)ο蟮摹?/p>
與 C# 接口可以從基接口進(jìn)行繼承一樣，TypeScript 接口也可以采用相同的方式擴(kuò)展另一個(gè)接口，即使另一個(gè)接口是在其他模塊中定義的。此示例擴(kuò)展了 ICustomerShort 接口并創(chuàng)建了名為 ICustomerLong 的新接口：
interface ICustomerShort
{
Id: number;
}
interface ICustomerLong extends ICustomerShort
{
FullName: string;
}ICustomerLong 接口將擁有兩個(gè)成員：FullName 和 Id。在合并的接口中，先顯示來(lái)自此接口的成員。因此，我的 ICustomerLong 接口相當(dāng)于此接口：
interface ICustomerLongPseudo
{
FullName: string;
Id: number;
}實(shí)現(xiàn) ICustomerLong 的類(lèi)將需要這兩個(gè)屬性：
class CustomerLong implements ICustomerLong
{
Id: number;
FullName: string;
}類(lèi)可以用接口擴(kuò)展另一個(gè)接口的方式來(lái)擴(kuò)展其他類(lèi)。圖 4中的類(lèi)擴(kuò)展了 CustomerShort，并將新屬性添加到定義中。它使用顯式 getter 和 setter 來(lái)定義屬性（盡管這不是一個(gè)特別有用的方法）。
圖 4 使用 getter 和 setter 定義的屬性
class CustomerShort
{
Id: number;
}
class CustomerLong extends CustomerLong
{
private id: number;
private fullName: string;
get Id(): number
{
return this.id
}
set Id( value: number )
{
this.id = value;
}
get FullName(): string
{
return this.fullName;
}
set FullName( value: string )
{
this.fullName = value;
}
}TypeScript 采用通過(guò)引用此類(lèi) (this) 訪問(wèn)內(nèi)部字段（如 id 和 fullName）的最佳做法。這些類(lèi)還可以具有包含 C# 剛采用的功能的構(gòu)造函數(shù)：自動(dòng)定義字段。TypeScript 類(lèi)中的構(gòu)造函數(shù)必須命名為構(gòu)造函數(shù)，其公共參數(shù)會(huì)自動(dòng)定義為屬性，并從傳遞給這些屬性的值進(jìn)行初始化。在此示例中，構(gòu)造函數(shù)將接受字符串類(lèi)型的名為 Company 的單個(gè)參數(shù)：
export class CustomerShort implements ICustomerShort
{
constructor(public Company: string)
{ }由于 Company 參數(shù)定義為公共，此類(lèi)還獲取一個(gè)從傳遞給構(gòu)造函數(shù)的值初始化而來(lái)的名為 Company 的公共屬性。借助該功能，變量 comp 將設(shè)置為“PH&VIS”，如該示例所示：
var css: CustomerShort; css = new CustomerShort( "PH&VIS" ); var comp = css.Company;
將構(gòu)造函數(shù)的參數(shù)聲明為私有會(huì)創(chuàng)建一個(gè)內(nèi)部屬性，此內(nèi)部屬性只能通過(guò)關(guān)鍵字 this 從類(lèi)成員內(nèi)部的代碼進(jìn)行訪問(wèn)。如果此參數(shù)沒(méi)有聲明為公共或私有，則不會(huì)生成屬性。
您的類(lèi)必須擁有一個(gè)構(gòu)造函數(shù)。正如在 C# 中一樣，如果您未提供一個(gè)構(gòu)造函數(shù)，系統(tǒng)將向您提供一個(gè)。如果您的類(lèi)擴(kuò)展了其他類(lèi)，則您創(chuàng)建的任何構(gòu)造函數(shù)必須包含對(duì) super 的調(diào)用。將調(diào)用正在擴(kuò)展的類(lèi)上的構(gòu)造函數(shù)。此示例包括帶有 super 調(diào)用的構(gòu)造函數(shù)，該調(diào)用向基類(lèi)的構(gòu)造函數(shù)提供參數(shù)：
class MyBaseClass
{
constructor(public x: number, public y: number ) { }
}
class MyDerivedClass extends MyBaseClass
{
constructor()
{
super(2,1);
}
}同樣，如果您是 C# 程序員，除了一些有趣的關(guān)鍵字 (extends) 之外，您對(duì)這一切都會(huì)感到熟悉。但是同樣，擴(kuò)展類(lèi)或接口與 C# 中的繼承機(jī)制并不完全相同。TypeScript 規(guī)范針對(duì)被擴(kuò)展的類(lèi)（“基類(lèi)”）和擴(kuò)展它的類(lèi)（“派生類(lèi)”）使用常規(guī)術(shù)語(yǔ)。但是，例如，此規(guī)范將一個(gè)類(lèi)稱(chēng)為“遺產(chǎn)規(guī)范”，而沒(méi)有使用單詞“繼承”。
首先，在定義基類(lèi)時(shí)，TypeScript 的選項(xiàng)要少于 C# 的選項(xiàng)。您無(wú)法將類(lèi)或成員聲明為不能替代的、抽象的或虛擬的（盡管接口提供了很多虛擬基類(lèi)所提供的功能）。
無(wú)法防止一些成員不能被繼承。派生類(lèi)繼承基類(lèi)的所有成員，包括公共和私有成員（基類(lèi)的所有公共成員都可替代，而私有成員都不可替代）。要替代公共成員，只需在派生類(lèi)中使用相同簽名定義一個(gè)成員。雖然您可以使用 super 關(guān)鍵字來(lái)從派生類(lèi)訪問(wèn)公共方法，但無(wú)法使用 super 訪問(wèn)基類(lèi)中的屬性（盡管您可以替代此屬性）。
TypeScript 允許您通過(guò)簡(jiǎn)單地使用相同名稱(chēng)和新成員聲明接口來(lái)增加一個(gè)接口。這允許您擴(kuò)展現(xiàn)有 JavaScript 代碼，而無(wú)需創(chuàng)建新的命名類(lèi)型。圖 5中的示例通過(guò)兩個(gè)單獨(dú)的接口定義來(lái)定義 ICustomerMerge 接口，然后在類(lèi)中實(shí)現(xiàn)該接口。
圖 5 通過(guò)兩個(gè)接口定義來(lái)定義的 ICustomerMerge 接口
interface ICustomerMerge
{
MiddleName: string;
}
interface ICustomerMerge
{
Id: number;
}
class CustomerMerge implements ICustomerMerge
{
Id: number;
MiddleName: string;
}這些類(lèi)還可以擴(kuò)展其他類(lèi)，但不能擴(kuò)展接口。在 TypeScript 中，接口也可以擴(kuò)展類(lèi)，但只能以涉及繼承的方式實(shí)現(xiàn)。當(dāng)接口擴(kuò)展類(lèi)時(shí)，接口包括所有類(lèi)成員（公共和私有），但不包括此類(lèi)的實(shí)現(xiàn)。在圖 6中，ICustomer 接口將擁有私有成員 id、公共成員 Id 以及公共成員 MiddleName。
圖 6 帶有所有成員的擴(kuò)展類(lèi)
class Customer
{
private id: number;
get Id(): number
{
return this.id
}
set Id( value: number )
{
this.id = value;
}
}
interface ICustomer extends Customer
{
MiddleName: string;
}ICustomer 接口具有很大的限制，您只能將其與擴(kuò)展該接口所擴(kuò)展的類(lèi)（在本示例中，為 Customer 類(lèi)）的類(lèi)結(jié)合使用。TypeScript 需要您在要從此接口擴(kuò)展的類(lèi)上繼承的接口中（而不是在派生類(lèi)中重新實(shí)現(xiàn)的接口上）包括私有成員。例如，使用 ICustomer 接口的新類(lèi)需要為 MiddleName 提供一個(gè)實(shí)現(xiàn)（因?yàn)?MiddleName 只在此接口中指定）。使用 ICustomer 的開(kāi)發(fā)人員可以選擇從 Customer 類(lèi)繼承或替代公共方法，但無(wú)法替代私有 id 成員。
此示例展示了根據(jù)需要實(shí)現(xiàn) ICustomer 接口并擴(kuò)展 Customer 類(lèi)的類(lèi)（稱(chēng)為 NewCustomer）。在本示例中，NewCustomer 從 Customer 繼承 Id 的實(shí)現(xiàn)，并為 MiddleName 提供一個(gè)實(shí)現(xiàn)：
class NewCustomer extends Customer implements ICustomer
{
MiddleName: string;
}這一接口、類(lèi)、實(shí)現(xiàn)和擴(kuò)展的組合為您進(jìn)行定義用于擴(kuò)展在其他對(duì)象模型中定義的類(lèi)的類(lèi)提供了一種受控的方式（有關(guān)詳細(xì)信息，請(qǐng)查看語(yǔ)言規(guī)范 7.3 部分，“擴(kuò)展類(lèi)的接口”）。再加上 TypeScript 使用其他 JavaScript 庫(kù)相關(guān)信息的能力，TypeScript 可以讓您編寫(xiě)與在那些庫(kù)中定義的對(duì)象配合使用的 TypeScript 代碼。
除了了解在您的應(yīng)用程序中定義的類(lèi)和接口，您可以向 TypeScript 提供有關(guān)其他對(duì)象庫(kù)的信息?？梢酝ㄟ^(guò) TypeScript 聲明關(guān)鍵字進(jìn)行處理。這就創(chuàng)建了規(guī)范所指的“環(huán)境聲明”。您可能從來(lái)不需要親自使用聲明關(guān)鍵字，因?yàn)槟梢栽?DefinitelyTyped 站點(diǎn) (definitelytyped.org) 上找到大多數(shù) JavaScript 庫(kù)的定義文件。通過(guò)這些定義文件，TypeScript 可以高效地“閱讀有關(guān)您需使用的庫(kù)的文檔”。
當(dāng)然，在使用構(gòu)成該庫(kù)的對(duì)象時(shí)，“閱讀文檔”意味著您將獲取數(shù)據(jù)類(lèi)型化的 IntelliSense 支持和編譯時(shí)檢查。在某些情況下，這還允許 TypeScript 從使用變量的上下文中推斷出變量的類(lèi)型。借助于隨 TypeScript 提供的 lib.d.ts 定義文件，TypeScript 假設(shè)在以下代碼中變量定位標(biāo)記的類(lèi)型為 HTMLAnchorElement：
var anchor = document.createElement( "a" );
當(dāng) createElement 方法傳遞字符串“a”時(shí)，此定義文件指定這就是由此方法所返回的結(jié)果。例如，知道定位標(biāo)記是 HTMLAnchorElement，意味著 TypeScript 知道定位標(biāo)記變量將支持 addEventListener 方法。
TypeScript 數(shù)據(jù)類(lèi)型接口還適用于參數(shù)類(lèi)型。例如，addEventListener 方法接受兩個(gè)參數(shù)。第二個(gè)為函數(shù)，addEventListener 在其中傳遞了類(lèi)型 PointerEvent 的對(duì)象。TypeScript 知道這一點(diǎn)，并支持訪問(wèn)此函數(shù)中 PointerEvent 類(lèi)的 cancelBubble 屬性：
span.addEventListener("pointerenter", function ( e )
{
e.cancelBubble = true;
}其他 JavaScript 的定義文件以 lib.d.ts 提供 HTML DOM 相關(guān)信息的方式提供類(lèi)似的功能。例如，在將 backbone.d.ts 文件添加到我的項(xiàng)目之后，我可以聲明一個(gè)類(lèi)，該類(lèi)擴(kuò)展了 Backbone Model 類(lèi)并通過(guò)如下代碼實(shí)現(xiàn)了我的接口：
class CustomerShort extends bb.Model implements ICustomerShort
{
}如果您對(duì)如何將 TypeScript 與 Backbone、Knockout 結(jié)合使用的詳細(xì)信息感興趣，請(qǐng)查閱我的實(shí)用 TypeScript 專(zhuān)欄 （bit.ly/1BRh8NJ）。在新的一年中，我將詳細(xì)研究如何將 TypeScript 與 Angular 結(jié)合使用。
TypeScript 的功能遠(yuǎn)不止此。TypeScript 版本 1.3 將來(lái)必定包括 union 數(shù)據(jù)類(lèi)型（例如，以便支持返回特定類(lèi)型列表的函數(shù)）和聚合。TypeScript 團(tuán)隊(duì)正在與將數(shù)據(jù)類(lèi)型化應(yīng)用于 JavaScript（Flow 和 Angular）的其他團(tuán)隊(duì)合作，以確保 TypeScript 可以與盡可能多的 JavaScript 庫(kù)結(jié)合使用。
如果您需要執(zhí)行 JavaScript 支持而 TypeScript 不允許的操作，則可以始終集成您的 JavaScript 代碼，因?yàn)?TypeScript 是 JavaScript 的超集。
以上是“TypeScript是什么意思”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
