TypeScript 实际应用

一、同时定义常量对象和对应的值类型

javascript 复制代码
const MODE = { M1: 'm1', M2: 'm2' } as const;
type Mode = (typeof MODE)[keyof typeof MODE];
1、定义常量对量

as const(const 断言)做了两件事:

(1)把对象变成 readonly(不可修改)

(2)把属性值从宽泛的 string 收窄为字面量类型

javascript 复制代码
// 没有 as const → { M1: string; M2: string }
// 有 as const   → { readonly M1: 'm1'; readonly M2: 'm2' }

这样 MODE.M1 的类型就是 'm1' 而不是 string。

2、提取值的联合类型
步骤 表达式 结果
1 typeof MODE { readonly M1: 'm1'; readonly M2: 'm2' }
2 keyof typeof MODE `'M1'
3 (typeof MODE)[keyof typeof MODE] `'m1'

所以最终 Mode 等价于:

javascript 复制代码
type Mode = 'm1' | 'm2';

其中 keyof 是一个类型运算符,作用是:取出一个类型中所有键(属性名),组成一个联合类型。

javascript 复制代码
type Person = {
  name: string;
  age: number;
  email: string;
};

type Keys = keyof Person;
// 等价于:'name' | 'age' | 'email'
相关推荐
可乐鸡翅yeah_3 小时前
业务中 M3U8 水印相关坑,硬水印和动态水印区别
前端·网络·数据库·ffmpeg·m3u8在线
lerhxx3 小时前
AI 应用如何高效优雅地恢复中断?—— "连接解耦 + 状态持久化"
前端·javascript
计算机魔术师3 小时前
METR 演示 AI 智能体如何篡改 Inspect 评估记录以掩盖不当行为
前端
前端snow4 小时前
ai agent --- 异步处理之 Rabbit MQ
前端
念何架构之路4 小时前
zap扩展生态与总结
java·前端·数据库
独孤九剑打醒他4 小时前
【原创开源】【概念设计】源 - 栅 - 漏 - 栅 - 源 横向双栅 MOS,低压交流多值逻辑芯片探索
前端·其他·架构·开源·硬件工程
mantou1325 小时前
我给 AI Agent 做了个「油猴」:让 Claude Code / Codex 直接用你已登录的浏览器
前端·javascript·后端
默_笙5 小时前
🍕 一个主编、三个工种、两本手册:搭一支 AI 调研队
前端·javascript
纸片人5 小时前
Blender 建模 + Three.js 展示:和 AI 一起做一个光储充超充站数字孪生大屏
前端
智能直播5 小时前
网络RTMP拉流不卡顿、声音不同步?一文讲透缓冲区、时间戳与MEDAI V2实战调优
前端