TypeScript对于Duck类型和模块命名空间的应用实战

简介: TypeScript对于Duck类型和模块命名空间的应用实战

@[toc]

一.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" />

在这里插入图片描述

相关文章
|
1月前
|
设计模式 JavaScript 安全
TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等
本文深入探讨了TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等,旨在帮助开发者在保证代码质量的同时,实现高效的性能优化,提升用户体验和项目稳定性。
46 6
|
1月前
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
59 4
|
1月前
|
机器学习/深度学习 人工智能 JavaScript
JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景
本文探讨了JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景。JavaScript将注重性能优化、跨平台开发、AI融合及WebAssembly整合;TypeScript则强调与框架整合、强类型检查、前端工程化及WebAssembly的深度结合。两者结合发展,特别是在Vue 3.0中完全采用TypeScript编写,预示着未来的Web开发将更加高效、可靠。
49 4
|
1月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
41 2
|
1月前
|
JavaScript 安全 前端开发
TypeScript类型声明:基础与进阶
通过本文的介绍,我们详细探讨了TypeScript的基础与进阶类型声明。从基本数据类型到复杂的泛型和高级类型,TypeScript提供了丰富的工具来确保代码的类型安全和可维护性。掌握这些类型声明能够帮助开发者编写更加健壮和高效的代码,提高开发效率和代码质量。希望本文能为您在使用TypeScript时提供实用的参考和指导。
39 2
|
1月前
|
JavaScript 开发者
在 Babel 插件中使用 TypeScript 类型
【10月更文挑战第23天】可以在 Babel 插件中更有效地使用 TypeScript 类型,提高插件的开发效率和质量,减少潜在的类型错误。同时,也有助于提升代码的可理解性和可维护性,使插件的功能更易于扩展和升级。
|
2月前
|
JavaScript 数据管理 编译器
揭秘 ArkTS 与 TypeScript 的神秘差异:鸿蒙系统开发者的必备知识与实战技巧
【10月更文挑战第18天】ArkTS 是华为为鸿蒙系统(HarmonyOS)推出的开发语言,作为 TypeScript 的超集,它针对鸿蒙系统的分布式特性和需求进行了优化和扩展。ArkTS 强化了分布式数据管理、类型系统、编译与运行时性能,并支持声明式 UI 和专为鸿蒙设计的 API,使开发者能够更高效地开发跨设备协同工作的应用。
182 6
|
1月前
|
JavaScript 前端开发 安全
TypeScript进阶:类型系统与高级类型的应用
【10月更文挑战第25天】TypeScript作为JavaScript的超集,其类型系统是其核心特性之一。本文通过代码示例介绍了TypeScript的基本数据类型、联合类型、交叉类型、泛型和条件类型等高级类型的应用。这些特性不仅提高了代码的可读性和可维护性,还帮助开发者构建更健壮的应用程序。
34 0
|
3月前
|
JavaScript
typeScript进阶(9)_type类型别名
本文介绍了TypeScript中类型别名的概念和用法。类型别名使用`type`关键字定义,可以为现有类型起一个新的名字,使代码更加清晰易懂。文章通过具体示例展示了如何定义类型别名以及如何在函数中使用类型别名。
49 1
typeScript进阶(9)_type类型别名
|
2月前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
64 0