首页 > 其他分享 >TypeScript中的keyof和in

TypeScript中的keyof和in

时间:2023-07-21 16:13:16浏览次数:38  
标签:TypeScript string number keyof 类型 doggy type

keyof使用

keyof操作符接受一个对象类型作为参数,返回该对象属性名组成的字面量联合

type Dog = { name: string; age: number;  };
type D = keyof Dog; //type D = "name" | "age"

可以看到keyof any 返回的是一个联合类型:string | number | symbol,结合前文说到keyof是为了取得对象的key值组成的联合类型,那么key值有可能是什么类型呢?自然就是string | number | symbol。
该关键字一般会和extends关键字结合使用,对对象属性的类型做限定,比如K extends keyof any就代表K的类型一定是keyof any所返回的联合类型的子类,如果输入不符合限定,那么自然也就不能作为对象的属性,类型系统就会报错。
因此,keyof any 表示了对象key值可能的取值类型。这一点在本文之后的一些类型实现中也会用到。

注意点

遇到索引签名时,keyof会直接返回其类型

type Dog = {  [y:number]: number  };
type dog = keyof Dog;  //type dog = number
type Doggy = {  [y:string]: boolean };
type doggy = keyof Doggy; //type doggy = string | number

type Doggy = {  [y:string]: unknown, [x:number]: boolean};
type doggy = keyof Doggy; //type doggy = string | number

可以看到索引类型为string时,keyof 返回的类型是string | number, 这是因为JavaScript的对象属性会默认转换为字符串。

in的使用

in的右侧一般会跟一个联合类型,使用in操作符可以对该联合类型进行迭代。
其作用类似JS中的for...in或者for...of

type Animals = 'pig' | 'cat' | 'dog'
type animals = {
    [key in Animals]: string
}
// type animals = {
//     pig: string; //第一次迭代
//     cat: string; //第二次迭代
//     dog: string; //第三次迭代
// }

标签:TypeScript,string,number,keyof,类型,doggy,type
From: https://www.cnblogs.com/zx529/p/17571699.html

相关文章

  • TypeScript 学习笔记
    什么是TypeScript?TypeScript是JavaScript的一个超集,支持ECMAScript6标准,它可以编译成纯javaScript,可以运行在任何浏览器上。安装TypeScriptnpminstall-gtypescript安装完成后我们可以使用tsc命令来执行TypeScript的相关代码tsc-vVersion5.1.6新建一个a......
  • 58.请使用vue3+vite+typescript+element-plus+setup语法糖,使用xlsx和file-saver实现保
    1<template>2<div>3<el-table4:data="mergedTableData"5border6stripe7>8<!--表头-->9<el-table-column10prop="date"11label="......
  • [Typescript] Queue
    UsingLinkedlisttoimplementaQueue.Injavascript,ifyouwanttopushaiteminfrontofanArray,itneedtoshifttherestofitems,notgoodforperformance.UsingLinkedListisO(1)oeprationforenqueanddeque, whichisbetter.Usecase:Let&#......
  • 54.使用VUE3+VITE+TYPESCRIPT+element-plus的setup语法糖,实现导出excel功能
    要实现导出Excel功能,你可以使用以下步骤:1.安装相关依赖:```bashnpminstallxlsxfile-saver```2.在你的组件中引入相关依赖:```javascriptimport{ref}from'vue';import{saveAs}from'file-saver';import{useTable}from'element-plus';importXLSX......
  • [Typescript] 150 Hard - OptionalUndefined
    Implementtheutiltype OptionalUndefined<T,Props> thatturnsallthepropertiesof T thatcanbe undefined,intooptionalproperties.Inaddition,asecond-optional-generic Props canbepassedtorestrictthepropertiesthatcanbealtered.Opti......
  • [Typescript] 149 Medium - Triangular number
    GivenanumberN,findtheNthtriangularnumber,i.e. 1+2+3+...+N/*_____________YourCodeHere_____________*/exporttypeNumberToArray<Textendsnumber,Rextends1[]=[]>=R["length"]extendsT?R:NumberToArray&......
  • [Typescript Challenge] 148 Medium - CartesianProduct
    Given2sets(unions),returnitsCartesianproductinasetoftuples,e.g.CartesianProduct<1|2,'a'|'b'>//[1,'a']|[2,'a']|[1,'b']|[2,'b'] Solution:/*____________......
  • 记录--盘点 TypeScript 那些奇怪的符号
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。一、!非空断言操作符在上下文中当类型检查器无法断定类型时,一......
  • Typescript学习笔记总结
    Typescript是一种由微软开发的开源编程语言,它是JavaScript的超集,意味着它包含了JavaScript的所有特性,同时还提供了一些额外的功能和类型检查。Typescript的目标是提高JavaScript代码的可读性、可维护性和可扩展性,同时还能够在编译时检测出一些常见的错误。在本文中,我们将详细介绍Ty......
  • typescript 中严格字面量类型检查的理解
    个人关于TS中Strictobjectliteralassignmentchecking的理解StrictobjectliteralassignmentcheckingStrictobjectliteralassignmentcheckingbyahejlsberg·PullRequest#3823·microsoft/TypeScript案例interfaceIStudent{name:stringid:strin......