TypeScript中派生类字段无法自动补全的技术咨询

class A<T extends Record<string, unknown>> {
  state?: T;
}

class B extends A<{ a: number}> {
  state = { /** 无法自动补全 */ }
}

问题：既然TypeScript认为state的类型存在问题，为何不为我提供自动补全功能？

原因分析 #

这是因为TypeScript的代码辅助逻辑和类型检查逻辑是分开的：

• 当你在子类里写state = {}时，编辑器的自动补全会优先基于当前输入的空对象做即时类型推断，此时推断出的类型是{}，所以不会提示a属性。
• 后续TypeScript的类型检查才会发现这个空对象不符合父类state的{ a: number }类型约束，进而抛出错误，但这一步是滞后于自动补全的。

解决方法 #

有两种方式可以触发自动补全：

1. 显式指定属性类型

class B extends A<{ a: number}> {
  state: { a: number } = { a: 1 } // 输入时会自动提示a属性
}

2. 使用类型断言临时指定类型

class B extends A<{ a: number}> {
  state = {} as { a: number } // 输入过程中会触发自动补全
}

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