understand-type-widening

理解类型拓宽

概述

TypeScript 从值推断类型时，常常会拓宽类型。

用 "x" 初始化的变量，可能是要存放任意字符串，也可能只存放字面量 "x"。TypeScript 会通过启发式规则进行推断；了解这些规则有助于你编写行为可预测的代码。

何时使用此技能

• 不明白为什么类型是 string，而不是 "specific-value"
• const 和 let 对同一个值推断出的类型不同
• 数组字面量的元素类型与预期不符
• 对象属性的类型比预期更宽
• 出现字面量不可赋值的类型错误

铁律

ALWAYS understand how your declaration style affects inferred types.

请记住：

• let 变量会将字面量拓宽为其基础类型
• const 变量会保留字面量类型（适用于原始类型）
• 即使使用 const，对象和数组的内容也会拓宽
• 使用 as const 可获得完整的字面量推断

检测：意外的拓宽

如果 TypeScript 推断出的类型比预期更宽，你看到的就是类型拓宽。

// Primitive widening with let
let x = 'x';
//  ^? let x: string  (not "x")

// No widening with const (for primitives)
const y = 'y';
//    ^? const y: "y"

// But object properties still widen
const obj = { x: 1, y: 2 };
//    ^? const obj: { x: number; y: number }  (not { x: 1, y: 2 })

为什么会有类型拓宽

TypeScript 必须在两个目标之间取得平衡：

1. 精确性 - 用窄类型捕获真正的错误
2. 灵活性 - 允许合理的修改

// Without widening, this would fail:
let x = 'x';  // If inferred as "x", then...
x = 'y';      // Error! "y" is not assignable to "x"

// With widening:
let x = 'x';  // Inferred as string
x = 'y';      // OK

类型拓宽规则

规则 1：let 会拓宽，const 会保留（原始类型）

// let → widened
let a = 'hello';
//  ^? let a: string

let b = 42;
//  ^? let b: number

let c = true;
//  ^? let c: boolean

// const → literal
const d = 'hello';
//    ^? const d: "hello"

const e = 42;
//    ^? const e: 42

const f = true;
//    ^? const f: true

规则 2：对象属性总是会拓宽

const point = { x: 3, y: 4 };
//    ^? const point: { x: number; y: number }

// Not { x: 3, y: 4 } - because you might do:
point.x = 10;  // This must be valid

规则 3：数组元素会拓宽

const arr = [1, 2, 3];
//    ^? const arr: number[]

// Not [1, 2, 3] or readonly [1, 2, 3]

规则 4：混合数组会获得联合类型

const mixed = [1, 'x'];
//    ^? const mixed: (string | number)[]

// TypeScript picks the "best common type"

控制类型拓宽

使用 as const 获得完整的字面量推断

// Regular object - properties widen
const obj1 = { x: 1, y: 2 };
//    ^? const obj1: { x: number; y: number }

// With as const - properties are literal and readonly
const obj2 = { x: 1, y: 2 } as const;
//    ^? const obj2: { readonly x: 1; readonly y: 2 }

// Arrays too
const arr = [1, 2, 3] as const;
//    ^? const arr: readonly [1, 2, 3]

使用类型注解明确指定类型

// Annotate to get the type you want
const x: 'x' | 'y' = 'x';
//    ^? const x: "x" | "y"

// Can be reassigned to 'y', but nothing else

使用 Satisfies 进行受检查的推断

type Point = { x: number; y: number };

// Type annotation: loses literal types
const p1: Point = { x: 1, y: 2 };
//    ^? const p1: Point

// satisfies: keeps literals while checking structure
const p2 = { x: 1, y: 2 } satisfies Point;
//    ^? const p2: { x: number; y: number }

p2.x;  // number (not 1, but still good for inference)

常见的类型拓宽问题

问题：预期得到字面量，实际得到 string

type HTTPMethod = 'GET' | 'POST' | 'PUT';

function makeRequest(method: HTTPMethod) { /* ... */ }

let method = 'GET';
makeRequest(method);
//          ~~~~~~ Argument of type 'string' is not assignable

解决方案：

// Solution 1: Use const
const method = 'GET';
makeRequest(method);  // OK

// Solution 2: Type annotation
let method: HTTPMethod = 'GET';
makeRequest(method);  // OK

// Solution 3: as const
let method = 'GET' as const;
makeRequest(method);  // OK

问题：对象属性类型过宽

type Config = {
  mode: 'development' | 'production';
  debug: boolean;
};

function configure(config: Config) { /* ... */ }

const config = { mode: 'development', debug: true };
configure(config);
//        ~~~~~~ Type 'string' is not assignable to type '"development" | "production"'

解决方案：

// Solution 1: Type annotation
const config: Config = { mode: 'development', debug: true };

// Solution 2: as const on the whole object
const config = { mode: 'development', debug: true } as const;

// Solution 3: as const on just the property
const config = { mode: 'development' as const, debug: true };

问题：元组变成数组

function setPoint(point: [number, number]) { /* ... */ }

const coords = [10, 20];
setPoint(coords);
//       ~~~~~~ Type 'number[]' is not assignable to type '[number, number]'

解决方案：

// Solution 1: Type annotation
const coords: [number, number] = [10, 20];

// Solution 2: as const (makes it readonly)
const coords = [10, 20] as const;
// Note: readonly [10, 20] may not be assignable to [number, number]
// depending on the function's type

抵御压力的准则

1. “直接用 any 就行”

施压说法：“类型不对，直接把它转换成 any。”

**回应：**类型没错，只是比你想要的更宽。

**做法：**使用 const、类型注解或 as const。

2. “TypeScript 真蠢”

施压说法：“显然是 'GET'，为什么推断成 string？”

**回应：**TypeScript 会假定 let 变量可能发生变化。

**做法：**对不会变化的值使用 const。

危险信号 - 停下来重新考虑

• 通过类型转换来修复字面量类型错误
• 惊讶于对象属性的类型是 string，而不是 "specific"
• 元组类型变成数组
• 联合字面量意外拓宽

常见借口（都不成立）

借口	事实
“const 应该会让它变成字面量”	只适用于原始类型，不适用于对象内容
“这个值显然是 X”	let 意味着它可能发生变化
“as any 能修复问题”	应使用恰当的拓宽控制方式

快速参考

声明	值	推断类型
let x = "hello"	字符串字面量	string
const x = "hello"	字符串字面量	"hello"
const x = { a: 1 }	对象	{ a: number }
const x = { a: 1 } as const	对象	{ readonly a: 1 }
const x = [1, 2]	数组	number[]
const x = [1, 2] as const	数组	readonly [1, 2]

总结

TypeScript 会拓宽类型，以允许合理的修改。

原始类型使用 const，明确指定类型时使用类型注解，需要完整的字面量推断时使用 as const。理解类型拓宽可以避免意外的类型错误，并帮助你编写更精确的类型。

参考

基于 Dan Vanderkam 所著《Effective TypeScript》第 20 条：了解变量如何获得类型。