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

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

常用的类型定义
基本类型: 像 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.mfbz.cn/a/704220.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

理解 GPIO 的推挽与开漏

在日常的嵌入式开发过程当中&#xff0c;GPIO可以说是接触最多的外设了。小到点亮一个LED灯&#xff0c;大到模拟总线通讯&#xff0c;都必不可少地需要用到GPIO资源。而对于GPIO的两大输出模式 ——推挽输出和开漏输出&#xff0c;你是否真正理解了呢&#xff1f; 首先我们看…

HCIA14 DHCP 实验

动态主机配置协议 DHCP&#xff08;Dynamic Host Configuration Protocol&#xff09;由 RFC 2131 定义&#xff0c;采用客户端/服务器通信模式&#xff0c;由客户端&#xff08;DHCP Client&#xff09;向服务器&#xff08;DHCP Server&#xff09;提出配置申请&#xff0c;服…

哈希应用——布隆过滤器

布隆过滤器的提出 场景一&#xff1a;在注册账号设置昵称的时候&#xff0c;为了保证每个用户昵称的唯一性&#xff0c;系统必须检测你输入的昵称是否被使用过&#xff0c;这本质就是一个key的模型&#xff0c;我们只需要判断这个昵称被用过&#xff0c;还是没被用过。 场景二&…

声学气膜馆:高品质声效与灵活应用的完美结合—轻空间

声学气膜馆是一种结合气膜建筑和声学优化的新型场馆。这种建筑形式不仅可以快速搭建和灵活使用&#xff0c;还能提供出色的声学效果&#xff0c;非常适合用于音乐演出、体育比赛、会议展览等多种场合。 气膜建筑的声学优势 气膜建筑利用空气压力支撑膜材&#xff0c;形成稳定的…

计算机图形学入门09:深度缓存

在前面知道了怎么将一个三角形显示到屏幕上&#xff0c;那么如果有很多三角形&#xff0c;各自距离相机的远近也不一样&#xff0c;并且三角形会相互遮挡。也就是三维空间中有很多物体&#xff0c;通常近处的物体会遮挡住远处的物体&#xff0c;那么在计算机渲染中该如何处理呢…

第十四篇——互信息:相关不是因果,那相关是什么?

目录 一、背景介绍二、思路&方案三、过程1.思维导图2.文章中经典的句子理解3.学习之后对于投资市场的理解4.通过这篇文章结合我知道的东西我能想到什么&#xff1f; 四、总结五、升华![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/499cd9af2ea14cbf8d12813f6f…

Linux命令详解(2)

文本处理是Linux命令行的重要应用之一。通过一系列强大的命令&#xff0c;用户可以轻松地对文本文件进行编辑、查询和转换。 cat&#xff1a; 这个命令用于查看文件内容。它可以一次性显示整个文件&#xff0c;或者分页显示。此外&#xff0c;cat 还可以用于合并多个文件的内容…

超全分析MybatisPlus中的MetaObjectHandler全局字段填充的基本知识(附Demo及实战)

目录 前言1. 源码及API2. Demo架构3. 全局字段填充&#xff08;实战&#xff09;4. 局部字段不填充&#xff08;实战&#xff09; 前言 对于Java的相关知识推荐阅读&#xff1a; java框架 零基础从入门到精通的学习路线 附开源项目面经等&#xff08;超全&#xff09;【Java项…

nginx ws长连接配置

nginx ws长连接配置 http根节点下配上 map $http_upgrade $connection_upgrade {default upgrade; close;}如下&#xff1a; server服务节点下&#xff0c;后端接口的代理配置 proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connec…

电脑意外出现user32.dll丢失的八种修复方法,有效解决user32.dll文件丢失

遇到与 user32.dll 相关的错误通常是因为该文件已损坏、丢失、或者与某些软件冲突。今天这篇文章寄给大家介绍八种修复user32.dll丢失的方法&#xff0c;下面是一步步的详细教程来解决这个问题。 1. 重新启动电脑 第一步总是最简单的&#xff1a;重新启动你的电脑。许多小问题…

52.Python-web框架-Django - 多语言编译-fuzzy错误

目录 1.起因 2.原因 3.解决方法 3.1手动移除fuzzy标记 3.2重新生成po文件&#xff0c;并检查是否还存在fuzzy标记 3.3重新编译生成mo文件 1.起因 在Django的国际化和本地化过程中&#xff0c;当你发现某些字段仅显示msgid&#xff0c;而不显示msgstr时&#xff0c;可能是…

Python爬虫实战(实战篇)—18获取【小红书】首页信息写入Excel(仅用于学习-附完整版代码)

文章目录 专栏导读背景1、分析首页页面2、分析获取信息2-1,获取:笔记类型2-2,获取:标题2-3,获取:用户信息2-4,获取:用户ID2-5,获取:用户头像2-6,获取:文章连接完整代码总结专栏导读 文章名称链接Python爬虫实战(实战篇)—16获取【百度热搜】数据—写入Ecel(附完整…

日常销售数据分析为什么重要?三个维度全面分析日常销售数据

在当今电子商务的浪潮席卷全球的时代&#xff0c;网店如雨后春笋般涌现&#xff0c;并且竞争日趋激烈。在这样一个充满挑战与机遇的环境中&#xff0c;如何洞察市场动向&#xff0c;把握消费者需求&#xff0c;实现销售业绩的稳步增长&#xff0c;成为每一位电商运营者必须面对…

2024.6.12 作业 xyt

今日课堂练习&#xff1a;vector构造函数 #include <iostream> #include <vector> using namespace std;void printVector(vector<int> &v) {vector<int>::iterator iter;for(iterv.begin(); iter ! v.end(); iter){cout << *iter <<…

扩散模型会成为深度学习的下一个前沿领域吗?

文章目录 一、说明二、 第 1 部分&#xff1a;了解扩散模型2.1 什么是扩散模型2.2 正向扩散2.3 反向扩散 三、他们的高成本四、扩散模型的用处五、为什么扩散模型如此出色六、第 2 部分&#xff1a;使用扩散模型生成6.1 用于自然语言处理和 LLM 的文本扩散6.2 音频视频生成6.3 …

【APP移动端自动化测试】第一节.环境配置和adb调试工具

文章目录 前言一、Java环境搭建二、AndroidSDK环境搭建三、Android模拟器安装四、adb调试工具基本介绍 4.1 adb构成和基本原理 4.2 adb获取包名&#xff0c;界面名 4.3 adb文件传输 4.4 adb获取app启动时间 4.5 adb获取手机日志 4.6 adb其他有关…

空间搜索geohash概述;redis的geo命令

概述 通常在一些2C业务场景中会根据用户的位置来搜索一些内容。通常提供位置搜索的都是直接通过redis/mongodb/es等中间件实现的。 但是这些中间件又是怎么实现位置搜索的呢&#xff1b; 查了一番资料&#xff0c;发现背后一个公共的算法Geohash。 搜索的时候可以根据距离对…

「C系列」C 指针及其应用案例

文章目录 一、C 指针1. 指针的定义2. 指针的初始化3. 指针的解引用4. 指针的运算5. 动态内存分配6. 指针的NULL初始化7. 指针作为函数参数和返回值8. 指针数组和数组指针9. 多级指针 二、C语言中有哪些内置的指针操作符三、常见应用案例1. 交换两个变量的值2. 数组与指针3. 字符…

SwiftUI中自定义Shape与AnimateableData的使用

上一篇文章主要介绍了一下在SwiftUI中如何自定义Shape&#xff0c;本篇文章主要介绍Shape中的 一个关键的属性AnimatableData&#xff0c;它用于定义可以被动画化的数据。通过实现 Animatable 协议&#xff0c;可以让自定义视图或图形响应动画变化。 AnimatableData 是 Animata…

flutter 环境搭建(windows)(先装 jdk 建议1.8起步)

1&#xff1a;先从 官网 下载一个合适版本的SDK 2&#xff1a;下载完成之后 解压到一个合适的盘符下面&#xff08;本文在 D 盘 3.10.0版本&#xff09; 3&#xff1b;双击 flutter_console.bat文件可以看到一些基本信息 4&#xff1a;配置环境 1.添加用户变量 FLUTTER_STORAGE…