TypeScript中类型前使用与不使用typeof的区别及行为差异

先明确核心结论：你的两个示例写法有本质区别，第一个是语法错误，第二个是合法的类型定义，具体差异如下：

1. 直接使用类型别名（合法写法） #

interface Props {
  children: React.ReactNode;
}
type Item = React.FC<Props>;
type Component = React.FC & {
  Item: Item;
}

这里Item: Item是直接复用已定义的类型别名，Component类型的Item属性会被指定为React.FC<Props>类型，语法完全合法，编译可以正常通过。

2. 对类型别名使用typeof（错误写法） #

interface Props {
  children: React.ReactNode;
}
type Item = React.FC<Props>;
type Component = React.FC & {
  Item: typeof Item;
}

这段代码会触发编译错误，原因是：

• TypeScript的typeof操作符在类型上下文中，只能用于获取运行时存在的值的类型，不能作用于类型别名。
• Item是编译时的类型别名，不会生成任何运行时代码，不属于“值”的范畴，所以typeof Item会被TypeScript判定为非法，提示类似'Item' refers to a type, but is being used as a value here.的错误。

对代码行为的影响 #

• 错误写法无法通过编译，自然无法生成可运行的代码。
• 合法写法的类型定义仅存在于编译阶段，编译后所有类型信息会被擦除，不会影响代码的运行行为，最终生成的JavaScript代码和普通React组件逻辑一致。

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