TypeScript中的一些高阶类型 Omit Pick ReturnType Parameters

最新推荐文章于 2026-08-10 10:00:40 发布
原创 最新推荐文章于 2026-08-10 10:00:40 发布 · 2.5k 阅读 · 6 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
vue3.0初探

当前文章被收录于：

vue3.0初探
6 篇文章 2 人学习
订阅专栏 查看详情
本文深入探讨Vue3的新特性，重点讲解在Vue3和Vuex4.x中如何利用TypeScript的高阶类型如Omit、Pick、ReturnType和Parameters增强代码的类型安全性。通过实例展示了如何创建新类型，如剔除或选取对象属性，获取函数返回和参数类型。同时，还介绍了Partial类型和类型操作符[Kinkeyof T]的应用，帮助开发者更好地理解和应用TypeScript在实际项目中的高级功能。

TypeScript中的一些高阶类型 Omit Pick ReturnType Parameters

一、vue3初探—vue3新特性学习

二、vue3初探—在vue3和vuex4.x中使用typescript

三、vue3初探----(vue3项目)vuex4.x中使用typescript最终写法

四、在三中用到的一些TypeScript中的一些高阶类型 Omit Pick ReturnType Parameters

五、vue3初探----项目构建

六、vue3初探----vue3的一些变化

更多高阶类型查看官网https://www.tslang.cn/docs/handbook/advanced-types.html

Omit（删除）

Omit<T, K> 类型让我们可以从另一个对象类型中剔除某些属性，并创建一个新的对象类型

interface UserInfo {
    name: string,
    age: number,
    imei: number | string
}

type NewUserInfo = Omit<UserInfo, 'imei'>

在这里插入图片描述

Pick（选择）

ts中可以选择一个原来的接口中一部分的属性定义

interface UserInfo {
    name: string,
    age: number,
    imei: number | string
}
type PickNewUserInfo = Pick<UserInfo, 'imei'>

在这里插入图片描述

ReturnType

ReturnType<T>的作用是用于获取函数 T 的返回类型。

type getuserInfo = (user: string) => UserInfo
// ReturnType<T>的作用是用于获取函数 T 的返回类型。
type ReturnTypeUserInfo = ReturnType<getuserInfo>

在这里插入图片描述

Parameters

Parameters的作用是用于获取函数 T 的参数类型

type getuserInfo = (user: string) => UserInfo
// Parameters<T>的作用是用于获取函数 T 的参数类型。
type ParametersUserInfo = Parameters<getuserInfo>

在这里插入图片描述

Partial

Partial让我们可以从另一个对象类型中的属性全部变为可选，并创建一个新的对象类型

interface UserInfo {
    name: string,
    age: number,
    imei: number | string
}
//Partial<T>让我们可以从另一个对象类型中的属性全部变为可选，并创建一个新的对象类型
type PartialNewUserInfo = Partial<UserInfo>

在这里插入图片描述

[K in keyof T]

[K in keyof T] ，K表示所有 T 中的键被拆分成一个个键，后面可以声明类型

标签
#typescript
ts 中 ReturnType 作用
weixin_64684095的博客
11-13 1224
ReturnType`是一个泛型类型，其语法为`ReturnType<T>`，其中`T`是一个函数类型。例如，如果有一个函数`add`，`ReturnType<typeof add>`就可以获取`add`函数的返回值类型。// AdderFunctionReturnType的类型为(x: number) => number，准确地定义了createAdder函数返回的函数类型。
TS中的条件类型(ReturnType)
热门推荐
前端精髓
04-04 2万+
本偏介绍TS另一种高级类型-条件类型。 官方文档：https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types 1、条件类型是一种由条件表达式所决定的类型 2、条件类型使类型具有了不唯一性,同样增加了语言的灵活性 例如： T extends U ? X : Y 若类型T可被赋值给类型U,那么结果类型就是X类型,否则就是Y类型。 条件类型约束 泛型约束的例子： typ
【Vue3+Ts project】Ts内 Pick 和 Omit
m0_64494670的博客
05-20 1034
Ts类型 Omit 和 Pick 作用分别 排出 和 取出
DeepSeek-V3-bf16模型部署终极指南：硬件要求与容器化方案
gitblog_00889的博客
05-26 499
DeepSeek-V3-bf16模型是一款基于昇腾NPU优化的高性能大语言模型，采用BF16精度格式，专为AI推理任务设计。本文将为您提供完整的DeepSeek-V3-bf16模型部署指南，涵盖硬件要求、容器化方案、配置步骤和常见问题解决方案。 ## 🚀 DeepSeek-V3-bf16模型概述 DeepSeek-V3-bf16模型是一个拥有7168隐藏层维度、128个注意力头、61层网络结
typescript关键词Parameters和ReturnType
m0_52518047的博客
11-13 3469
Parameters：获取函数的参数类型和ReturnType：获取函数的返回值类型
TypeScript 中的 ReturnType：增强可读性和可维护性
jascl的博客
06-17 1548
对函数返回类型的任何更改都会触发类型检查错误，迫使我们相应地更新受影响的代码。通过显式指定返回类型，您可以改进代码文档，实现类型不匹配的早期检测，并在您的代码库中加强一致性。类型是 TypeScript 中的一个内置功能，它允许我们提取函数的返回类型。它提供类型推断并确保我们的代码符合预期的返回类型，从而增强类型安全性和代码可预测性。，我们增强了代码的可读性。我们想提取此函数的返回类型以获取有关返回的用户对象的更多信息。TypeScript 的类型检查是一个强大的功能，可以帮助我们在开发过程中发现错误。
TS进阶！深入探索 TypeScript 工具类型：内置神器与高阶扩展
2301_81098389的博客
03-21 184
类型就是文档，类型就是约束，类型就是力量！TypeScript 的工具类型系统就像是一个强大类型转换工厂，内置工具类型提供基础能力，而基于它们实现的高阶扩展则可以用更优雅、更安全的方式构建复杂系统。✨✨✨有示例代码和注释。
Typescript 中的高级类型
Boboy
07-15 2405
源码定义 type Partial<T> = { [P in keyof T]?: T[P]; }; /** * Make all properties in T required */ type Required<T> = { [P in keyof T]-?: T[P]; }; /** * Make all properties in T readonly */ type Readonly<T> = { readonly [P in
TypeScript 常用的工具类型
小李科技
06-04 1860
TypeScript 常用的工具类型
掌握TypeScript工具类型：Partial、Required、Pick等内置类型的终极指南 [特殊字符]
gitblog_00706的博客
03-30 1123
TypeScript工具类型是TypeScript类型系统的强大功能，它们可以帮助开发者快速创建复杂的类型转换，提高代码的可维护性和类型安全性。这些内置工具类型包括Partial、Required、Pick、Omit、Record等，是每个TypeScript开发者必须掌握的技能。 ## 为什么需要TypeScript工具类型？ 🤔 在开发大型应用时，我们经常需要对现有类型进行转换和操作。比
TypeScript内置类型一览（Record＜string,any＞等等）
球球不吃虾WHR2349博客
08-03 6795
TypeScript中Record是啥？现在让我们来了解一下TypeScript官方的内置类型，让你的开发效率再上一层楼。
ts 内置工具类型（Partial、Pick、Record、Readonly、Exclude、Extract、Omit等）
weixin_42289080的博客
06-20 2265
ts种13种内置工具类型：partial 、readonly、required、Exclude、Extract、Pick、Omit、Record、NonNullable、Parameters、ConstructorParameters、ReturnType、InstanceType
使用更具可读性的方式来设置 TypeScript 类型
cwcnl25131的博客
04-21 1023
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。点击这里领取Web前端开发经典面试题截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**
彻底搞懂typescript工具类型及其原理
qq_32438227的博客
05-31 1013
前言 相信很多人都在学习typescript，这里介绍泛型常见的工具类型函数(Utility Types)及其在typescript中的源码实现。 工具函数 可能有些刚开始学ts的还不清楚什么工具类型指的是什么，工具类型就是TypeScript提供的一些实用类型来实现常见的类型转换，这些类型是全局可用的，所有的类型定义在typescript源码中也都能找到。 Partial Partial<T>，将传入T类型的所有属性设为可选属性。 例如下面的实例代码，定义一个user接口类型，通过Partia
typeScript内置工具类型，通俗易懂，例子解释(Record、Readonly、Required、Partial、Extract、Exclude、Pick、Omit、NonNullable..)
qq_920189602的博客
07-10 1937
TS常用内置的工具类型有，Record、Readonly、Required、Partial、Extract、Exclude、Pick、Omit、NonNullable、Parameters、ReturnType。记住这些，在开发中，将会提高我们的开发效率。
TS的高级类型
xiaozhou4233的博客
01-23 2142
所以当我们要调用这个函数时 形参需要输入的属性名是得符合userinfo中的两个属性名 否则就会报错。这个函数得两个形参 第一个是任意类型的userInfo对象 第二个就是字符串类型的数组。暂时存一下函数的返回值类型，后面的语句直接用 R 即可得到这个类型并返回，否则就返回。暂时存一下函数的参数类型，后面的语句直接用 P 即可得到这个类型并返回，否则就返回。通过对第二个形参输入的值遍历去寻找到userInfo中相同的属性的值打印出来。这个代码的意思是 定义了一个函数 他是有两种可能的类型 T 和 k。
TypeScript 泛型工具源码解析：从Partial到Omit的5个映射类型实现
weixin_33965305的博客
07-11 373
本文深入解析TypeScript泛型工具类型的实现原理，从Partial到Omit的5个核心映射类型源码剖析。通过详细代码示例展示如何利用泛型工具进行类型操作，包括属性可选化、必填约束、精准裁剪等高级技巧，帮助开发者掌握类型系统的高阶应用，提升代码类型安全性和可维护性。
TypeScript进阶：Record与ReturnType等泛型工具实战解析
最新发布
java2000.net
08-10 567
在软件开发中，类型系统是确保代码质量和可维护性的重要基石，其核心原理在于通过静态检查将运行时错误提前至编译时发现。TypeScript作为JavaScript的超集，通过强大的类型系统提供了这一能力，其中泛型工具是实现类型安全与灵活性的关键技术。这些工具允许开发者构建可复用、自描述的类型约束，显著提升大型应用（如React、Vue前端项目或Node.js后端服务）的工程实践质量。具体而言，Record工具用于构建类型安全的字典与配置对象，它能严格约束对象的键值对结构；ReturnType工具则能精准捕获函数
Typescript中的高级类型工具
qq_44704740的博客
11-13 2010
Partial、Required、Readonly、Record、Exclude、Extract、Pick、Omit
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值