首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

TypeScript中带演绎和`keyof`的细粒度类型

是指通过使用keyof关键字和泛型推断来实现对对象属性的类型操作和推导。这种类型操作可以在编译时进行静态类型检查,提高代码的可靠性和可维护性。

具体来说,keyof关键字用于获取一个类型的所有属性名,返回一个由属性名组成的联合类型。通过与其他类型操作符(如typeofextends等)结合使用,可以实现对属性的类型操作。

举个例子,假设有一个名为Person的接口类型:

代码语言:txt
复制
interface Person {
  name: string;
  age: number;
  address: string;
}

我们可以使用keyof来获取Person接口的所有属性名:

代码语言:txt
复制
type PersonKeys = keyof Person;
// PersonKeys的类型为 "name" | "age" | "address"

通过keyof和泛型推断,我们可以实现一些高级的类型操作,例如获取属性的类型、将属性变为可选或只读等。

获取属性的类型:

代码语言:txt
复制
type PersonNameType = Person['name'];
// PersonNameType的类型为 string

将属性变为可选:

代码语言:txt
复制
type PartialPerson = {
  [K in keyof Person]?: Person[K];
}

将属性变为只读:

代码语言:txt
复制
type ReadonlyPerson = {
  readonly [K in keyof Person]: Person[K];
}

细粒度类型操作在很多场景下都非常有用,例如在前端开发中,可以用于对表单字段进行类型推断和验证;在后端开发中,可以用于对数据库模型进行类型操作和验证。

对于腾讯云相关产品和产品介绍链接地址,可以参考腾讯云官方文档进行了解和查询,具体链接地址可能会根据实际情况有所变化。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

TypeScript 顶级类型:any unknown

翻译:疯狂技术宅 作者:Dr. Axel Rauschmayer 正文共:2525 字 预计阅读时间:10 分钟 ? 在 TypeScript,any unknown 是包含所有值类型。...在本文中,我们将会研究它们是怎样工作。 ---- TypeScript 两种顶级类型 any unknown 在 TypeScript 是所谓“顶部类型”。...通常,类型是包含了其相关类型系统中所有可能[值]类型。 也就是说,当把类型看作是值集合时,any unknown 是包含所有值集合。...value; // 通常,`value` 类型签名必须包含 .propName value.propName; // 通常只允许带有索引签名数组类型 value...): any; 在 unknown 类型出现之前,JSON.parse() 就已经被添加到了 TypeScript

2.4K20

TypeScript类型断言

本文是关于 TypeScript type assertions ,它与其他语言中类型强制转换有相似之处,并通过 as 运算符执行。...在 B 行,我们看到此类型不允许访问任何属性。 在 C 行,我们用类型断言(运算符 as)告诉 TypeScript data 是一个Array。现在就可以访问属性 .length 了。...类型断言是不得已方法,应尽可能避免。他们(暂时)删除了静态类型系统为我们提供安全网。 注意,在 A 行,我们还覆盖了 TypeScript 静态类型,不过是通过类型注释完成。...类型断言替代语法 TypeScript 对于类型断言有另一种“尖括号”语法: 1>data 该语法已经过时,并且与 React JSX 代码(在 .tsx 文件)不兼容。...示例:声明一个接口 为了访问任意对象 obj 属性 .name,我们暂时将 obj 静态类型更改为 Named(A行B行)。

3.7K40

TypeScript 演化史 -- 6】对象扩展运算符 rest 运算符及 keyof 查找类型

TypeScript 2.1 增加了对 对象扩展运算 rest 属性提案支持,该提案在 ES2018 中标准化。可以以类型安全方式使用 rest spread 属性。...对象扩展仅拷贝属性值,如果一个值是对另一个对象引用,则可能导致意外行为。 keyof 查找类型 JS 是一种高度动态语言。在静态类型系统捕获某些操作语义有时会很棘手。...一个对象不同属性可以有完全不同类型,咱们甚至不知道 obj 是什么样子。 那么如何在 TypeScript 编写这个函数呢?...咱们需要提供更多类型信息来实现这一点。 keyof 操作符号 在 JS 属性名称作为参数 API 是相当普遍,但是到目前为止还没有表达在那些 API 中出现类型关系。...TypeScript 2.1 新增加 keyof 操作符。输入索引类型查询或 keyof,索引类型查询keyof T产生类型是 T 属性名称。

2.5K30

实现TypeScript互斥类型

此时,你会怎么用TypeScript来定义这个类型?本文将带大家实现一个互斥类型来解决这个问题,欢迎各位感兴趣开发者阅读本文。 前置知识 在实现之前,我们需要先来了解几个基础知识。...: string }; never类型TypeScript它有一个特殊类型never,它是所有类型类型,无法再进行细分,也就意味着除了其本身没有类型可以再分配给它。...{}类型 amazing = [];// 报错:amazing是never类型不能分配给[]类型 剔除联合类型属性 有一组联合类型"a" | "b" | "c" | "d",我们想剔除属性bc,在...实现代码 接下来,我们来看下代码实现,如下所示: // 定义排除类型:将U从T剔除, keyof 会取出T与U所有键, 限定P取值范围为T所有键, 并将其类型设为never type Without...> & T); 注意:为了类型可复用性,我们使用了泛型,对此不熟悉开发者请移步:TypeScript中文网——泛型 测试用例 我们将文章开头所说问题代入上述实现代码,看一下它能否将其解决,如下所示

3K40

TypeScript 数组类型定义

TypeScript 声明初始化数组也很简单,和声明数字类型字符串类型变量也差不多,只不过在指定数组类型时要在类型后面加上一个括号 [] 语法格式 const array_name: dataype...array: Array = ['孟浩然', 99]; 除了使用括号 [] 方法来声明数组,你还可以使用 数组泛型 来定义数组 语法格式 const array_name..., val2, val3],[v1, v2, v3]]; // 等同于 const array_name: datatype[][] = [[val1, val2, val3]]; 多维数组类型 TypeScript...等同于 const test: string[][] = [['狮子头', '清蒸鲈鱼', '鲜椒牛蛙'], ['北京烤鸭'], ['地锅鸡', '饿了']]; 声明一个二维数组 注意: 以下示例类型在数组...个 建议: 在定义数组类型时候使用数组泛型定义,这样显得更直观一点 Tuple 元组类型(元组类型允许表示一个已知元素数量类型数组)

5.3K40

TypeScript 基础类型:原始类型、对象类型、数组类型、元组类型、枚举类型联合类型

TypeScript 是一种由微软开发静态类型编程语言,它是 JavaScript 超集,并且可以在编译时进行类型检查。...TypeScript 强大类型系统使得开发者能够更轻松地编写可维护、可扩展代码。本文将详细介绍 TypeScript 基础类型,包括原始类型、对象类型、数组类型、元组类型、枚举类型联合类型。...原始类型TypeScript ,有以下几种原始类型:数字类型数字类型用于表示整数或浮点数。可以使用 number 关键字来声明数字变量。...类型推断类型断言TypeScript 具有强大类型推断能力,它可以根据上下文自动推断变量类型。例如,如果我们在定义变量时直接赋值,TypeScript 可以推断出变量类型。...总结本文详细介绍了 TypeScript 基础类型,包括原始类型、对象类型、数组类型、元组类型、枚举类型联合类型等方面。

31630

TypeScript类型断言-类型声明转换

TS并不能判断在使用联合类型时具体是那种类型?当我们不知道是什么类型情况下要使用某个类型特有的属性或者方法,那么就可以用断言来实现,它实际上是对编辑器做了提前告知行为,但是并不能保证运行中报错。...主要有两种方式来实现,具体如下:断言形式(1)尖括号形式语法:+value,尖括号填写具体类型。...;let length:number = (anyValue).length;//0使用断言虽然能避免编译报错,但是却避免不了运行报错type ClaaM = number |...但是编译成JS后,运行过程中就报错了,如下:所以除非确切知道变量数据类型,否则不要使用类型断言,这是因为类型断言会让 TypeScript 编译器将变量当做指定类型,而不管它实际类型,在程序运行时可能有类型错误...表示,它用来断定某变量一定不是 null undefined。

29010

Typescript复杂类型声明

Typescript为javascript加入了众多类型声明语法,灵活使用可使代码变得健壮,不严谨类型声明会带来后期维护麻烦。...本篇假设读者已经学会ts基础类型声明语法,包括type、interface、extends泛型,在此基础上,聊一聊一些更加复杂类型声明场景以及解决办法。...最好办法是自动筛选出Person类符合某一规则属性,生成一个新类型。怎么做到呢?...这类用到了keyof关键字类型我们称之为”映射类型“。延伸地看一下,周围还有Pick、Record等等类型声明例子,读者可以统一看一遍,有利于之后开发。...never : T; 使用时,Exclude需要填入两个泛型类,当T继承自U时候,结果等于never类型,当TU不相关时,结果等于T类型

7.1K50

TypeScript 演化史 — 第六章】对象扩展运算符 rest 运算符及 keyof 查找类型

它接受两个参数:一个 URL 一个 options 对象,options 包含请求任何自定义设置。 在应用程序,可以封装对fetch()调用,并提供默认选项覆盖给定请求特定设置。...对象扩展仅拷贝属性值,如果一个值是对另一个对象引用,则可能导致意外行为。 keyof 查找类型 JS 是一种高度动态语言。在静态类型系统捕获某些操作语义有时会很棘手。...一个对象不同属性可以有完全不同类型,咱们甚至不知道 obj 是什么样子。 那么如何在 TypeScript 编写这个函数呢?...咱们需要提供更多类型信息来实现这一点。 keyof 操作符号 在 JS 属性名称作为参数 API 是相当普遍,但是到目前为止还没有表达在那些 API 中出现类型关系。...TypeScript 2.1 新增加 keyof 操作符。输入索引类型查询或 keyof,索引类型查询keyof T产生类型是 T属性名称。

3.1K50

TypeScript】TS类型断言-类型声明转换(七)

TS并不能判断在使用联合类型时具体是那种类型?当我们不知道是什么类型情况下要使用某个类型特有的属性或者方法,那么就可以用断言来实现,它实际上是对编辑器做了提前告知行为,但是并不能保证运行中报错。...主要有两种方式来实现,具体如下:断言形式(1)尖括号形式语法:+value,尖括号填写具体类型。...;let length:number = (anyValue).length;//0使用断言虽然能避免编译报错,但是却避免不了运行报错type ClaaM = number |...但是编译成JS后,运行过程中就报错了,所以除非确切知道变量数据类型,否则不要使用类型断言,这是因为类型断言会让 TypeScript 编译器将变量当做指定类型,而不管它实际类型,在程序运行时可能有类型错误...19;const obj:Object = {};(obj).name = 'zhangsan';(obj).age = 19;(4)调用函数时将参数返回值断言成精确值function

27810

深入理解 TypeScript Keyof 运算符,让你代码更安全、更灵活!

keyof 运算符是在 TypeScript 2.1 版本引入。这个关键字已经成为 TypeScript 中高级类型基石,并在代码中经常使用。...三、 KeyOf 与映射类型结合使用 在 TypeScript ,我们可以使用 keyof 运算符与映射类型结合,将现有类型转换为新类型。...这种方式不仅提高了代码可读性维护性,还减少了潜在错误。 五、索引签名与 KeyOf 运算符 在 TypeScript keyof 运算符可以与索引签名一起使用,以移除索引类型。...结束 TypeScript keyof 运算符虽然小巧,但却是 TypeScript 机制不可或缺一环。...希望这篇文章能为你提供有关 keyof 关键字及其在 TypeScript 代码重要性相关信息。 如果你觉得本文对你有所帮助,请分享给你朋友,并在评论区留下你看法问题。

6010

TypeScript: 类型判断-合理使用 is type

TypeScript: Type predicates TypeScript 类型判断--合理使用 is type 这篇文章主要写在使用函数时候确保你参数类型正确规范建议。...写在最前面 最开始写 typescript 最困难就是各种类型判断,最近浏览 jsFeed 时候看到一篇不错文章,然后自己翻译了一下分享给大家。...文章翻译都是义译,没有逐字逐段,很多不正确地方望指出。...typescript 类型断言帮助你更好规范你代码类型类型断言一般在函数中使用(work on functions),来确保你函数类型返回正确。...虽然is 让 ts 分辨了 unknown 类型 更多其他类型,但是也让我们类型缩小了范围。为什么啦? 来看一个栗子:让我们来做一个丢色子游戏,当你丢到 6 时候你就赢了。

8K20

什么是 TypeScript 4.1 模板字面类型

在利用该新闻作为机会来深入了解类型系统实际工作方式之后,我想与您分享新版本令人兴奋功能变化,并提供关键字说明许多神奇示例。...Language,领域特定语言) 模板字面量类型 JavaScript 模板字符串语法完全一致,只不过是用在类型定义里面: type Entity = 'Invoice'; type Notification...— TypeScript发版说明 以下是两个用于生产开发 TypeScript 配置文档两个示例: // ....在 TypeScript 4.1 ,由于 DOM 类型是自动生成,lib.d.ts 可能具有一组变动 API,例如,从 ES2016 删除 Reflect.enumerate。...: string; } 不匹配参数将不再关联 过去,彼此不对应参数在 TypeScript 通过将它们与 any 类型关联而彼此关联。

3.9K10

类型体操:探究 TypeScript 内置高级类型

于是,TypeScript 在泛型基础上,又提供了 类型编程,通过一些语法,我们可以拿到 T 下更细粒度类型,或通过判断拿到其他类型。 这个也被大家戏称为 类型体操。...extends keyof T> = { [P in K]: T[P]; }; 首先我们看等号左侧类型参数有两个,T K。...T 通常代表一个要被分析类型(Type),K 通常代表对象属性名(Key)。就像数学函数 x y 一样,想不到好命名就用这俩。...Ok,我们整体看看 代表什么意思。它表示传入 T K 两个类型参数,然后 K 必须是 T 属性组成联合类型一部分。...这个 extends + infer 其实就是类型体操精髓,可以在传入类型 T 继续拆分,拿到更细粒度类型

78010

typescriptclassinterface

前言 刚刚vue3.0一发布,各大网址社区以及公众号已经被Vue3.0One Piece版本所霸屏,出现不同标题有着同样内容现象,借此热度我们不如好好回顾一下ts基础知识,备战vue3.0...typescript这个东西说实在,真的是容易忘记,一段时间不用就感觉特别陌生,但是回过头来看看,又有一种熟悉感觉,有句话这么说ts越用越香,它确实能够规范我们书写格式,语法校验类型校验等。...之前写过react+ts一个demo,但是时间久了就忘记了,现在也是趁着热度再回顾一下ts内容,以及一些高阶语法,现在我们回顾一下ts中常见接口,如果喜欢可以点赞,评论,关注公众号让更多的人看到...class 首页我们要清楚一点是typescriptjavascriptES6语法类区别,千万不要混淆。ts相比于js添加了声明属性类型参数类型以及返回结果类型。...speak():void; //抽象类方法不包含具体实现 必须在子类实现 } //接口里方法都是抽象 interface Flying{ fly():void } interface

1.8K10
领券