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

目录
  • 一.TypeScript 鸭子类型
  • 二.TypeScript 命名空间
  • 三.TypeScript 模块
  • 四.类型脚本声明文件

一.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类型和模块命名空间应用的文章就介绍到这了,更多相关TypeScript Duck类型内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 你需要知道的TypeScript高级类型总结

    目录 1. 字面量类型 (1)字符串字面量类型 (2)数字字面量类型 (3)布尔字面量类型 (4)模板字面量类型 2. 联合类型 (1)基本使用 (2)限制 (3)可辨识联合类型 3. 交叉类型 (1)基本实用 (2)使用场景 4. 索引类型 (1)索引类型查询操作符 (2)索引访问操作符 (3)应用 5. 条件类型 (1)基本概念 (2)创建自定义条件类型 (3)条件类型的类型推断 6. 类型推断 (1)基础类型 (2)多类型联合 (3)上下文类型 7. 类型保护 (1)instanceof

  • 使用typescript推导已有变量的盲盒类型详情

    目录 迁移盲盒 类型推导 基础类型的推导 对象的推导 数组的推导 函数的推导 完善推导 测试 迁移盲盒 当我们从JavaScript一键转换Typescript的时候,any便是最省事的做法,对于维护并不友好(虽然能跑就行),同时每个变量对于我们来说都是盲盒,它到底是什么类型? 类型推导 基础类型的推导 基础数据类型的类型推导还是挺简单的 let a = 1; type A = typeof a; // number; let b = '2' type B = typeof b; // stri

  • TypeScript中命名空间与模块化详情

    目录 一.模块 二.命名空间 三.区别 一.模块 TypeScript 与ECMAScript 2015 一样,任何包含顶级 import 或者 export 的文件都被当成一个模块 相反地,如果一个文件不带有顶级的import或者export声明,那么它的内容被视为全局可见的 例如我们在在一个 TypeScript 工程下建立一个文件 1.ts,声明一个变量a,如下: const a = 1 然后在另一个文件同样声明一个变量a,这时候会出现错误信息 提示重复声明a变量,但是所处的空间是全局的

  • 使用typescript类型实现ThreeSum

    目录 前言 思路整理 实现TwoSum 实现减法 元祖中是否包含差值 递归元组 测试 实现ThreeSum 实现排序 实现ThreeSum 测试 前言 本文执行环境typescript,版本4.7.4 不使用typescript的计算能力,通过类型来实现ThreeSum 思路整理 实现ThreeSum之前我们先降低下难度,实现TwoSum,因为TwoSum可以作为ThreeSum的基础泛型 TwoSum需要准备什么呢? 递归元组,模拟for循环 减法,递归过程中求出差值 对每一项差值判断是否存在

  • 使用typescript类型来实现快排详情

    目录 前言 元组快排 实现逻辑 实现数字的大小比较 实现 A 是否 小于或等于 B 实现 A 是否 大于或等于 B 实现Filter 优化Filter 重构数字的大小值比较 重构Filter 实现快排 测试快排 优化:负数 负数的判断 字符串转数字 获取负数的值 完善获取绝对值 重构数字的大小比较 重构快排 测试快排V2 前言 本文执行环境typescript,版本4.7.4 不使用typescript的计算能力,通过类型来实现快排 元组快排 能否将元组 [3, 1, 2, 4] 通过泛型转换成

  • TypeScript 类型编程之索引类型递归去掉可选修饰

    目录 前言 总结 前言 这两天东东遇到一个 TS 的问题,跑来问我. 问题是这样的: 这样一个 interface,想取出 userInfo 的类型来: interface Result{ data?: { userInfo?: { name: string; } } } 他是这样取的: type userInfo = Result['data']['userInfo']; 但是会报错: 说是 userInfo 不在这个联合类型上. 这很正常,因为可选索引的含义就是值和 undefined 的联

  • TypeScript对于Duck类型和模块命名空间应用

    目录 一.TypeScript 鸭子类型 二.TypeScript 命名空间 三.TypeScript 模块 四.类型脚本声明文件 一.TypeScript 鸭子类型 Duck类型是一种动态类型和多态形式.在这种风格中,对象的有效语义不是通过从特定类继承或实现特定接口来确定的,而是通过“当前方法和属性的集合”来确定的. var object_name = { key1: "value1", // 标量 key2: "value", key3: function()

  • TypeScript Type Innference(类型判断)

    TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行.TypeScript与JavaScript相比进步的地方 包括:加入注释,让编译器理解所支持的对象和函数,编译器会移除注释,不会增加开销:增加一个完整的类结构,使之更新是传统的面向对象语言. 为什么会有 TypeScript? JavaScript 只是一个脚本语言,并非设计用于开发大型 Web 应用,JavaScript 没有提供类和模块的概

  • TypeScript 运行时类型检查补充工具

    TypeScript是静态类型系统,在编译时做类型检查.一般而言,如果项目所用到的所有库.模块都是基于ts的,那么静态类型已经可以避免大部分编程层面的类型问题.不过,在一些场景下来,单纯静态类型是无法解决问题的,部分数据是动态传入到系统中的,主要包含场景如下: 第三方数据源(接口API.本地持久化存储.postMessage等) 第三方调用者传参 全局状态变更 当然,还有其他可能,总之,单纯靠静态类型检查,无法解决运行时类型问题.因此,我写了tyshemo这个工具.它可以帮助我们完成运行时的类型

  • 详解TypeScript使用及类型声明文件

    目录 简介 Script 与 Vue3 defineProps 与 Typescript defineEmits 与 Typescript ref 与 Typescript computed 与 Typescript 事件对象 与 Typescript 模板 Ref 与 Typescript 可选链操作符 非空断言-TS TypeScript类型声明文件 基本介绍 内置类型声明文件 第三方库类型声明文件 自定义类型声明文件 简介 声明文件是以.d.ts为后缀的文件,开发者在声明文件中编写类型声明

  • 详解TypeScript中的类型保护

    概述 在 TypeScript 中使用联合类型时,往往会碰到这种尴尬的情况: interface Bird { // 独有方法 fly(); // 共有方法 layEggs(); } interface Fish { // 独有方法 swim(); // 共有方法 layEggs(); } function getSmallPet(): Fish | Bird { // ... } let pet = getSmallPet(); pet.layEggs(); // 正常 pet.swim();

  • TypeScript中枚举类型的理解与应用场景

    目录 一.是什么 二.使用 数字枚举 字符串枚举 异构枚举 本质 三.应用场景 总结 一.是什么 枚举是一个被命名的整型常数的集合,用于声明一组命名的常数,当一个变量有几种可能的取值时,可以将它定义为枚举类型 通俗来说,枚举就是一个对象的所有可能取值的集合 在日常生活中也很常见,例如表示星期的SUNDAY.MONDAY.TUESDAY.WEDNESDAY.THURSDAY.FRIDAY.SATURDAY就可以看成是一个枚举 枚举的说明与结构和联合相似,其形式为: enum 枚举名{     标识

  • TypeScript中条件类型精读与实践记录

    目录 在泛型类型中使用条件类型 工具类型 逃离舱 在箭头函数中使用条件类型 结合类型推导使用条件类型 使用条件类型来判断两个类型完全相等 总结 在大多数程序中,我们必须根据输入做出决策.TypeScript 也不例外,使用条件类型可以描述输入类型与输出类型之间的关系. 用于条件判断时的 extends 当 extends 用于表示条件判断时,可以总结出以下规律 若位于 extends 两侧的类型相同,则 extends 在语义上可理解为 ===,可以参考如下例子: type result1 =

  • TypeScript函数和类型断言实例详解

    目录 开始 断言 非空断言 类型断言 尖括号 as 确定赋值断言 类型守卫 trpeof in 函数 可选参数 默认值参数 函数重载 结束 开始 现在要加速学习了,大佬们有没有内推,给个推荐 会vue2/vue3 + ts 断言 非空断言 非空断言就是确定这个变量不是null或者undefined,就是把null或者undefined从他的类型中排除 function demo(message:string|undefined|null) { const str: string = messag

  • TypeScript中的类型断言[as语法|<>语法]的使用

    Typescript中类型断言官方解释 要理解好类型断言,其实就深刻理解一句话:你会比TypeScript更了解某个值的详细信息 . 类型断言,断言 断言,顾名思义,我断定怎么怎么样,代入这句话里就是,我断定这个类型是什么.当然这是我们主观上的思维逻辑,程序并不认可,所以我们需要告诉程序:“相信我,我知道自己在干什么” . 这么干说,大家可能还是理解的不够透彻,我用两个函数举一个例子: /** * @param d 日期 * @param f 想要格式化的字符串 */ function date

  • typescript返回值类型和参数类型的具体使用

    目录 返回值类型 可缺省和可推断的返回值类型 Generator 函数的返回值 参数类型 可选参数和默认参数 剩余参数 返回值类型 在 JavaScript 中,我们知道一个函数可以没有显式 return,此时函数的返回值应该是 undefined: function fn() { // TODO } console.log(fn()); // => undefined 需要注意的是,在 TypeScript 中,如果我们显式声明函数的返回值类型为 undfined,将会得到如下所示的错误提醒.

随机推荐