TypeScript名义类型（Nominal Typing）实战：解决结构类型混淆与枚举限制

Nominal Typing（名义类型）

概念解析

其核心思想是为特定类型附加一个唯一的“名义”标识，从而避免在结构类型系统中，因类型结构高度相似而导致的误用情况。

interface Vector2D { x: number, y: number };
interface Vector3D { x: number, y: number, z: number };
function calc(vector: Vector2D): void;

const vector: Vector3D = { x: 1, y: 1, z: 1}

calc(vector) // 并没有抛出错误

看上去calc()函数应该只能传入Vector2D类型，但其实也可以传入Vector3D，因为本质上Vector3D是Vector2D的子集。对于calc()函数来说，传入的vector变量的类型中只要同时具有x、y属性即可通过类型校验。

这种现象在TypeScript中被称为结构类型（Structural Typing）。虽然这通常能简化编码过程，但在某些严格场景下，可能无法满足预期的类型限制。

若需严格限制函数仅接受Vector2D类型而拒绝Vector3D类型，可采用名义类型（Nominal Type）方案，即通过为原类型添加一个独有的标识属性来区分二者：

interface Vector2D { x: number, y: number, __type: '2d' };
interface Vector3D { x: number, y: number, z: number, __type: '3d' };
function calc(vector: Vector2D): void;

对于interface类型，可直接增加标志属性；但对于原始类型（primitive types），则需借助交叉类型（Intersection Types）来实现，例如：

type Food = string & { _type: 'food' };
type Money = number & { _type: 'money' }

尽管最终类型看起来复杂，但它们本质上仍保持原始类型的行为。因为原始类型在底层会解析为对应的包装类型（WrapperType），如string → String对应number → Number，这与JavaScript的行为一致。因此，这些名义类型仍可像原始类型一样直接使用：

const money = 100 as Money;
const bill = money * 1; // bill 仍然是 number 类型

虽然这种写法略显繁琐，但在需要确保类型安全性的场景中非常有效。如果类型系统中包含大量基础类型单元，这种模式尤为实用。

拓展应用

这类名义类型虽非纯粹原始类型，但可利用其特性构建灵活且实用的类型定义。

例如，在处理字面量枚举时，可在限制预设值的同时，利用基于原始类型拓展的名义类型作为兜底方案。这样既能保留TypeScript的类型提示优势，又具备足够的自由度，如下所示：

如CustomLiteral名义类型所示，它既能享受Literal字面量的类型提示，又能突破枚举限制使用自定义字符串。若直接将Literal与原始类型string交叉：

联合类型的本质是求并集，最终会推导出更广泛的string类型，导致失去字面量类型的精确推导。为实现上述效果，需为string类型赋予“名义”，使其区别于普通原始类型，避免在求并集时被string类型完全覆盖。具体实现可参考TypeScript Playground。

在Vue中的应用

Vue3源码中广泛使用了Nominal Typing，例如VNode、Teleport、KeepAlive和Fragment等内置组件，其定义中均包含用于区分的标志变量，分别对应__is_VNode、__isTeleport、__isKeepAlive和__isFragment。下图展示了KeepAlive组件的声明细节，更多组件声明可查阅官方仓库。

当类型声明位于函数入参时，为防止与用户自定义属性冲突，通常会使用unique symbol作为键值来构造名义类型，例如：

以上即为TypeScript名义类型（Nominal Typing）的详细解析，更多相关内容请关注本站其他文章。