TypeScript對于Duck類型和模塊命名空間怎么應用

今天小編給大家分享一下TypeScript對于Duck類型和模塊命名空間怎么應用的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

一.TypeScript 鴨子類型

Duck類型是一種動態類型和多態形式。
在這種風格中，對象的有效語義不是通過從特定類繼承或實現特定接口來確定的，而是通過“當前方法和屬性的集合”來確定的。

var object_name = { 
    key1: "value1", // 標量
    key2: "value",  
    key3: function() {
        // 函數
    }, 
    key4:["content1", "content2"] //集合
}

在duck類型中，重點是對象的行為可以做什么，而不是對象所屬的類型。
例如，在不使用duck類型的語言中，我們可以編寫一個函數，該函數接受“duck”類型的對象并調用其“walk”和“call”方法。
在使用duck類型的語言中，這樣的函數可以接受任何類型的對象并調用其“go”和“call”方法。
如果這些需要調用的方法不存在，則會引發運行時錯誤。具有這種正確的“go”和“call”方法的任何對象都可以被函數接受。
此行為導致上述表達式，并將此確定類型的方法命名為鴨子類型。

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 命名空間

名稱空間最明確的目的之一是解決重復名稱的問題。
假設班上有兩個叫小明的學生。為了清楚地區分他們，我們必須使用他們名字之外的一些附加信息，例如他們的姓氏（王曉明、李曉明）或他們父母的名字。
命名空間定義標識符的可見范圍。一個標識符可以在多個名稱空間中定義，它在不同名稱空間中的含義是無關的。這樣，任何標識符都可以在新名稱空間中定義，并且它們不會與任何現有標識符沖突，因為現有定義在其他名稱空間中。

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模塊設計有可替換的組織代碼。
模塊在其自己的范圍內執行，而不是在全局范圍內，這意味著模塊中定義的變量、函數和類在模塊外部不可見，除非它們使用導出顯式導出。
同樣，我們必須導入其他模塊通過導入導出的變量、函數、類等。
這兩個模塊之間的關系是通過在文件級使用導入和導出來建立的。
模塊使用模塊加載器導入其他模塊。在運行時，模塊加載器的功能是在執行模塊代碼之前查找并執行模塊的所有依賴項。最常見的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在開發過程中不可避免地引用了其他第三方JavaScript庫。
雖然可以通過直接引用調用庫的類和方法，但不能使用類型腳本功能，如類型檢查。
為了解決這個問題，我們需要刪除這些庫中的函數和方法體，只保留導出的類型聲明。
相反，將生成描述JavaScript庫和模塊信息的聲明文件。
通過引用此聲明文件，可以借用typescript的各種功能來使用庫文件。

如果我們想使用第三方庫，比如jQuery，我們通常會得到一個ID為foo的元素，如下所示：

$('#foo');
// 或
jQuery('#foo');

但在typescript中，我們不知道$jQuery是什么：

jQuery('#foo');

// index.ts(1,1): error TS2304: Cannot find name 'jQuery'.

此時，我們需要使用declare關鍵字定義其類型，以幫助typescript判斷傳入的參數類型是否正確：

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類型和模塊命名空間怎么應用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。