当前位置：首页 > news >正文

TypeScript交叉类型、重复属性、类型断言和as const详解

news 2025/9/2 11:41:37

1. 交叉类型（Intersection Types）

交叉类型使用 &运算符合并多个类型，新类型包含所有类型的属性：

interface Colorful {color: string;
}
interface Circle {radius: number;
}
type ColorfulCircle = Colorful & Circle; // 合并类型const cc: ColorfulCircle = {color: "red",   // 必须包含Colorful的属性radius: 42      // 必须包含Circle的属性
};

特性:

相当于逻辑"与"操作
适用于对象、函数等复杂类型组合
与联合类型|互补（联合类型是逻辑"或"）

2. 重复属性处理

当交叉类型中出现同名属性时：

type A = { x: number };
type B = { x: string };
type C = A & B;// 此时C中的x成为never类型：
// x: number & string → never

处理规则：

基本类型冲突 → 变成never类型（如string & number）
函数类型 → 函数重载（按声明顺序合并）
对象类型 → 递归合并嵌套属性
字面量类型 → 取交集（如'a' & ('a'|'b') → 'a'）

3. 类型断言（Type Assertion）

手动指定值的类型，覆盖TS的类型推断：

// 尖括号语法
let value: any = "hello";
let len1: number = (<string>value).length;// as语法（推荐，避免JSX歧义）
let len2: number = (value as string).length;// 双重断言（解决类型不兼容）
const element = document.getElementById("root") as unknown as HTMLElement;

使用场景：

DOM操作（如document.getElementById）
处理any类型的值
类型转换（需确保运行时兼容）

4. `as const`断言

将值锁定为不可变的字面量类型：

// 普通数组 → 类型为number[]
let arr = [1, 2, 3]; // as const 数组 → 类型为readonly [1, 2, 3]
let constArr = [1, 2, 3] as const; // 对象属性变为只读字面量
const obj = {name: "Alice",age: 30
} as const;obj.age = 31; // 错误！Cannot assign to 'age'

核心特性：

所有属性变为readonly
数字/字符串等变为字面量类型
数组变为元组（tuple）类型
冻结对象结构（无法增删改属性）

总结对比

特性	交叉类型 (`&`)	类型断言 (`as`)	`as const`
作用	类型合并	覆盖类型推断	锁定字面量类型
可变性	保持原始可变性	保持原始可变性	所有属性变`readonly`
典型场景	组合多个接口	DOM操作/类型转换	配置对象/常量定义
类型变化	创建新类型	不改变运行时值	缩小类型范围