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'
相关推荐
2501_944521594 小时前
Ramda 跨端三方库仓颉适配全流程
开发语言·javascript·flutter·php
Ken_11155 小时前
小体积附件下载正常,大附件下载异常
javascript
变与不变8066 小时前
jQuery怎么使用
前端·javascript
神膘护体小月半6 小时前
flex 布局的 order 属性
前端·css
paopaokaka_luck6 小时前
流浪动物救助与收养系统(DeepSeek AI对话、 ECharts多维分析、救助流程衔接、领养与回访衔接、 捐赠确认与公示、志愿者协作)
java·前端·javascript·人工智能·mysql·echarts·推荐算法
仰望.6 小时前
vue 表格组件 vxe-table 树表格懒加载支持拖拽排序的详细用法
前端·javascript·vue.js·vxe-table
前端 贾公子6 小时前
vite-plugin-uni-manifest 升级指南
前端
小码哥_常6 小时前
iPhone 用户传了张 HEIC,我的前端崩了
前端
小码哥_常7 小时前
你发的原图可能暴露你家地址——聊聊图片 EXIF 隐私
前端
java1234_小锋7 小时前
【技术专题】CSS3 网页技术 - CSS3 优先级
前端·css·css3