keyof和in和typeof

keyof

keyof后面跟接口,表示遍历接口的这些的属性名(实际上一个键值对就是冒号前面的这些)。keyof表示索引查询,可以用于获取接口类型的所有键,其返回类型是联合类型。

js 复制代码
interface People {
  name:string;
  age:number;
}
// type类型别名:pType的类型表示"name"|"age"
// 键名以字符串形式存储,所以遍历出的接口属性名都是字符串,就是常量
type pType = keyof People;
// 编译报错,p1的值只能是字符串name和age
let p1:pType = 2
let p2:pType = "xxx"

当需要type pType = keyof People;的类型也可以是其他字符串的做法如下:

js 复制代码
interface People {
  name:string;
  age:number;
  // 表示属性名是数字number类型,遍历后是变量number
  [idx:number]:number|string;
  // 表示属性名是字符串string类型,遍历后是变量string
  [idx:string]:number|string;
}
// 类型别名:pType的类型表示"name"|"age"|number|string
type pType = keyof People;
let p1:pType = 6;
let p2:pType = "xxx"

in

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

js 复制代码
type name = 'firstName' | 'lastName';
type TName = {
  [key in name]: string;
};

typeof

TS中,typeof操作符可以用来获取一个变量或对象的类型。

js 复制代码
// 提取变量
let str = "267";
type StrType = typeof str; // string
// 编译报错
let a:StrType = 267;
// 提取对象 (包含对象的所有属性且属性值类型要一样)
let obj = {
  name: 530,
  age: "418",
  height: 816
}
type withJ = typeof obj;
// 编译报错
let obj1:withJ ={
  
}
// 编译报错
let obj2:withJ = {
  width:267
}
相关推荐
大怪v9 小时前
AI抢饭?前端佬:我要验牌!
前端·人工智能·程序员
新酱爱学习9 小时前
字节外包一年,我的技术成长之路
前端·程序员·年终总结
小兵张健9 小时前
开源 playwright-pool 会话池来了
前端·javascript·github
IT_陈寒12 小时前
Python开发者必知的5大性能陷阱:90%的人都踩过的坑!
前端·人工智能·后端
codingWhat13 小时前
介绍一个手势识别库——AlloyFinger
前端·javascript·vue.js
代码老中医13 小时前
2026年CSS彻底疯了:这6个新特性让我删掉了三分之一JS代码
前端
不会敲代码113 小时前
Zustand:轻量级状态管理,从入门到实践
前端·typescript
踩着两条虫13 小时前
VTJ.PRO 双向代码转换原理揭秘
前端·vue.js·人工智能
扉川川13 小时前
OpenClaw 架构解析:一个生产级 AI Agent 是如何设计的
前端·人工智能
远山枫谷13 小时前
一文理清页面/组件通信与 Store 全局状态管理
前端·微信小程序