TypeScript對于Duck類型和模塊命名空間應用
一.TypeScript 鴨子類型
Duck類型是一種動態(tài)類型和多態(tài)形式。
在這種風格中,對象的有效語義不是通過從特定類繼承或實現(xiàn)特定接口來確定的,而是通過“當前方法和屬性的集合”來確定的。
var object_name = {
key1: "value1", // 標量
key2: "value",
key3: function() {
// 函數(shù)
},
key4:["content1", "content2"] //集合
}在duck類型中,重點是對象的行為可以做什么,而不是對象所屬的類型。
例如,在不使用duck類型的語言中,我們可以編寫一個函數(shù),該函數(shù)接受“duck”類型的對象并調用其“walk”和“call”方法。
在使用duck類型的語言中,這樣的函數(shù)可以接受任何類型的對象并調用其“go”和“call”方法。
如果這些需要調用的方法不存在,則會引發(fā)運行時錯誤。具有這種正確的“go”和“call”方法的任何對象都可以被函數(shù)接受。
此行為導致上述表達式,并將此確定類型的方法命名為鴨子類型。
interface IPoint {
x:number
y:number
}
function addPoints(p1:IPoint,p2:IPoint):IPoint {
var x = p1.x + p2.x
var y = p1.y + p2.y
return {x:x,y:y}
}
// 正確
var newPoint = addPoints({x:3,y:4},{x:5,y:1})
// 錯誤
var newPoint2 = addPoints({x:1},{x:4,y:3})二.TypeScript 命名空間
名稱空間最明確的目的之一是解決重復名稱的問題。
假設班上有兩個叫小明的學生。為了清楚地區(qū)分他們,我們必須使用他們名字之外的一些附加信息,例如他們的姓氏(王曉明、李曉明)或他們父母的名字。
命名空間定義標識符的可見范圍。一個標識符可以在多個名稱空間中定義,它在不同名稱空間中的含義是無關的。這樣,任何標識符都可以在新名稱空間中定義,并且它們不會與任何現(xiàn)有標識符沖突,因為現(xiàn)有定義在其他名稱空間中。
typescript中的命名空間由命名空間定義。語法格式如下:
namespace SomeNameSpaceName {
export interface ISomeInterfaceName { }
export class SomeClassName { }
}上面定義了一個名稱空間somenamespacename。
如果我們需要在外部調用somenamespacename中的類和接口,我們需要向類和接口添加export關鍵字。
要調用另一個命名空間,語法格式為:
SomeNameSpaceName.SomeClassName;
如果命名空間位于單獨的typescript文件中,則應使用三個斜杠///引用它。
語法格式如下:
/// <reference path = "SomeFileName.ts" />
namespace Drawing {
export interface IShape {
draw();
}
}名稱空間支持嵌套,也就是說,可以在另一個名稱空間中定義名稱空間。
namespace Runoob {
export namespace invoiceApp {
export class Invoice {
public calculateDiscount(price: number) {
return price * .40;
}
}
}
}三.TypeScript 模塊
typescript模塊設計有可替換的組織代碼。
模塊在其自己的范圍內執(zhí)行,而不是在全局范圍內,這意味著模塊中定義的變量、函數(shù)和類在模塊外部不可見,除非它們使用導出顯式導出。
同樣,我們必須導入其他模塊通過導入導出的變量、函數(shù)、類等。
這兩個模塊之間的關系是通過在文件級使用導入和導出來建立的。
模塊使用模塊加載器導入其他模塊。在運行時,模塊加載器的功能是在執(zhí)行模塊代碼之前查找并執(zhí)行模塊的所有依賴項。最常見的JavaScript模塊加載器是為node JS和require提供服務。用于web應用程序的js。
此外,還有systemjs和webpack。
模塊導出使用關鍵字export。語法格式如下:
// 文件名 : SomeInterface.ts
export interface SomeInterface {
// 代碼部分
}要在其他文件中使用此模塊,需要使用導入關鍵字進行導入:
import someInterfaceRef = require("./SomeInterface");TestShape.js 文件代碼為:
define(["require", "exports", "./Circle", "./Triangle"],
function (require, exports, circle, triangle) {
function drawAllShapes(shapeToDraw) {
shapeToDraw.draw();
}
drawAllShapes(new circle.Circle());
drawAllShapes(new triangle.Triangle());
});四.類型腳本聲明文件
作為JavaScript的超集,typescript在開發(fā)過程中不可避免地引用了其他第三方JavaScript庫。
雖然可以通過直接引用調用庫的類和方法,但不能使用類型腳本功能,如類型檢查。
為了解決這個問題,我們需要刪除這些庫中的函數(shù)和方法體,只保留導出的類型聲明。
相反,將生成描述JavaScript庫和模塊信息的聲明文件。
通過引用此聲明文件,可以借用typescript的各種功能來使用庫文件。
如果我們想使用第三方庫,比如jQuery,我們通常會得到一個ID為foo的元素,如下所示:
$('#foo');
// 或
jQuery('#foo');但在typescript中,我們不知道$jQuery是什么:
jQuery('#foo');
// index.ts(1,1): error TS2304: Cannot find name 'jQuery'.此時,我們需要使用declare關鍵字定義其類型,以幫助typescript判斷傳入的參數(shù)類型是否正確:
declare var jQuery: (selector: string) => any;
jQuery('#foo');declare定義的類型僅用于編譯時的檢查,并將從編譯結果中刪除。
上述示例的編譯結果是:
聲明文件以 .d.ts 為后綴,例如:
runoob.d.ts
聲明文件或模塊的語法格式如下:
declare module Module_Name {
}Typescript導入聲明文件語法格式:
/// <reference path = " runoob.d.ts" />

到此這篇關于TypeScript對于Duck類型和模塊命名空間應用的文章就介紹到這了,更多相關TypeScript Duck類型內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
基于leaflet.js實現(xiàn)修改地圖主題樣式的流程分析
這篇文章主要介紹了基于leaflet.js實現(xiàn)修改地圖主題樣式的流程,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
Bootstrap入門教程一Hello Bootstrap初識
Bootstrap,來自 Twitter,是目前很受歡迎的前端框架。Bootstrap是基于 HTML5、CSS3和Javascriopt開發(fā)的。這篇文章主要介紹了基于Bootstrap3實現(xiàn)漂亮簡潔的CSS3價格表(精美代碼版),需要的朋友可以參考下2017-03-03

