vue3第三十九节(TS中的高级类型,分类以及使用注意事项)

news2025/2/22 3:45:15

前言:为什么需要使用高级类型,正常的类型不能满足日常的业务需求,对于复杂的数据结构、函数签名、类型转换,我们需要使用高级类型来处理,常用的高级类型包含以下几种:
在这里插入图片描述

常用的类型定义
基本类型: 像 number、string、boolean 这样的基本类型,它们表示简单的数据。
对象类型: 可以使用对象字面量、接口、类等定义对象类型。

数组和元组: 具有内置的数组类型和元组类型,用于处理集合数据。

函数类型: 支持函数类型,包括参数类型和返回值类型。

1、交叉类型

是通过 & 符号,将多个类型或者方法合并为一个类型

如:
type Age = {age: number}
type Name = {name: string}
type job = string

type Person = age & name & job

此时 Person 包含了 age name job 的类型

使用于对象合并场景,比如声明一个函数,将两个对象合并为一个对象

<script lang="ts">
    function extend<T, U>(first:T, second:U): T&U {
        let result:<T & U> = {}
        for(let i in first) {
            result[i] = first[i]
        }
        for(let i in second) {
            if (!result.hasOwnProperty(i)) {
                result[i] = second[i]
            }
        }
        return result
    }
</script>

2、联合类型

表示一个值可以是多个类型 中的任意一个,通常使用 | 管道符 表示

type Result = number | string | boolean  
Result 的值只能是  number、string、boolean 中的一个,不能同时是两种或多种

3、映射类型

通过 in 关键字做类型的映射,遍历已有类型的key,或者遍历联合类型,通常与泛型一起使用,用于添加修改属性

<script lang="ts">
type Item = {
    readonly id: string,
    title:string
}

type ReadOnlyItem<T> = {
    reaonly [key in keyof T]: T[key]
}

type NewItem = ReadOnlyItem<Item>

// 获取我们希望 自定义的类型在 使用时候是可选的
type Partial<T> = {
    [P in keyof T]?: T[P];
}
</script>

keyof T:通过类型索引 keyof 的得到联合类型 id | title
P in keyof T 等同于 p in id | title,相当于执行了一次 forEach 的逻辑,遍历 id | title, 从而进行修改获取最新的类型
最后得到的 NewItem为如下:

type NewItem =  {
    readonly id: string,
    readonly title:string
}

4、条件类型

条件类型允许通过 三元运算的方式 选择不同的类型,通常应用于泛型或者复杂类型

<script lang="ts">
    T extend U ? E : F 
    // 如果 T是U的子集,那么就取 泛型 E 否则 取 泛型 F
    // 如定义一个boolean
    type IsBoolean<T> = T extend boolean ? true : false
    type E = isBoolean<string> // false
    type F = isBoolean<boolean> // true

</script>

5、可辨识联合类型

在函数式编程中 我们通常会合并单例类型联合类型类型保护类型别名来创建一个叫做 可辨识联合的高级模式,它也称做 标签联合代数数据类型
通常需要满足 三个要素
A、具有普通的单例类型属性— 可辨识的特征
B、一个类型别名包含了那些类型的联合— 联合
C、此属性上的类型保护

<script lang="ts">
interface Square {
    kind: "square";
    size: number;
}
interface Rectangle {
    kind: "rectangle";
    width: number;
    height: number;
}
interface Circle {
    kind: "circle";
    radius: number;
}
// 先声明 三个接口。 每个接口都有 kind属性但有不同的字符串字面量类型。 kind属性称做 可辨识的特征或 标签。 其它的属性则特定于各个接口;
type Shape = Square | Rectangle | Circle;
// 现在我们使用可辨识联合:

function area(s: Shape) {
    switch (s.kind) {
        case "square": return s.size * s.size; // 正方形面积
        case "rectangle": return s.height * s.width;
        case "circle": return Math.PI * s.radius ** 2;
    }
}

// 若我们没有涵盖所有可辨识的类型时,我们希望编译器能够告知我们
// 使用 never 类型 做完整检查
function areaNever(x: never):never {
    throw new Error("Unexpected object:  " + x + "in Area")
}
// area 做如下修改
function area(s: Shape) {
    switch (s.kind) {
        case "square": return s.size * s.size; // 正方形面积
        case "rectangle": return s.height * s.width;
        case "circle": return Math.PI * s.radius ** 2;
        default: return areaNever(s)
    }
}
</script>

6、索引类型

keyof 类似于 Object.keys ,用于获取一个接口中 Key 的联合类型。

<script lang="ts">
interface Button {
    type: string
    text: string
}

type ButtonKeys = keyof Button
// 等效于
type ButtonKeys = "type" | "text"
</script>

7、类型别名

类型别名会给类型起一个新的名字,可以作用于原始值,联合类型,元组以及其它任何你需要手写的类型;起别名是新建一个名字,由于引用那个类型;
可以使用 type SomeName = someValidTypeAnnotation的语法来创建类型别名

<script lang="ts">
    type age = number | string

    const b: age = true // 不能将类型 true分配给类型“some”
    const c: age = 'hello' // ok
    const d: age = 123 // ok
    // 泛型
    type Container<T> = { value: T };
    // 使用类型别名在属性中引用自己
    type Tree<T> = {
        value: T;
        left: Tree<T>;
        right: Tree<T>;
    }
</script>

8、类型约束

通过关键字 extend 进行约束,不同于在 class 后使用 extends 的继承作用,泛型内使用的主要作用是对泛型加以约束

<script>
type BaseType = string | number | boolean
// 这里表示 copy 的参数
// 只能是字符串、数字、布尔这几种基础类型
function copy<T extends BaseType>(arg: T): T {
  return arg
}
</script>

类型约束通常和类型索引一起使用,例如我们有一个方法专门用来获取对象的值,但是这个对象并不确定,我们就可以使用 extends 和 keyof 进行约束。

<script>
    function getValue<T, K extends keyof T>(obj: T, key: K) {
        return obj[key]
    }

    const obj = { a: 1 }
    const a = getValue(obj, 'a')
</script>

TypeScript 的高级类型是前端开发中的强大工具,可以帮助我们处理复杂的数据结构构建类型安全的应用程序和提高代码的可维护性。通过进一步学习交叉类型、联合类型、映射类型、条件类型等,我们可以更好地应用它们在实际项目中

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

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

相关文章

vs2015+win10编译LAStools

文章目录 下载LasTool安装包编译laslib测试 下载LasTool安装包 不要再GitHub上下载&#xff0c;在官网下载&#xff1a;link 编译laslib 将压缩包解压到对应路径下&#xff0c;注意路径下不要有空格和汉字。用vs打开目录下的 “lastools.dsw” 文件 下面注意几点&#xff1a…

Python解析Word文档的自动编号

关于自动编号的知识可以参考《在 Open XML WordprocessingML 中使用编号列表》 链接&#xff1a;https://learn.microsoft.com/zh-cn/previous-versions/office/ee922775(voffice.14) python-docx库并不能直接解析出Word文档的自动编号&#xff0c;因为原理较为复杂&#xff…

0502 构成分析设计MOS管放大电路与FET异同点

构成&分析&设计MOS管放大电路&与FET有何异同点 MOSFET需具备什么样的条件才能正常放大信号&#xff1f;如何构成MOSFET放大电路如何分析和设计MOSFET放大电路1.图解分析 2.直流偏置及静态工作点的计算![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/fc…

6.7.31 使用端到端训练的基于 EfficientNet 的卷积网络在双视图乳房 X 线摄影中进行乳腺癌诊断

最好的技术之一进行了两次迁移学习:第一种是使用在自然图像上训练的模型来创建“块分类器”,对子图像进行分类;第二种是使用块分类器扫描整个乳房 X 光检查并创建“单视图全图像分类器”。建议进行第三次迁移学习,以获得一个“双视图分类器”,以使用两个乳房 X 光检查视图…

每日复盘-202406012

今日关注&#xff1a; 这几天市场打板情绪环境转好&#xff0c;轻仓试错 20240612 六日涨幅最大: ------1--------605258--------- 协和电子 五日涨幅最大: ------1--------605258--------- 协和电子 四日涨幅最大: ------1--------301036--------- 双乐股份 三日涨幅最大: --…

《亿级流量网站架构核心技术》-高可用-限流详解

背景 项目中遇到一个场景&#xff0c;用户点击按钮给缺勤员工发送扣薪通知。按照需求是一个月只会发送一次通知&#xff0c;在代码逻辑中已经做了兜底策略--在发送邮件之前先判断本月通知是否已发送&#xff0c;发送完之后将发送状态进行持久化。发邮件的时间大概在1分钟之内。…

看了这面经,测开上岸不远了

前段时间和4位来自百度、美团、快手、滴滴的高级测开大厂学长学姐&#xff0c;进行了一场直播&#xff0c;负责解答24届春招补录&25届找实习同学的问题 当天直播时长达2个小时&#xff0c;对于如何找测开实习&#xff0c;需要怎么准备项目&#xff0c;简历怎么写&#xff…

每天五分钟计算机视觉:如何在现有经典的卷积神经网络上进行微调

本文重点 在深度学习领域,卷积神经网络(Convolutional Neural Networks,CNN)因其强大的特征提取和分类能力而广泛应用于图像识别、自然语言处理等多个领域。然而,从头开始训练一个CNN模型往往需要大量的数据和计算资源,且训练时间较长。幸运的是,迁移学习(Transfer Le…

MySQL系列-语法说明以及基本操作(二)

1、MySQL数据表的约束 1.1、MySQL主键 “主键&#xff08;PRIMARY KEY&#xff09;”的完整称呼是“主键约束”。 MySQL 主键约束是一个列或者列的组合&#xff0c;其值能唯一地标识表中的每一行。这样的一列或多列称为表的主键&#xff0c;通过它可以强制表的实体完整性。 …

C++的爬山算法

爬山算法&#xff08;Hill Climbing Algorithm&#xff09;是一种局部搜索算法&#xff0c;它通过迭代搜索的方式寻找问题的局部最优解。在爬山过程中&#xff0c;算法总是选择当前状态邻域中最好&#xff08;即函数值最大或最小&#xff09;的状态作为下一个状态&#xff0c;直…

小程序 js+Canvas 绘制半圆环虚线进度条

效果图&#xff1a; 思路&#xff1a;过程分为三步&#xff0c;第1步&#xff0c;先画虚线底部背景&#xff0c;第2步&#xff0c;画动态的虚线&#xff08;已选虚线蓝颜色&#xff09;&#xff0c;第3步&#xff0c;画动态的外标&#xff08;已选虚线外位置的标&#xff09;&a…

AOSP12隐藏首页搜索框----隐藏google 搜索栏

目录 第一步&#xff1a;修改文件 第二步&#xff1a;修改文件 第三步&#xff1a;重新编译源码&#xff0c;启动模拟器 第四步、运行效果 第一步&#xff1a;修改文件 源码文件路径: packages/apps/Launcher3/res/layout/search_container_workspace.xml&#xff0c;将…

Navicat for MySQL 11软件下载附加详细安装教程

根据使用者情况表明Navicat Premium 能使你快速地在各种数据库系统间传输数据&#xff0c;或传输到一份指定 SQL 格式和编码的纯文本文件&#xff0c;计划不同数据库的批处理作业并在指定的时间运行&#xff0c;其他功能包括导入向导、导出向导、查询创建工具、报表创建工具、数…

【6】第一个Java程序:Hello World

一、引言 Java&#xff0c;作为一种广泛使用的编程语言&#xff0c;其强大的跨平台能力和丰富的库函数使其成为开发者的首选。对于初学者来说&#xff0c;编写并运行第一个Java程序是一个令人兴奋的时刻。本文将指导你使用Eclipse这一流行的集成开发环境&#xff08;IDE&#…

【对抗样本】【FGSM】Explaining and Harnessing Adversarial Examples 代码复现

简介 参考Pytorch官方的代码Adversarial Example Generation 参数设置(main.py) # 模型选择&#xff1a;GPU device mps if torch.backends.mps.is_available() else cpu # 数据集位置 dataset_path ../../../Datasets batch_size 1 shuffle True download False # 学习率…

express入门03增删改查

目录 1 搭建服务器2 静态文件托管3 引入bootstrap4 引入jquery5 编写后端接口5.1 添加列表查询方法5.2 添加路由5.3 添加数据表格 总结 我们前两篇介绍了如何利用express搭建服务器&#xff0c;如何实现静态资源托管。那利用这两篇的知识点&#xff0c;我们就可以实现一个小功能…

WebSocket 快速入门 与 应用

WebSocket 是一种在 Web 应用程序中实现实时、双向通信的技术。它允许客户端和服务器之间建立持久性的连接&#xff0c;以便可以在两者之间双向传输数据。 以下是 WebSocket 的一些关键特点和工作原理&#xff1a; 0.特点&#xff1a; 双向通信&#xff1a;WebSocket 允许服务…

艾宾浩斯winform单词系统+mysql

为用户提供集词典、题库、记忆单词功能于一体的应用&#xff0c;为用户提供目的性强、科学高效、多样化的记忆单词方法&#xff0c;使用户学习英语和记忆单词的效率得到提高 单词记忆模块 管理模块 查询单词 阅读英文 查看词汇 记忆单词 收藏单词 字段管理设置 统计 艾宾浩斯wi…

springBoot多数据源使用、配置

又参加了一个新的项目&#xff0c;虽然是去年做的项目&#xff0c;拿来复用改造&#xff0c;但是也学到了很多。这个项目会用到其他项目的数据&#xff0c;如果调用他们的接口取数据&#xff0c;我还是觉得太麻烦了。打算直接配置多数据源。 然后去另一个数据库系统中取出数据…

【C语音 || 数据结构】二叉树--堆

文章目录 前言堆1.1 二叉树的概念1.2 满二叉树和完美二叉树1.3 堆的概念1.4 堆的性质1.4 堆的实现1.4.1堆的向上调整算法1.4.1堆的向下调整算法1.4.1堆的接口实现1.4.1.1堆的初始化1.4.1.2堆的销毁1.4.1.3堆的插入1.4.1.4堆的删除1.4.1.4堆的判空1.4.1.4 获取堆的数据个数 前言…