TypeScript鸭子类型、命名空间及模块声明文件实战指南

一.TypeScript 鸭子类型

鸭子类型属于动态类型与多态的一种表现形式。在此机制下，对象的合法性并非取决于其是否继承自特定类或实现了特定接口，而是由其所拥有的方法与属性集合决定。

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

鸭子类型的核心在于关注对象的行为能力，而非其所属的具体类型。例如，在不支持鸭子类型的语言中，若需编写一个接受“鸭子”对象并调用其“walk”和“call”方法的函数，必须严格限定参数类型。而在支持鸭子类型的语言中，该函数可接受任意对象，只要该对象具备“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的命名空间。若需在外部调用该命名空间内的类和接口，必须为类和接口添加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模块旨在提供可替换的代码组织方式。模块在自身作用域内执行，而非全局作用域，这意味着模块内定义的变量、函数和类在外部不可见，除非通过export显式导出。同样，必须通过import导入其他模块中导出的变量、函数或类。模块间关系通过文件级的import和export语句建立。模块利用模块加载器引入依赖，模块加载器在执行代码前会查找并执行所有依赖项。常见的JavaScript模块加载器包括Node.js的require、Web应用的SystemJS以及Webpack等。

模块导出使用export关键字，语法格式如下：

// 文件名 : SomeInterface.ts 
export interface SomeInterface { 
   // 代码部分
}

若要在其他文件中使用该模块，需使用import关键字进行导入：

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库。直接调用库的类和方法虽可行，但无法利用TypeScript的类型检查等功能。为解决此问题，需移除库中的函数和方法体，仅保留导出的类型声明，并生成描述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 鸭子类型

本文关于TypeScript鸭子类型与模块命名空间的应用介绍至此，更多相关内容可搜索本站历史文章或继续浏览后续文章，感谢支持。

TypeScript鸭子类型与命名空间模块应用详解

一.TypeScript 鸭子类型

二.TypeScript 命名空间

三.TypeScript 模块

四.类型脚本声明文件

实用工具推荐