Typescript高级: 深入理解工厂函数类型

深入理解 TypeScript 中的类型思维与 JSX 工厂 本文深入探讨了 TypeScript 中的类型思维,特别是服务对象的类型定义以及如何实现类型安全的服务创建。同时,文章还介绍了 JSX 的概念、功能以及如何在 TypeScript 环境下进行 JSX 的编译,揭示了 JSX 作为一种语法糖在 React 组件中的应用,以及如何利用 TypeScript 对 JSX 进行类型检查,使得 DOM 操作更加简洁高效。 阅读详情

工厂函数类型

  • 代表任意一个类的构造函数【等价JS的构造函数】的函数类型
  • 在TS中无法使用 new 来直接实例化一个 function
  • 现在通过几个小case来测试下这种类型

1 )模拟一个动物的行为接口(简单)

  • 创建几个实现了这个接口的类来展示接口的用途和如何使用它

  • 下面是一个关于动物及其行为(以吃东西为例)的TypeScript示例:

    // 定义一个动物行为接口,其中包含一个eat方法
    interface AnimalBehavior {
      eat: (...args: any) => any;
    }
    
    // 实现AnimalBehavior接口的Dog类
    class Dog implements AnimalBehavior {
      name: string;
    
      constructor(name: string) {
        this.name = name;
      }
    
      // 实现eat方法,模拟狗吃骨头的行为
      eat(food: string): void {
        console.log(`${this.name} the dog is eating ${food}.`);
      }
    }
    
    // 实现AnimalBehavior接口的Cat类
    class Cat implements AnimalBehavior {
      name: string;
    
      constructor(name: string) {
        this.name = name;
      }
    
      // 实现eat方法,模拟猫吃鱼的行为
      eat(food: string): void {
        console.log(`${this.name} the cat is enjoying ${food}.`);
      }
    }
    
    // 使用示例
    function feedAnimal(animal: AnimalBehavior, food: string): void {
      animal.eat(food);
    }
    
    // 创建Dog和Cat实例
    const myDog = new Dog("Rex");
    const myCat = new Cat("Whiskers");
    
    // 喂食
    feedAnimal(myDog, "a bone"); // 输出: Rex the dog is eating a bone.
    feedAnimal(myCat, "fish"); // 输出: Whiskers the cat is enjoying fish.
    
  • 在这个示例中,定义了一个AnimalBehavior接口,它要求实现类必须有一个名为eat的方法 eat: (...args: any) => any;

  • 注意,这里还没有涉及任何的工厂函数类型

  • 该方法可以接受任意数量的参数并返回任意类型

  • 接着,创建了两个类Dog和Cat,它们都实现了AnimalBehavior接口,并分别实现了eat方法来模拟各自的进食行为

  • 最后,我们定义了一个feedAnimal函数,它接受任何实现了AnimalBehavior接口的对象以及食物类型作为参数

  • 以此展示如何通过接口来规范和使用不同类型的对象

2 )模拟一个简单的银行贷款服务场景

  • 定义一个CommercialBank类来表示银行
  • 这个类包含了银行的基本信息,如地址和名称,并提供了一个贷款方法
    class CommercialBank {
        public address: string;
        public name: string;
      
        constructor(name: string, address: string) {
          this.address = address;
          this.name = name;
        }
      
        loan(): void {
          console.log(`${this.name} 银行提供贷款服务`);
        }
    }
    
    type Cst<T> = new (...args: any[]) => T; // 工厂函数类型
    
    function createBank<T extends CommercialBank>(BankClass: Cst<T>, name: string, address: string): T {
        return new BankClass(name, address);
    }
      
    class SavingsBank extends CommercialBank {
        saveMoney(): void {
          console.log("储蓄银行提供存款服务");
        }
    }
    
    const savingsBank = createBank<SavingsBank>(SavingsBank, "储蓄银行", "上海");
    savingsBank.loan(); // 输出: 储蓄银行提供贷款服务
    savingsBank.saveMoney(); // 输出: 储蓄银行提供存款服务
    
  • 在TypeScript中,通过new关键字,我们可以实例化一个类
  • 但直接new一个普通函数是不允许的,因为TypeScript严格区分了函数和构造函数
  • 为了表示一个可以被new操作符使用的构造函数类型,我们引入了构造函数类型constructor
  • 它是一个特殊的类型别名,表示可以接受任意参数并返回一个特定类型实例的函数
  • type Cst<T> = new (...args: any[]) => T 这条语句,作为工厂函数类型的示例,而且是一个泛型工厂类型

构造函数类型与工厂函数类型的示例


1 )构造函数类型

  • 构造函数类型主要指代那些用于创建类实例的函数。
  • 在TypeScript中,当你定义一个类时,实际上就是在定义一个构造函数类型。构造函数通过new关键字被调用,用于初始化新创建的对象并分配内存。
  • 构造函数类型关心的是如何创建和初始化一个特定类的实例
    class Animal {
      name: string;
    
      constructor(name: string) {
        this.name = name;
      }
    }
    
  • 这里Animal就是构造函数类型
  • 它接收一个string参数并返回Animal类型的实例

2 )工厂函数类型

  • 工厂函数类型是一种设计模式的体现,其目的是提供一个统一的接口用于创建一系列相关或依赖对象,而不需要向客户端暴露创建逻辑
  • 工厂函数通常返回一个对象实例,但与构造函数不同,它不一定要使用new关键字
  • 工厂函数的优势在于它可以根据输入参数的不同,返回不同类型的对象,提供更大的灵活性
  • 在TypeScript中,可以通过定义一个返回构造函数类型的函数来实现工厂函数类型,比如:
    // 这里是 简单工厂类型,不是泛型工厂类型
    type AnimalConstructor = new (name: string) => Animal;
    
    function getAnimalFactory(animalType: string): AnimalConstructor {
      if (animalType === 'dog') {
        return Dog; // 假设Dog是另一个实现了Animal的类
      } else if (animalType === 'cat') {
        return Cat; // 同理,Cat也是实现了Animal的类
      } else {
        throw new Error('Unsupported animal type');
      }
    }
    
    const dogFactory = getAnimalFactory('dog');
    const myDog = new dogFactory('Rex'); // 使用工厂函数得到的构造函数创建对象
    

总结

  • 尽管构造函数类型和工厂函数类型在实际应用中可以紧密相连
  • 它们的核心区别在于:
    • 构造函数类型专注于初始化单一类型实例的细节
    • 工厂函数类型则提供了一个更高层次的抽象,根据条件或参数决定创建哪种类型的实例,增加了灵活性和解耦
    • 因此,它们虽有联系,但在设计意图和应用场景上有所区分
掌握TypeScript高级类型:断言签名与类型映射 本篇博客深入探讨TypeScript中的断言签名和类型映射技术。断言签名允许我们在不进行条件判断的情况下改变一个值的类型,而类型映射则用于通过索引访问扩展类型,并结合映射类型如Partial<T>处理复杂对象的属性。通过实际案例,我们将学习如何运用这些技术来提高代码的类型安全性,以及如何利用泛型、类型别名和声明合并等工具来优化TypeScript编程体验。 阅读详情

相关推荐

掌握TypeScript类的高级特性与装饰器

本文深入探讨了TypeScript中类的高级特性,包括严格属性初始化、this类型的应用以及装饰器的实现。通过对类的深入理解,我们可以更好地利用TypeScript扩展JavaScript的功能,实现更高效、更安全的代码编写。

weixin_42608318的博客 721

js ts 函数工厂

class Message { private readonly message: string; //定义 message类型 防止ts环境画红色波浪线 constructor(message: string) { this.message = message //this指向当前工厂函数顶部 与 react或者 vue 内 this 不冲突 } success(txt:string) { message.success(txt + this.message) }

木白的博客 352

工业机器人关节拆装流程_一文读懂模块化直驱电机及机器人关节模组

私信“干货”二字,即可领取138G伺服与机器人专属及电控资料!如果说芯片是智能行业最为重要的核心元件,那么电机几乎可以说是支撑了整个自动化和大工业生产以及现代社会最为重要的部件,全世界90%的能源是由电机发出来的,而70%是由电机消耗调的,电机可以说是整个人类社会能源循环的占有绝对地位的产品。普通伺服电机伺服电机其实已经算是电动机中比较高端的类型,特别是永磁同步类型的伺服电机,由于其启动快速,惯量...

weixin_32159771的博客 2155

TypeScript-泛型

当我们想操作某类型的一组值,且已经知道这组值具有什么样的属性,例如想访问参数的length属性,但是编译器不能证明每种类型都有length属性,所以会报错。**泛型约束中使用类型参数**声明一个类型参数,且它被另一个类型参数所约束,例如想用属性名从对象里获取这个属性,且要保证整个属性存在于这个对象,在两个类型之间使用约束。泛型类型泛型函数的类型与非泛型函数的类型区别不大,只是有一个类型参数在前,类似函数声明。**在泛型里使用类类型**在TS使用泛型创建工厂函数时,需要引用构造函数的类类型。......

qq_37609418的博客 325

Win10环境借助DockerDesktop部署Open web UI集成DeepSeek

Win10环境借助DockerDesktop部署Open web UI集成DeepSeek,并借助DuckDuckGo实现联网查询

虎鲸不是鱼 1702

【Pytorch教程】:卷积神经网络 CNN

Pytorch教程目录 Torch and Numpy 变量 (Variable) 激励函数 关系拟合(回归) 区分类型 (分类) 快速搭建法 批训练 加速神经网络训练 Optimizer优化器 卷积神经网络 CNN 目录Pytorch教程目录什么是卷积神经网络 CNN卷积 和 神经网络池化(pooling)流行的 CNN 结构CNN 卷积神经网络MNIST手写数据CNN模型训练可视化训练全部代码 什么是卷积神经网络 CNN 卷积 和 神经网络 卷积神经网络是如何运作的呢, 举一个识别图片的例子, 我们知

nanke_4869的博客 8097

TypeScript 中「函数」的基本使用

在 TypeScript 中,除了给某个变量添加类型注释之外,函数需要书写参数类型和 返回值类型,这样 TypeScript 就可以对函数的参数和返回值类型进行约束,从而达到类型严谨的目的。 如果涉及到可选参数、默认参数、函数的重载,则需要进行特殊的书写,具体可以看下面操作。 1、函数返回值类型 //函数声明 function fun():string{ //约束返回值的类型为是 string,如果没有返回值写:void return 'erha'; } //匿名函数 let...

Yingjieweb 的技术博客 505

Calibre 3Dstack --每日一个命令day27【overlap】(3-27)

本文介绍了Calibre3Dstack中overlap命令的使用方法。该命令用于检查两个已放置层之间的重叠量是否符合要求,支持设置检查名称、层类型、堆叠范围、检查方向等参数。关键参数包括:-constraint指定重叠约束条件,-exact控制百分比精度,-by_area切换为面积检查模式,-intersection报告相交区域。检查结果可通过RVE选项定制显示方式,适用于3D堆叠设计中的层间重叠验证场景。

u013620135的博客 112

【TS笔记】构造函数

TS构造函数

m0_56688210的博客 2905

Openlayers 教程 02 - 地图添加 WKT WKB GeoJson 格式的点线面数据

WebGIS 开发中,对于数据量不是很大的场景,可以直接从数据库读取数据,通过创建点线面要素(Feature),然后添加到矢量图层(vectorLayer)中,在地图上展示。添加点线面的方法可以封装一下,方便使用。...

非科班Java出身GISer的博客 3859

环境配置与基础教程:2026大厂标准:使用 DVC (Data Version Control) 实现 YOLO 数据集版本控制全链路管理

本文介绍了使用DVC 3.0对YOLO数据集进行全链路版本控制的方法。主要内容包括: DVC 3.0的核心增强:内容块级缓存去重、并行云传输、AI智能体元数据跟踪等新特性,可显著提升YOLO数据集管理效率。 环境配置:详细说明DVC 3.0的安装步骤、项目初始化方法以及远程存储配置方案(支持S3、GCS、Azure等多种存储后端)。 目录结构规范:提供符合大厂MLOps标准的项目目录结构设计。 实战操作: 原始数据版本化 多格式标注数据版本控制 版本切换方法 优势说明:DVC通过哈希指针机制管理大型数据集,

ZXSXJ的博客 148

typescript学习:泛型接口 + 泛型函数,泛型工厂函数

本文内容如下 泛型接口 + 泛型函数,泛型工厂函数 如果你都有了答案,可以忽略本文章,或去TS学习地图寻找更多答案 知识铺垫 // 类 class CommercialBank { static count: number constructor(public name: string) { } } //双重性质: 1. 类构造函数对象变量 CommercialBank.count 2. 创建类对象的类型 let c = new CommercialBank('农业银行') 泛

weixin_44828005的博客 961

4、Vitis_HLS、Vivado 和 Vitis IDE 工具的设置与使用

本文详细介绍了使用Vitis_HLS、Vivado和Vitis IDE进行FPGA开发的完整流程,涵盖开发板选择、软件安装、IP设计与模拟、综合、导出以及在FPGA上的实现与验证。以Xilinx Artix-7和Zynq系列开发板为例,指导用户从环境搭建到最终硬件验证,完成一个32位加法器IP的开发,适用于嵌入式系统和硬件加速项目的学习与实践。

fff88的博客 181

Typescript高级: 深入理解ConstructorParameters类型及借助infer构建带参数的工厂实例方法

在TypeScript中,利用泛型和类型推断,我们可以编写出既灵活又安全的代码特别是在处理类和其实例化过程中,这些特性显得尤为重要我们着重关注构造函数参数(constructor parameters)的类型处理以及如何利用泛型工厂函数来创建类的实例构造函数是面向对象编程中初始化对象状态的核心手段在TypeScript中,通过为构造函数及其参数添加类型注解可以确保在创建对象时遵循预定义的类型规则,从而提高程序的健壮性。

Wang的专栏 1425

【AutoSAR】【以太网】TCP/IP 栈详述与配置

目录 一、TCP/IP栈架构 二、TCP\IP栈的可扩展性 三、以太网协议V4 四、以太网协议 V6 五、基于IP的协议 六、函数调用序列图 一、TCP/IP栈架构 根据以上架构图,该栈主要包括:UPD\TCP\DHCP\ICMP\IPV4\IPV6\ARP; 二、TCP\IP栈的可扩展性 TCP\IP栈为适应不同的应用场景需求,将分为三类: 配置工程里的配置项: 三、以太网协议V4 1 IPV4 Internet Protocol (IP)是T.

专注汽车软件开发、AutoSAR、车载以太网、SOA、EE架构。 5696

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具,可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

Typescript高级: 深入理解Exclude类型

Exclude 是一个强大的类型操作符,用于从一个类型集合中排除另一个类型集合中存在的类型这对于创建更加精确和动态的类型定义非常有用,尤其是在处理复杂的类型系统和进行类型筛选时Exclude 是一个高级类型,用于从类型 T 中排除那些可以赋值给类型 U 的所有成员换句话说,Exclude 类型返回一个新类型,该类型包含类型 T 中所有不属于类型 U 的成员never : T;Exclude 类型操作符是 TypeScript 强大类型系统的一个缩影。

Wang的专栏 896

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

深入理解Typescript中的类型和构造器签名new

这两天重看ts基础部分的interface和泛型,涉及到构造器签名部分,看得还是比较模糊,仔细再整理一下,这次应该是清晰了。 变量类型限定,主要用在以下场景:限定普通变量类型,限定函数类型(也属于限定变量类型),限定函数返回值类型,限定类类型。这里从限定普通变量类型开始,重点讲下限定类类型,即函数构造器签名。 1,限定普通变量类型 这是最简单和常用的类型限定用法,比如: (这部分代码也是后续演示代码的基础部分,后续用到这三个类的地方,定义都在这里) // 这部分代码也是后续演示代码的基础部分,后

yangxinxiang84的专栏 1万+

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

TypeScript笔记(15)—— 深入理解TypeScript中的装饰器

TypeScript笔记(11):TypeScript装饰器 李俊才 优快云:jcLee95 作者博客地址:https://blog.youkuaiyun.com/qq_28550263?spm=1000.2115.3001.5343 邮箱:291148484@163.com 【导读】

jclee95的个人博客 775

TypeScript设计模式终极对比:单例vs原型vs工厂方法

在TypeScript开发中,**设计模式**是提升代码质量和可维护性的关键工具。今天我们来深入探讨三种最常用的创建型设计模式:单例模式、原型模式和工厂方法模式。这三种模式在TypeScript项目中有着广泛的应用场景,理解它们的差异和适用场景对于任何开发者来说都至关重要。 ## 🎯 为什么需要设计模式? 设计模式是经过验证的解决方案,可以帮助开发者解决常见的软件设计问题。在TypeScri

gitblog_00660的博客 657

深入理解eslint-import-resolver-typescript工作原理:TypeScript模块解析的内部机制

如果你正在使用TypeScript开发项目,那么eslint-import-resolver-typescript可能是你配置ESLint时不可或缺的工具。这个强大的**TypeScript模块解析器**能够让ESLint正确识别TypeScript的导入语句,解决常见的"无法解析模块"错误。本文将深入解析这个解析器的内部工作机制,帮助你更好地理解TypeScript模块解析的奥秘。 ## 为什

gitblog_00923的博客 295

深入理解 tsx 项目中的 TypeScript 集成实践

深入理解 tsx 项目中的 TypeScript 集成实践 【免费下载链接】tsx ⚡️ TypeScript Execute: Node.js enhanced to run TypeScript & ESM 项目地址: htt...

gitblog_00858的博客 518

如何给 Sudachi 做一个存档编辑器:从定位 SaveData 到一键修改的完整实践

换了一台电脑,Switch 游戏进度全丢?或者玩着玩着存档莫名其妙打不开了?如果你是 Sudachi 这款 Nintendo Switch 模拟器的用户,大概率经历过这种崩溃。今天咱们不讲虚的,直接动手做一个**存档编辑器**——能帮你定位存档在哪、看懂目录结构、安全地修改数据,还能一键迁移到别的机器。全文以 Sudachi 的存档工厂源码 `src/core/file_sys/savedata_

gitblog_00106的博客 344

TypeScript技术知识整理

TypeScript技术知识整理 文章目录TypeScript技术知识整理一、环境搭建与编译执行1.安装 `TypeScript` 编译器2.编写代码**代码编辑器 - vscode**3.编译执行5.一些有用的编译选项--outDir--target--watch6.编译配置文件7.指定加载的配置文件二、类型系统初识1.什么是类型2.动态类型语言 & 静态类型语言**动态类型语言****...

a1396531115的博客 850

TypeScript完全解读百度云

原文配套视频资源获取链接:点击获取 原文配套源码资源获取链接:点击获取 课程大纲: 1.搭建开发环境 (1) 前端开发环境 (2) Node服务端开发环境 2.基础类型 (1)布尔值 (2)数值 (3)字符串 (4)数组 (5)元组 (6)枚举 (7)any (8)void (9)null和undefined (10)never (11)object ...

weixin_30270889的博客 865

CozyUI+×Xaero小地图搭配指南:Minecraft高清界面与探索工具无缝融合

🧭 **写在前面**:CozyUI+ 是一款 Minecraft 高清界面材质包(资源包),它把原版 UI 和许多实用客户端模组全部改造成简洁、柔和的高清风格;而 Xaero小地图(Xaero's Minimap)则是探索世界的经典工具。本指南带你用 5 个步骤完成 **CozyUI+ 搭配 Xaero小地图** 的安装与调优,新手也能轻松上手! [![CozyUI+ Minecraft高清界

gitblog_00411的博客 220

Vue 3 + TypeScript:深入理解组件引用类型

本文通俗易懂地解释了Vue3+TypeScript项目中常见的ref<InstanceType<typeof ElForm> | null>(null)代码含义。通过工厂和产品的比喻,说明InstanceType<typeof ElForm>表示获取ElForm类创建的实例类型,而非类本身。文章详细拆解了typeof和InstanceType的作用,对比正确与错误的写法,并提供了实际应用场景和最佳实践建议,如使用类型别名简化代码、创建通用Hook等。最后总结该语法的核心目

weixin_67093879的博客 570
上一篇: Typescript高级: 基于泛型T的函数重载来实现各个类型数据的排序
下一篇: Typescript高级: 泛型 vs 装饰器
Wang's Blog
博客等级 码龄12年 7433粉丝 2420原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Wang's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值