React源码中{| |}特殊类型定义语法的名称是什么？

首先可以明确，你看到的{| |}语法不是JavaScript官方的原生特性，它是Flow静态类型检查器的专属语法，React早期代码全域使用Flow做类型校验，所以你会在老版本的React源码里频繁看到这种写法。

这个特性的正式名称是精确对象类型（Exact Object Type），作用是严格约束对象的结构，要求对象只能包含类型定义里明确列出的属性，不允许携带未声明的额外字段。

给你举个简单的用法对比就能理解它的作用：

• 普通Flow对象类型默认不限制额外属性，以下代码是合法的：

type User = {
  name: string
};
const testUser: User = { name: "张三", age: 25 };

• 而用{| |}定义的精确对象类型会拦截额外属性，以下代码会触发Flow类型错误：

type ExactUser = {|
  name: string
|};
// 报错：类型中不存在age属性的定义
const testExactUser: ExactUser = { name: "张三", age: 25 };

补充两个你可能关心的点：

• TypeScript没有对应的原生语法，要实现类似的精确校验需要借助泛型工具或者严格配置实现。
• 现在React官方已经逐步将代码库从Flow迁移到TypeScript，Flow本身的受众也越来越小，这也是你搜索不到太多相关资料的主要原因。

内容的提问来源于stack exchange，提问作者Ktoxcon