锋盈数科-知识库 Logo
首页
软件开发
计算机基础
Hello Halo
新手必读
关于本知识库
登录 →
锋盈数科-知识库 Logo
首页 软件开发 计算机基础 Hello Halo 新手必读 关于本知识库
登录
  1. 首页
  2. 软件开发
  3. ts中什么是交叉类型

ts中什么是交叉类型

0
  • 软件开发
  • 发布于 2024-09-26
  • 0 次阅读
黄健
黄健

TypeScript中的交叉类型(Intersection Types)是一种强大的类型构造,它允许多个类型组合成一个新类型,新类型将具有所有原类型的特性。交叉类型使用&运算符来定义。

定义

交叉类型通过&符号将多个类型合并成一个类型,表示同时拥有这些类型的属性和方法。这种类型合并的方式允许开发者将不同的类型特性组合在一起,从而创建出更为复杂和灵活的类型定义。

使用示例

  1. 合并对象类型:

    假设我们有两个类型Person和Address,分别表示一个人和一个地址的信息。我们可以使用交叉类型将它们合并成一个新的类型PersonWithAddress,这个新类型将同时包含Person和Address的所有属性。


    |—|—————————————————|
    | | type Person = { |
    | | name: string; |
    | | age: number; |
    | | }; |
    | | |
    | | type Address = { |
    | | street: string; |
    | | city: string; |
    | | }; |
    | | |
    | | type PersonWithAddress = Person & Address; |
    | | |
    | | const personWithAddress: PersonWithAddress = { |
    | | name: 'John', |
    | | age: 30, |
    | | street: '123 Main St', |
    | | city: 'Example City' |
    | | }; |

  2. 组合函数类型:

    交叉类型也可以用于函数类型,允许一个函数同时拥有多个函数类型的特性。


    |—|———————————————————————————————————-|
    | | type MathFunction = (x: number) => number; |
    | | type StringFunction = (s: string) => string; |
    | | |
    | | // 注意:这个交叉类型实际上是有问题的,因为(x: number) => number 和 (s: string) => string 参数类型不同,不能直接合并。 |
    | | // 这里仅为了说明交叉类型在函数类型上的潜在用途,实际使用中应避免这种情况。 |
    | | // type CombinedFunction = MathFunction & StringFunction; // 错误示例 |
    | | |
    | | // 正确的做法是定义一个可以接受多种类型参数或返回多种类型结果的函数类型 |
    | | type CombinedFunction = {(x: number): number} | {(s: string): string}; |
    | | |
    | | const combinedFunc: CombinedFunction = (arg) => typeof arg === 'number' ? arg * 2 : arg.toUpperCase(); |

  3. 合并类类型(注意:TypeScript原生不支持类的交叉类型,但可以通过接口或其他方式模拟):

    虽然TypeScript不直接支持类的交叉类型,但你可以通过接口或其他类型构造来模拟这种行为。


    |—|————————————————-|
    | | class Dog { |
    | | bark() { |
    | | console.log('Woof! Woof!'); |
    | | } |
    | | } |
    | | |
    | | class Robot { |
    | | move() { |
    | | console.log('Walking...'); |
    | | } |
    | | } |
    | | |
    | | // 假设我们想要一个同时具有Dog和Robot行为的对象,可以通过接口或其他方式来实现 |
    | | interface PetRobot { |
    | | bark(): void; |
    | | move(): void; |
    | | } |
    | | |
    | | // 然后我们可以实现这个接口,或者通过其他方式(如组合模式)来模拟这种行为 |
    | | class HybridPet implements PetRobot { |
    | | bark() { |
    | | console.log('Woof! Woof!'); |
    | | } |
    | | |
    | | move() { |
    | | console.log('Walking...'); |
    | | } |
    | | } |

注意事项

  • 当合并的类型中存在重名但类型相同的属性时,新类型中的该属性将保持原有的类型。
  • 如果合并的类型中存在重名但类型不同的属性,TypeScript编译器将报错,因为交叉类型要求所有合并的类型在相同属性上必须兼容。
  • 交叉类型不仅限于对象类型,还可以用于函数类型、接口、类型别名等TypeScript中的几乎所有类型构造。

交叉类型是TypeScript中非常有用的一个特性,它允许开发者以灵活的方式组合不同的类型,从而创建出更为复杂和强大的类型定义。

原文链接: https://blog.csdn.net/hexadecimal_001/article/details/140873061

标签: #前端 145
相关文章

万字:支付“核心系统”详解 2024-11-02 15:33

专栏作者:隐墨星辰 \| 主编:陈天宇宙 这篇文章也尝试化繁为简,探寻支付系统的本质,讲清楚在线支付系统最核心的一些概念和设计理念。 虽然支付行业已经过了风头最劲的时光,但跨境支付仍然在蓬勃发展,每年依然有很多新人进入这个行业,这篇文章尝试为这些刚入行的新人提供一点帮助。 文章只介绍一些支付行业十几

资深支付架构师视角:实战从问题定义到代码落地的完整套路 2024-11-02 15:33

前言 今天从一个实际案例入手,介绍站在架构师的角度,如何识别并定义问题,提炼需求,技术方案选型,再到详细设计,最后利用AI的能力协助写出核心的代码,验证与调优。 解决问题存在一定的模式,也可以称之为框架,总结出自己的思考和解题框架,以后再碰到同类型的问题就可以如庖丁解牛一样容易。 很多年前,我写代码

Spring 实现 3 种异步接口 2024-10-18 09:07

大家好,我是苏三~ 如何处理比较耗时的接口? 这题我熟,直接上异步接口,使用 Callable、WebAsyncTask 和 DeferredResult、CompletableFuture等均可实现。 但这些方法有局限性,处理结果仅返回单个值。在某些场景下,如果需要接口异步处理的同时,还持续不断地

重学SpringBoot3-集成Redis(五)之布隆过滤器 2024-10-08 11:24

更多SpringBoot3内容请关注我的专栏:《SpringBoot3》 期待您的点赞👍收藏⭐评论✍ 重学SpringBoot3-集成Redis(五)之布隆过滤器 1. 什么是布隆过滤器? * 基本概念 适用场景 2. 使用 Redis 实现布隆过滤器 * 项目依赖 Redis 配置

设计模式第16讲——迭代器模式(Iterator) 2024-10-08 11:24

一、什么是迭代器模式 迭代器模式是一种行为型设计模式,它提供了一种统一的方式来访问集合对象中的元素,而不是暴露集合内部的表示方式。简单地说,就是将遍历集合的责任封装到一个单独的对象中,我们可以按照特定的方式访问集合中的元素。 二、角色组成 抽象迭代器(Iterator):定义了遍历聚合对象所需的方法

vue2路由和vue3路由区别及原理 2024-10-08 11:24

一、Vue2 与 Vue3 路由的区别 1. 创建路由实例方式的不同 Vue 2 中,通过 Vue.use() 注册路由插件,并通过 new VueRouter() 来创建路由实例。 import Vue from 'vue';import VueRouter from 'vue-router';i

目录

IT 外包服务商

  • 意见投递
  • zyf6619

软件开发应用

主菜单

  • 首页
  • 软件开发
  • 计算机基础
  • Hello Halo
  • 新手必读
  • 关于本知识库
Copyright © 2024 your company All Rights Reserved. Powered by Halo.