TypeScript（五）交叉类型，联合类型，映射类型

news2024/10/5 16:31:15

交叉类型

交叉类型是将多个类型合并为一个类型。可以把现有的多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。使用符号 & 表示。交叉类型 A & B 表示，任何一个新类型必须同时属于 A 和 B，才属于交叉类型 A & B

  1. 基础介绍
    type Dog = { breed: string; run(): void };
type Bird = { wingspan: number; fly(): void };

type DogAndBird = Dog & Bird;

const animal: DogAndBird = {
  breed: "Labrador",
  run() {
    console.log("Dog is running.");
  },
  wingspan: 20,
  fly() {
    console.log("Bird is flying.");
  },
};
console.log(animal.breed); // Labrador
animal.run(); // 执行方法打印 Dog is running.
animal.fly(); // 执行方法打印 Bird is flying.
// animal 同时具有Dog 和 Bird 的特性
  2. 函数中的应用
    通过 extend 把两个对象合并成一个对象，看一下如何通过函数参数类型交叉实现。
    function extend<T, U>(first: T, second: U): T & U {
  const result = {} as T & U;
  console.log(first, second); // { name: '迪西', className: '三年级' }  { age: 9, className: '二年级' }
  for (const key in first) {
    (result as T)[key] = first[key];
  }
  for (const key in second) {
    if (!result.hasOwnProperty(key)) { // 检查result是否包含second中的key
      (result as U)[key] = second[key];
    }
  }
  return result;
}

const extendedObject = extend({ name: '迪西', className: '三年级' }, { age: 9, className: '二年级' });
console.log(extendedObject); // {name: '迪西', className: '三年级', age: 9}
  3. 对象合并
    type Car = { brand: string; speed: number };
type Boat = { color: string; sails: number };

type Vehicle = Car & Boat;

const hybridVehicle: Vehicle = {
  brand: "cat",
  speed: 120,
  color: "Blue",
  sails: 2,
};
  4. 可选属性的处理
    交叉之后创建的新类型，同样包含原类型中的可选属性
    type Car = { brand: string; speed?: number };
type Boat = { color: string; sails?: number };
type Vehicle = Car & Boat;
const hybridVehicle: Vehicle = {
  brand: "cat",
  speed: 120,
  color: "Blue",
};
  5. 函数重载
    函数重载是 TypeScript 中处理不同参数组合的一种方式
    function merge<T, U>(arg1: T, arg2: U): T & U;
function merge<T, U, V>(arg1: T, arg2: U, arg3: V): T & U & V;
function merge(...args: any[]): any {
  return Object.assign({}, ...args);
}

const mergedObject = merge({ A: 1 }, { B: 2 }, { C: 3 });
console.log(mergedObject); // {A: 1, B: 2, C: 3}
  6. 类型守卫与交叉类型
    通过 in 关键字使用类型守卫检查对象的属性
    type Car = { brand: string; speed: number };
type Flying = { altitude: number };
function moveVehicle(vehicle: Car & Flying) {
  if ("speed" in vehicle) {
    console.log(`speed: ${vehicle.speed}`); // speed: 120
  }

  if ("altitude" in vehicle) {
    console.log(`Flying: ${vehicle.altitude}`); // Flying: 5000
  }
}
// 使用交叉类型的函数
let flyingCar: Car & Flying = { brand: "SkyCar", speed: 120, altitude: 5000 };
moveVehicle(flyingCar);

联合类型

联合类型是 TypeScript 中非常灵活的一部分，它允许一个值属于多个类型之一
联合类型允许一个值可以是多种类型之一，使用符号 | 表示。

let userName: string | number;
userName = "迪西";
console.log(userName.length); // 2
userName = 9;
console.log(userName, userName.length); // 报错

在这里插入图片描述

  1. 函数返回值
    联合类型在函数参数中，允许参数接受多种类型的值，处理不同类型的返回值。
    function getRandomValue(): string | number {
  const random = Math.random();
  return random > 0.5 ? "Hello" : 42;
}

const resultNum = getRandomValue();
console.log(resultNum);
  2. 对象的联合类型
    在 TypeScript 中，可以使用联合类型表示具有不同属性的对象。
    type Square = { kind: "square"; width: number };
type Circle = { kind: "circle"; radius: number };

type Shape = Square | Circle;

function area(shape: Shape): number {
  if (shape.kind === "square") {
    return shape.width ** 2;
  } else {
    return Math.PI * shape.radius ** 2;
  }
}

const square: Square = { kind: "square", width: 6 };
console.log(area(square)); // 36

const circle: Circle = { kind: "circle", radius: 4 };
console.log(area(circle)); // 50.26548245743669
  3. null 与 undefined
    联合类型经常与 null 或 undefined 结合使用，以表示变量可能具有空值。
    type Status = "success" | "error" | "pending" | null | undefined;
// Status 可以是 success，error，pending， null，undefined
let currentStatus: Status = "success";
console.log(currentStatus);// success

currentStatus = null;
console.log(currentStatus); // null

currentStatus = undefined;
console.log(currentStatus); // undefined
  4. 类型守卫
    联合类型与类型守卫结合使用，可以更安全地操作对象。
    function printMessage(message: string | string[] | null) {
  if (message instanceof Array) {
    console.log(message.join(","));
  } else if (message === null) {
    console.log("No message");
  } else {
    console.log(message);
  }
}

printMessage("Hello, TypeScript!");
printMessage(["TypeScript", "is", "awesome"]);
printMessage(null);
// 打印结果
// Hello, TypeScript!
// TypeScript,is,awesome
// No message
  5. 可辨识联合
    可辨识联合是一种特殊的联合类型，结合了具有共同字段的对象。
    type SuccessResponse = { status: "1"; data: string };
type ErrorResponse = { status: "2"; error: string };

type ApiResponse = SuccessResponse | ErrorResponse;

function handleApiResponse(response: ApiResponse) {
  switch (response.status) {
    case "1":
      console.log(response.data);
      break;
    case "2":
      console.log(response.error);
      break;
  }
}

const successResponse: SuccessResponse = { status: "1", data: "Success" };
const errorResponse: ErrorResponse = { status: "2", error: "Error" };

handleApiResponse(successResponse);
handleApiResponse(errorResponse);
// 打印结果
// Success
// Error

映射类型

映射类型：从旧类型中创建新类型的一种方式 。 在映射类型里，新类型以相同的形式去转换旧类型里每个属性。
它的语法与索引签名的语法类型，内部使用了 for … in。 具有三个部分：

type Keys = 'option1' | 'option2';
type Flags = { [K in Keys]: boolean };

等同于

type Flags = {
    option1: boolean;
    option2: boolean;
}

类型变量 K，它会依次绑定到每个属性。
字符串字面量联合的 Keys，它包含了要迭代的属性名的集合。
属性的结果类型。
keyof和索引访问类型

type Nullable<T> = { [P in keyof T]: T[P] | null }
type Partial<T> = { [P in keyof T]?: T[P] }
// 属性列表是 keyof T且结果类型是 T[P]的变体。

因为这类转换是 同态的，映射只作用于 T的属性而没有其它的

  1. Extract 映射类型
    Extract 映射类型允许我们从联合类型中提取符合指定条件的子集。 一般用于处理联合类型

    // Extract<T, U> -- 提取T中可以赋值给U的类型。
// Extract实现源码 原理很简单
type Extract<T, U> = T extends U ? T : never;

    type Test1 = '1' | '2' | '3'
const obj: Extract<Test1, '1' | '2'> = '1';
console.log(obj) // 1
const obj2: Extract<Test1, '1' | '2'> = '2';
console.log(obj2) // 2
const obj3: Extract<Test1, '1' | '2'> = '3'; // 1,2 OK 赋值3就会error

    在这里插入图片描述

  2. Exclude 映射类型
    Exclude 映射类型允许我们从联合类型中排除符合指定条件的子集。
    和 Extract 正好相反，也是用于处理联合类型

    // Exclude源码
type Exclude<T, U> = T extends U ? never : T;

    type Test1 = '1' | '2' | '3'
const obj: Exclude<Test1, '1' | '2'> = '3'; // 1,2 OK 赋值3就会error
console.log(obj) // 3
// const obj1: Exclude<Test1, '1' | '2'> = '1';
// console.log(obj1) // 1

    在这里插入图片描述

  3. Pick 映射类型
    Pick 映射类型允许我们从现有类型中挑选出指定的属性。
    可以采集 已定义对象中 自己需要的一部分形成新的定义类型。

    // Pick 的源码
type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

    interface UserObj {
  readonly name: string;
  age: number;
  id: number;
  sex: 0 | 1;
  address: string;
  weight: number;
}

// 采集需要的
type Person = Pick<UserObj, "name" | "id">;
// 此时Person 等同于 Person1
//interface Person1 {
// readonly name: string;
//  id: number;
//}
const obj: Person = {name: '迪西', 'id': 1};
// const obj: Person = {name: '迪西', 'id': 1, sex: 0}; // sex字段报错

    在这里插入图片描述

  4. Omit 映射类型
    可以剔除 已定义对象中 自己不需要的一部分形成新的定义类型。

    // Omit 的源码
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

    interface UserObj {
  readonly name: string; // readonly 只读属性 只能初始化定义 不能二次赋值
  age: number;
  id: number;
  sex: 0 | 1;
  address: string;
  weight: number;
}

// 剔除省略自己不需要的
type Person = Omit<UserObj, "age" | "sex"  | "address" | "weight">;

// 此时Person 等同于 Person1
// interface Person1 {
//   readonly name: string;
//   id: number;
// }
let obj:Person = {name: '迪西', 'id': 1}
// let obj:Person = {name: '迪西', 'id': 1, sex: 0}

    在这里插入图片描述

  5. NonNullable 映射类型
    NonNullable 映射类型允许我们从类型中排除 null 和 undefined。

    // 源码
/**
 * Exclude null and undefined from T
 */
type NonNullable<T> = T & {}; // 源码的这一句写的很有意思，泛型参数T和{}的交集就默认排除了`null` 和 `undefined`

    type MaybeString = string | null | undefined;  
let string = 'hello 迪西！'
const value: MaybeString = getSomeStringValue(string); // 假设这个函数可能返回一个字符串、null 或 undefined  
console.log(value);
// 使用 NonNullable 确保 value 不会是 null 或 undefined  
const nonNullableValue: NonNullable<MaybeString> = value!; // 使用 ! 断言操作符，或者通过其他方式确保值不为 null 或 undefined  
  
// 现在，nonNullableValue 的类型是 string，因为我们已经排除了 null 和 undefined  
console.log(nonNullableValue.length); // 9 

// 其实就是某些场景绝对为了排除null,undefined的类型才用的
function getSomeStringValue(str) {
  return str
}

  6. ReturnType 映射类型 (函数的类型推导返回)
    ReturnType 映射类型允许我们获取函数类型的返回值类型。

    // ReturnType源码
/**
 * Obtain the return type of a function type
 */
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

    const myFun = () => ({
  name: 'zhangsan',
  age: 233,
  sex: '1',
  tel: 123456789,
  fun: () => {
      return 233;
  },
  arr: [1,2,3,4,5,6]
});
type Test2 = ReturnType<typeof myFun>; 
// 错误用法
// const someValue = 42;  
// type InvalidReturnType = ReturnType<typeof someValue>; // error错误！someValue 不是一个函数。

    在这里插入图片描述

  7. Partial
    可把定义好的对象（包含 必选+可选项）类型全部转化为可选项

    // Partial源码
type Partial<T> = {
    [P in keyof T]?: T[P];
};

    interface Person {
  name: string;
  age: number;
  id: number;
  sex: 0 | 1;
  address: string;
  weight: number;
}

// 使用方法
const newObj: Partial<Person> = {
  name: '迪西' // 假如只需要一项 Partial的便捷性 可以不需要从新定义类型
};

// Partial<Person>等同于 NewPerson
interface NewPerson {
  name?: string;
  age?: number;
  id?: number;
  sex?: 0 | 1;
  address?: string;
  weight?: number;
}

  8. Partial
    Required 和 Partial刚好相反,可把定义好的对象（包含 必选+可选项）类型全部转化为 必选项

    // Partial  “-?” 意思是移除可选属性
/**
 * Make all properties in T required
 */
type Required<T> = {
    [P in keyof T]-?: T[P];
};

    // 已有定义类型Person
interface Person {
    name: string;
    age: number;
    id?: number;
    sex?: 0 | 1;
}

// 使用方法
const newObj: Required<Person> = {
    name: '迪西',
    age: 9,
    id: 1,
    sex: 1
};

// Required<Person>等同于 NewPerson
interface NewPerson {
    name: string;
    age: number;
    id: number;
    sex: 0 | 1;
}

  9. Readonly (转化只读)
    Readonly 就是为类型对象每一项添加前缀 Readonly

    // Readonly 源码
/**
 * Make all properties in T readonly
 */
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

    interface Person {
    readonly name: string; // 只有这一项有readonly
    age: number;
    id?: number;
}

// 使用方法
const newObj: Readonly<Person> = {
    name: '迪西',
    age: 9,
    id: 1
};
// newObj.name = '李四'; // 异常 因为有readonly只读属性，只能初始化声明，不能赋值。

// Readonly<Person> 等同于 NewPerson
interface NewPerson {
    readonly name: string;
    readonly age: number;
    readonly id?: number;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1514953.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

数据库基础知识超详细解析~‍（进阶/复习版）

数据库基础知识超详细解析~‍（进阶/复习版）

文章目录 前言一、数据库的操作1.登入数据库2.创建数据库3.显示当前数据库4.使用数据库5.删除数据库 二、常用数据类型三、数据库的约束1约束类型2NULL约束3UNIQUE:唯一约束4DEFAULT&#xff1a;默认值约束5 PRIMARY KEY&#xff1a;主键约束6 FOREIGN KEY&#xff1a;外键约束…
阅读更多...
MyBatis-Plus学习记录

MyBatis-Plus学习记录

目录 MyBatis-Plus快速入门 简介 快速入门 MyBatis-Plus核心功能 基于Mapper接口 CRUD 对比mybatis和mybatis-plus&#xff1a; CRUD方法介绍&#xff1a; 基于Service接口 CRUD 对比Mapper接口CRUD区别&#xff1a; 为什么要加强service层&#xff1a; 使用方式 CR…
阅读更多...
【CSS颜色】

【CSS颜色】

本文章属于学习笔记&#xff0c;在https://www.freecodecamp.org/chinese/learn/2022/responsive-web-design/中练习 三、CSS颜色 1、有两种主要的颜色模型:电子设备中使用的加性RGB(红、绿、蓝)模型和印刷品中使用的减色CMYK(青色、品红、黄色、黑色)模型。 使用RGB模型。这…
阅读更多...
Ypay源支付6.9无授权聚合免签系统可运营源码

Ypay源支付6.9无授权聚合免签系统可运营源码

YPay是一款专为个人站长设计的聚合免签系统&#xff0c;YPay基于高性能的ThinkPHP 6.1.2 Layui PearAdmin架构&#xff0c;提供了实时监控和管理的功能&#xff0c;让您随时随地掌握系统运营情况。 说明 Ypay源支付6.9无授权聚合免签系统可运营源码 已搭建测试无加密版本…
阅读更多...
FastWiki v0.1.0发布！新增超多功能

FastWiki v0.1.0发布！新增超多功能

FastWiki 发布 v0.1.0 https://github.com/239573049/fast-wiki/releases/tag/v0.1.0 更新日志 兼容OpenAI接口格式删除Blazor版本UI删除useEffect,解决可能存在问题的bug修复对话可以看到所有对话Merge branch ‘master’ of https://gitee.com/hejiale010426/fast-wiki更新…
阅读更多...
14、设计模式之命令模式（Command）

14、设计模式之命令模式（Command）

一、什么是命令模式 命令模式&#xff08;Command Pattern&#xff09;是一种行为型设计模式&#xff0c;又叫动作模式或事务模式。它将请求&#xff08;命令&#xff09;封装成对象&#xff0c;使得可以用不同的请求对客户端进行参数化&#xff0c;具体的请求可以在运行时更改…
阅读更多...
蓝桥杯-粘木棍-DFS

蓝桥杯-粘木棍-DFS

题目 思路 --有n根木棍&#xff0c;需要将其粘成m根木棍&#xff0c;并求出最小差值&#xff0c;可以用DFS枚举出所有情况。粘之前有n根短木棍&#xff0c;粘之后有m根长木棍&#xff0c;那么让长木棍的初始长度设为0。外循环让所有的短木棍都参与粘&#xff0c;内循环让要粘的…
阅读更多...
基于SpringBoot的“企业客户信息反馈平台”的设计与实现（源码+数据库+文档+PPT)

基于SpringBoot的“企业客户信息反馈平台”的设计与实现（源码+数据库+文档+PPT)

基于SpringBoot的“企业客户信息反馈平台”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 平台首页界面图 技术文档界面图 问题信息…
阅读更多...
C# Onnx C2PNet 图像去雾 室外场景

C# Onnx C2PNet 图像去雾 室外场景

目录 介绍 效果 模型信息 项目 代码 下载 C# Onnx C2PNet 图像去雾 室外场景 介绍 github地址&#xff1a;https://github.com/YuZheng9/C2PNet [CVPR 2023] Curricular Contrastive Regularization for Physics-aware Single Image Dehazing 效果 模型信息 Model P…
阅读更多...
专升本 C语言笔记-03 变量的作用域

专升本 C语言笔记-03 变量的作用域

1.变量的概念 内存中有个存储区域,这个地方的数据可以在同一类型范围内不断变化通过变量名,可以访问这块内存区域,获取里面的值; 变量名的构成:数据类型 变量名 值 C语言中变量声明格式: 数据类型 变量名 值 2.变量的注意 2.1.全局变量: 定义在函数外部的叫全局变量…
阅读更多...
SD-WAN技术如何保障网络的持续连接和稳定性

SD-WAN技术如何保障网络的持续连接和稳定性

在当今数字化时代&#xff0c;企业对于网络的稳定性和持续连接性需求日益增加。SD-WAN作为一种新兴的网络解决方案&#xff0c;为企业提供了有效的方式来实现网络的持续连接和稳定性。本文将探讨SD-WAN技术如何保障网络的持续连接和稳定性。 1、多路径冗余技术 SD-WAN采用了多…
阅读更多...
一台服务器部署两个独立的mysql实例

一台服务器部署两个独立的mysql实例

&#x1f341;博主简介&#xff1a; &#x1f3c5;云计算领域优质创作者 &#x1f3c5;2022年CSDN新星计划python赛道第一名 &#x1f3c5;2022年CSDN原力计划优质作者 &#x1f3c5;阿里云ACE认证高级工程师 &#x1f3c5;阿里云开发者社区专…
阅读更多...
激活函数Mish

激活函数Mish

paper&#xff1a;Mish: A Self Regularized Non-Monotonic Activation Function official implementation&#xff1a;https://github.com/digantamisra98/Mish 背景 在早期文献中&#xff0c;Sigmoid和TanH激活函数被广泛使用&#xff0c;随后在深度神经网络中失效。相比于…
阅读更多...
大宗电子盘商品撮合制交易软件PHP后台

大宗电子盘商品撮合制交易软件PHP后台

大宗电子盘商品撮合制交易软件是一种用于大宗商品电子交易的系统&#xff0c;其中撮合制是交易机制的核心部分&#xff0c;它负责将买卖双方的订单进行匹配并完成交易。在开发这类软件的PHP后台时&#xff0c;需要考虑以下几个关键方面&#xff1a; 系统架构设计&#xff1a; …
阅读更多...
Docker拉取镜像存储不足

Docker拉取镜像存储不足

在使用Docker时&#xff0c;我们经常遇到一个问题&#xff0c;就是拉取镜像时提示存储空间不足。这是因为Docker在拉取镜像时需要将镜像文件下载到本地存储中&#xff0c;而有时本地存储空间不足以容纳完整的镜像文件。 本文将介绍一些解决这个问题的方法&#xff0c;并提供相…
阅读更多...
云原生消息流系统 Apache RocketMQ 在腾讯云的大规模生产实践

云原生消息流系统 Apache RocketMQ 在腾讯云的大规模生产实践

导语 随着云计算技术的日益成熟&#xff0c;云原生应用已逐渐成为企业数字化转型的核心驱动力。在这一大背景下&#xff0c;高效、稳定、可扩展的消息流系统显得尤为重要。腾讯云高级开发工程师李伟先生&#xff0c;凭借其深厚的技术功底和丰富的实战经验&#xff0c;为我们带…
阅读更多...
深入解析Java中锁机制以及底层原理

深入解析Java中锁机制以及底层原理

一、概述 1.1 背景 概念&#xff1a;锁是多线程编程中的机制&#xff0c;用于控制对共享资源的访问。可以防止多个线程同时修改或读取共享资源&#xff0c;从而保证线程安全。 作用&#xff1a;锁用于实现线程间的互斥和协调&#xff0c;确保在多线程环境下对共享资源的访问顺…
阅读更多...
如何处理Android悬浮弹窗双击返回事件？

如何处理Android悬浮弹窗双击返回事件？

目录 1 前言 1.1 准备知识 1.2 问题概述 2 解决方案 3 代码部分 3.1 动态更新窗口焦点 3.2 窗口监听返回事件 3.3 判断焦点是否在窗口内部 3.4 窗口监听焦点移入/移出 1 前言 1.1 准备知识 1&#xff09;开发环境&#xff1a; 2D开发环境&#xff1a;所有界面或弹窗…
阅读更多...
FFmpeg工作流程及视频文件分析

FFmpeg工作流程及视频文件分析

FFmpeg工作流程: 解封装(Demuxing)--->解码(Decoding)--->编码(Encoding)--->封装(Muxing) FFmpeg转码工作流程: 读取输入流--->音视频解封装--->解码音视频帧--->编码音视频帧--->音视频封装--->输出目标流 可简单理解为如下流程: 读文件-->解…
阅读更多...
教师如何搭建学生查询考试分数的平台？

教师如何搭建学生查询考试分数的平台？

随着信息技术的快速发展&#xff0c;搭建一个学生查询考试分数的平台已经成为现代教育管理的重要组成部分。这样的平台不仅可以提高成绩管理的效率&#xff0c;还能为学生提供便捷、及时的成绩查询服务。那么&#xff0c;作为教师&#xff0c;我们应该如何搭建这样一个平台呢&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023