TypeScript 对象新增属性不显示在自动补全列表的原因及解决办法问询

问题原因 #

TypeScript是静态类型语言，类型推导发生在代码编译阶段而非运行时：

• 初始化greeting对象时，TS会自动推导其类型为{ hello: string; hi: string }，该类型默认是固定的，仅包含初始化时声明的两个属性
• 后续动态新增hey属性的操作，并不会修改TS对greeting的原始类型推导，因此hey不会出现在自动补全列表中，在严格模式下该新增属性的操作甚至会直接抛出类型错误。

解决方案 #

根据使用场景可以选择以下任意一种方案：

• 方案1：提前声明完整的对象类型
  如果你明确知道对象会包含的所有属性，可以提前定义类型，将可选属性标记出来：

  type Greeting = {
    hello: string;
    hi: string;
    // 标记hey为可选属性
    hey?: string;
  }
  const greeting: Greeting = {
    hello: "Hello",
    hi: "Hi"
  }
  // 后续赋值和访问都会有正常的自动补全
  greeting.hey = 'Hey'
  

• 方案2：使用索引签名适配动态属性场景
  如果你需要对象支持动态新增任意字符串类型的属性，可以添加索引签名：

  type Greeting = {
    // 声明所有字符串类型的key对应的值都是string
    [key: string]: string;
    hello: string;
    hi: string;
  }
  const greeting: Greeting = {
    hello: "Hello",
    hi: "Hi"
  }
  greeting.hey = 'Hey' // 合法，且后续访问会自动补全已添加的属性
  

• 方案3：使用Record工具类快速声明动态对象
  如果不需要区分固定属性和动态属性，可以直接用Record工具类声明：

  const greeting = {
    hello: "Hello",
    hi: "Hi"
  } as Record<string, string>
  greeting.hey = 'Hey' // 正常补全
  

• 方案4：一次性构造完整对象
  如果可以避免动态新增属性，直接用Object.assign一次性构造完整对象，TS会自动推导完整类型：

  const greeting = Object.assign(
    { hello: "Hello", hi: "Hi" },
    { hey: 'Hey' }
  )
  // greeting的类型会自动推导为包含hello、hi、hey三个属性，自动补全正常
  

内容的提问来源于stack exchange，提问作者Docky-Dockling