写点什么

开源一夏 | TypeScript 对于 Duck 类型和模块命名空间的应用实战

作者:黎燃
  • 2022 年 8 月 15 日
    内蒙古
  • 本文字数:2178 字

    阅读完需:约 7 分钟

一.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 定义的类型仅用于编译时的检查,并将从编译结果中删除。上述示例的编译结果是:


jQuery('#foo');
复制代码


声明文件以 .d.ts 为后缀,例如:


runoob.d.ts
复制代码


声明文件或模块的语法格式如下:


declare module Module_Name {}
复制代码


Typescript 导入声明文件语法格式:


/// <reference path = " runoob.d.ts" />
复制代码



发布于: 刚刚阅读数: 6
用户头像

黎燃

关注

前端工程师 2022.05.06 加入

专注学习分享前端知识。

评论

发布
暂无评论
开源一夏 | TypeScript对于Duck类型和模块命名空间的应用实战_开源_黎燃_InfoQ写作社区