typescript 中的keyof、 in

news/2024/5/20 3:36:47 标签: ts

原文链接:https://juejin.cn/post/6844904145732763655#heading-0 

keyof

定义

keyof与Object.keys略有相似,只是 keyof 是取 interface 的键而且 keyof 取到键后会保存为联合类型。

interface iUserInfo {
  name: string;
  age: number;
}
type keys = keyof iUserInfo;

keyof 的简单栗子

我们有这样一个需求,实现一个函数 getValue 取得对象的 value。在未接触 keyof 时,我们一般会这样写:

function getValue(o: object, key: string) {
  return o[key];
}
const obj1 = { name: '张三', age: 18 };
const name = getValue(obj1, 'name');

但是,这样写就丧失了 ts 的优势:

  • 无法确定返回值类型
  • 无法对 key 进行约束,可能会犯拼写的错误

这时我们可以使用 keyof 来增强 getValue 函数的类型功能。

使用 keyof 后我们可以看到,可以完整的提示可以输入的值,当拼写错误时也会有清晰的提示。

function getValue<T extends Object, K extends keyof T>(o: T, key: K): T[K] {
  return o[key];
}

const obj1 = { name: '张三', age: 18 };
const a = getValue(obj1, 'hh');

in

in用于取联合类型的值。主要用于数组和对象的构造。

但切记不要用于 interface,否则会出错

type name = 'firstName' | 'lastName';
type TName = {
  [key in name]: string;
};

const data1 = [
  {
    a1: 'a',
    b1: 'b',
    c1: 'c',
    d1: 'd',
  },
];

const data2 = [
  {
    a2: 'a',
    b2: 'b',
  },
];


 


http://www.niftyadmin.cn/n/951496.html

相关文章

那些事情(读后感)

1,事业永远第一 虽然金钱不是万能的,但没有钱是万万不能的,虽然这句话很俗,但绝对有道理,所以30岁之前,请把你大部分精力放在你的事业上。 PS&#xff1a;现实的社会和物价的飞涨&#xff08;现在青菜都4块以上&#xff0c;深圳&#xff09;&#xff0c;没有稳定的工作和收…

TypeScript中的泛型工具

原文链接&#xff1a;https://juejin.cn/post/6844904147167215624#heading-1 本期涉及的操作符如下&#xff1a; PartialRequiredReadonlyPick<T,K extends keyof T>Record<K extends keyof any, T>Exclude<T,U>Extract<T,U>Omit<T, K extends …

俞敏洪+马云+牛根生+史玉柱经典语录

&#xff11;&#xff0e;女人如果因为觉得一个男生帅就跟嫁给他&#xff0c;这是好色&#xff1b;男生因为女生漂亮而娶她&#xff0c;是审美。&#xff12;.为什么你不要自傲和自卑&#xff1f;你可以说自己是最好的&#xff0c;但不能说自己是全校最好的、全北京最好的、全国…

Cesium orientation 和 设置初始角度

一. Cesium orientation orientation-相机镜头对准的方法.heading-代表镜头左右方向,正值为右,负值为左,360度和0度是一样的 pitch-代表镜头上下方向,正值为上,负值为下. roll-代表镜头左右倾斜.正值,向右倾斜,负值向左倾斜 二. 设置初始化角度 1.先用鼠标手动调整出你想要的角…

假如生活欺骗了你

最近某好友的公司&#xff0c;到了一年一度的调职调薪时段。 作为一个独立的中立的第三方&#xff0c;我听该好友详细讲述了他们公司的一些情况&#xff0c;颇有感触。 调职调薪的结果&#xff0c;比较杯具。 就公司内部的 职称/头衔/Title而言&#xff0c;大多数人都有提升1级…

Cesium 中的pick

在cesium中&#xff0c;想获取不同的对象&#xff0c;需要通过pick方法来进行拾取&#xff0c;但是Cesium中有多种pick的方法&#xff0c;例如 scene中有pick、pickPosition、及drillPick等&#xff0c;camera中有getPickRay、pickEllipsoid等&#xff0c;globel中有pick&#…

npm ERR

npm ERR! node-sass4.14.1 postinstall: node scripts/build.js 网速不好或者版本过高&#xff0c;用淘宝镜像安装 npm config set sass_binary_sitehttps://npm.taobao.org/mirrors/node-sass

常用坐标系统

一对名词&#xff1a;WKID与EPSG WKID即Well Known ID&#xff0c;众所周知的ID号的意思。EPSG是管理这些ID号的一个组织&#xff0c;网站是 EPSG.io: Coordinate Systems Worldwide 如&#xff1a;查看4490 如&#xff1a;查看4490 https://epsg.io/China Geodetic Coor…