TypeScript 交叉类型、泛型、泛型约束、泛型接口、泛型类、泛型工具类型、索引签名类型、映射类型、索引查询类型

最新推荐文章于 2024-09-07 13:38:28 发布
最新推荐文章于 2024-09-07 13:38:28 发布
阅读量514 收藏 3
点赞数
分类专栏： TypeScript 文章标签： typescript 开发语言 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43472877/article/details/127304480
版权

文章目录

1.交叉类型

在这里插入图片描述

在这里插入图片描述

交叉类型（&）和接口继承（extends）的对比：

在这里插入图片描述
接口继承（extends）
在这里插入图片描述
交叉类型（&）
在这里插入图片描述

2.泛型

在这里插入图片描述

2.1创建泛型

在这里插入图片描述
在这里插入图片描述

2.2简化调用泛型函数

在这里插入图片描述
在这里插入图片描述

2.3泛型约束

在这里插入图片描述

1.方式一：添加更具体类型

在这里插入图片描述
在这里插入图片描述

2.方式二：添加约束

在这里插入图片描述
在这里插入图片描述

3.方式三：keyof

在这里插入图片描述
在这里插入图片描述

2.4 泛型接口

在这里插入图片描述
在这里插入图片描述

泛型接口具体使用 数组

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

2.5 泛型类

在这里插入图片描述
在这里插入图片描述

2.6 泛型工具类型

在这里插入图片描述

Partial< Type>

在这里插入图片描述
在这里插入图片描述

Readonly< Type>

在这里插入图片描述
在这里插入图片描述

Pick<Type, Keys>

在这里插入图片描述
在这里插入图片描述

Record<Keys,Type>

在这里插入图片描述
在这里插入图片描述

2.7 索引签名类型

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

2.8 映射类型

在这里插入图片描述
在这里插入图片描述

映射类型（使用 keyof）

在这里插入图片描述
在这里插入图片描述

映射类型（Partial实现原理）

在这里插入图片描述

2.9 索引查询类型

在这里插入图片描述
在这里插入图片描述

同时查询多个索引的类型

在这里插入图片描述
在这里插入图片描述

_七七
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
TypeScript泛型类 - 把类作为参数类型的泛型类.zip
11-05
在这个“TypeScript泛型类 - 把类作为参数类型的泛型类”示例中，我们将深入探讨如何利用泛型在TypeScript中创建灵活的、可复用的类模板。 泛型是TypeScript中的一个核心概念，它允许我们在编写代码时定义和重用...
前端TypeScript学习day04-交叉类型与泛型
来自计科萌新的编程记录本
10-15 4249
学习目标：1. 了解交叉类型 2.了解泛型
【TS】1321- 学会 TS infer，写起泛型真香！
pingan8787
05-15 3782
阿宝哥精心准备的《轻松学 TypeScript》视频教程已经更新到第十一期了，通过形象生动的动画，让你轻松搞懂 TypeScript 的难点和核心知识点！你知道如何获取 T0 数组类型中元素的类型和 T1 函数类型中的返回值类型么？给你 3 秒钟的时间思考一下。typeT0=string[]; typeT1=()=>string;要实现上述的功能，...
6.TypeScript入门之TS高级类型（类型兼容性、交叉类型和泛型）
Coding and studying
02-27 3783
上一章节：5.TypeScript入门之TS高级类型（class类） 4.2 类型兼容性 两种类型系统：1 Structural Type System（结构化类型系统） 2 Nominal Type System（标明类型系统）。 TS 采用的是结构化类型系统，也叫做 duck typing （鸭子类型），类型检查关注的是值所具有的形状。 也就是说，在结构类型系统中，如果两个对象具有相同的形状，则认为它们属于同一类型。 class Point { x: number; y: number } class
typescript学习：泛型函数重载 + 交叉类型 + 类型断言
weixin_44828005的博客
10-27 499
本文内容如下 泛型函数重载 + 交叉类型 + 类型断言 如果你都有了答案，可以忽略本文章，或去TS学习地图寻找更多答案 简单例子 将两个对象的属性合并 type objType1 = { name: string, age: number } type objType2 = { name: string, age: number, phone: number } let obj1: objType1 = { name: 'tao', age: 18 } let obj2: objType2 = {
TypeScript高级类型（泛型、索引签名类型、映射类型、索引查询类型）
qq_39206750的博客
04-01 1991
TypeScript高级类型（泛型、索引签名类型、映射类型、索引查询类型）
TypeScript的泛型接口 泛型类接口.zip
11-05
在TypeScript中，泛型是实现代码复用和类型安全的一种强大工具。它们允许我们创建可以处理多种数据类型的函数、接口或类。本篇将深入探讨泛型接口和泛型类接口，以及如何在实际项目中应用它们。 首先，我们来理解...
TypeScript中的泛型 泛型变量 泛型类.zip
11-05
在TypeScript中，泛型是一种强大的工具，它允许我们在编写代码时定义可重用的数据类型模板，从而提高代码的灵活性和可复用性。泛型是TypeScript的一大特色，它在许多面向对象的设计模式和数据结构中发挥着关键作用。...
前端深入理解Typescript泛型概念
10-15
在TypeScript中，泛型允许我们在定义函数、接口或类的时候不具体指定数据类型，而是在使用这些函数、接口或类的地方再指定具体的数据类型。这样一来，我们就可以编写更为通用的代码，而无需为每一种数据类型编写重复...
如何在TypeScript中使用泛型
04-12
在今天的内容中，我们将尝试 TypeScript 泛型的真实示例，并探索它们如何在函数、类型、类和接口中使用。我们还将使用泛型创建映射类型和条件类型，这将帮助我们创建可以灵活应用于代码中所有必要情况的 TypeScript ...
vue3+el-tale封装（编辑、删除、查看详情按钮一起封装）
CallMe_CrabXie的博客
08-27 1184
对应的tableData和tableDataHeader文件（实际开发中，应该从后端拿tableData，tableHeader根据情况自定义）
一个php快速项目搭建框架源码，带一键CURD等功能
jiyc2008的博客
08-26 5985
框架易于功能扩展，代码维护，方便二次开发，帮助开发者简单高效降低二次开发成本，满足专注业务深度开发的需求。百度网盘下载。
JS都有哪些操作数组的方法
ggq53219的博客
09-04 518
JavaScript 中操作数组的方法非常丰富，这些方法大致可以分为几类：创建和初始化数组、添加元素、删除元素、遍历数组、搜索元素、数组排序、数组映射和过滤等。
WHAT - React 函数与 useMemo vs useCallback
weixin_58540586的博客
09-03 956
目录介绍`useMemo` 与 `useCallback` 的区别示例代码`useMemo` 示例`useCallback` 示例总结 介绍 在 React 中，useMemo 和 useCallback 是两个用于性能优化的钩子，尽管它们有些相似，但各自有不同的用途和应用场景。理解它们的区别和适用情况可以帮助你更有效地管理组件的性能和状态。 useMemo 与 useCallback 的区别 useMemo: 目的: 用于记忆化（缓存）计算结果。它接受一个计算函数和依赖项数组，只有当依赖项发生变化时
在 Vue 中实现跨项目数据传递
世轩的博客
09-03 1428
需要注意的是，跨项目数据传递可能会带来一些安全和数据一致性的问题。在实际应用中，要根据具体情况选择合适的方法，并确保数据的安全性和可靠性。同时，对于敏感数据，应该采取加密等安全措施。
Module “console“ has been externalized for browser compatibility.
最新发布
Alvin的博客
09-07 104
在 Vue 3.5.3 中使用 Vite 作为构建工具时，如果你尝试直接从。模块外部化了，这意味着它不会在客户端环境中暴露。去除导入 error 函数的代码。函数，会遇到一个错误，提示。这是因为 Vite 默认将。Vue 3.5.3 中。
基于JavaWeb开发的JavaSpringboot+Vue实现前后端分离房屋租赁系统
央顺科技官方博客
09-05 495
2021年处于信息科技高速发展的大背景之下。在今天，缺少手机和电脑几乎已经成为不可能的事情，人们生活中已经难以离开手机和电脑。针对增加的成本管理和操作,各大商家非常有必要建立自己的网上房屋租赁平台系统，这既可以让更多的人体验到网络所带来的方便，也有助于提高房屋的租赁。在经过几十年的高速发展后，互联网已成为最流行、最普及的媒体，每天的信息流量甚至能比得上过去十年。其以便捷的信息交换、快速的沟通速度，悄然地改变着会员的消费方式。
npm 安装electron网络问题报错解决
weixin_59685936的博客
09-05 1138
npm 安装electron网络问题报错解决
Nginx部署前端Vue项目
不会代码的小林
09-03 1329
Nginx是一款轻量级的高性能Web服务器，可以用于静态文件的托管和反向代理等场景。现在，您可以在浏览器中访问http://example.com（请替换为您自己的域名），应该可以看到Vue应用程序正在运行。请将example.com替换为您自己的域名，将/var/www/my-project/dist替换为Vue项目的dist目录的实际路径。现在，我们需要配置Nginx来托管Vue项目的静态文件。接下来，我们可以使用Vue CLI创建一个新的Vue项目。在部署之前，我们需要先构建Vue项目。
typescript 静态变量是泛型类型
09-08
对于 TypeScript 中的静态变量，可以使用泛型类型。静态变量是指属于类本身而不是类的实例的属性或方法。要为静态变量指定泛型类型，可以在类上使用泛型参数。 下面是一个示例代码： ```typescript class MyClass<T> { static myStaticVariable: T; } // 使用字符串作为泛型类型 MyClass.myStaticVariable = "Hello"; // 使用数字作为泛型类型 MyClass.myStaticVariable = 123; // 使用数组作为泛型类型 MyClass.myStaticVariable = [1, 2, 3]; ``` 在上述示例中，`MyClass` 类定义了一个静态变量 `myStaticVariable`，并使用泛型类型 `T` 进行类型定义。我们可以根据需要将不同类型的值赋给 `myStaticVariable`。 注意，静态变量是属于类本身的，而不是类的实例。因此，通过 `MyClass.myStaticVariable` 来访问和赋值静态变量。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值