对象字面量只能指定 TS 中的已知属性

Object literal may only specify known properties in TS

当对象字面量中的属性在对象类型中不存在时，会发生“对象字面量只能指定已知属性”错误。要解决该错误，请确保键入对象的所有属性并修复属性名称中的拼写错误（如果有）。

下面是错误如何发生的示例。

索引.ts

type Employee = {
  id: number;
};

// ⛔️ Object literal may only specify known
// properties, and 'name' does not exist in type 'Employee'.
const emp: Employee = { id: 1, name: 'Alice' };

该Employee类型只有一个id属性，因此当我们尝试将name属性分配给 type 的对象时Employee，会抛出错误。

要解决这个问题，请确保键入对象文字将具有的所有属性（如果您提前知道属性名称）。

索引.ts

type Employee = {
  id: number;
  name: string;
};

const emp: Employee = { id: 1, name: 'Alice' };

我们将name属性添加到Employee类型中，类型检查器不会再抛出错误。

有时您无法提前知道对象中所有属性的名称。在这种情况下，使用索引签名。

索引.ts

type Employee = {
  id: number;
  [key: string]: any;
};

const emp: Employee = { id: 1, name: 'Alice', department: 'accounting' };

该{[key: string]: any}语法称为索引签名，当我们事先不知道所有对象的属性名称和值的形状时使用。

这种语法基本上意味着当对象被一个键索引时，它将返回一个类型（非常广泛）的值。 stringany

请注意，我们仍然可以指定id属性，将其设置为number，因为我们知道所有Employee类型的对象都将拥有它。

在使用这种方法时，您应该始终明确指定您知道的属性，因为它可以让我们更好地进行类型检查。

如果您不知道对象的所有属性名称，但知道值的类型，则可以使用更严格的索引签名以获得更好的类型安全性。

索引.ts

type Employee = {
  id: number;
  [key: string]: string | number;
};

const emp: Employee = {
  id: 1,
  name: 'Alice',
  department: 'accounting',
  salary: 100,
};

语法意味着当{[key: string]: string | number}使用字符串键索引对象时，它将返回类型为stringor number
的值。

该语法在 TypeScriptstring | number中称为联合类型。

现在我们可以向对象添加任何值为 typestring
或的属性number，这对于类型安全而言比指定 type 的值要好得多any。

请注意，使用此方法时，您无法添加值类型不是的字符串键string | number。

索引.ts

type Employee = {
  id: number;
  [key: string]: string | number;
  // ⛔️ Error: Property 'years' of type 'number[]'
  // is not assignable to 'string' index type 'string | number'.
  years: number[];
};

通过我们的索引签名[key: string]: string | number，我们告诉 TypeScript，当访问一个字符串键时，它将返回一个 astring或 a的值number，因此我们不能添加另一个类型为的字符串键number[]。

要解决这个问题，您必须添加number[]到联合类型。

索引.ts

type Employee = {
  id: number;
  [key: string]: string | number | number[];
  years: number[];
};

const emp: Employee = {
  id: 1,
  name: 'Alice',
  department: 'accounting',
  salary: 100,
  years: [2022, 2023],
};

如果您不确定对象将包含哪些属性，但通常知道它将是 X 类型之一，请使用联合类型。

索引.ts

class Bird {
  fly() {
    console.log('bird flies');
  }
}

class Fish {
  swim() {
    console.log('fish swims');
  }
}

let obj: Bird | Fish;

// 👇️ (your condition here)
if (Math.random() > 0.5) {
  obj = new Bird();
} else {
  obj = new Fish();
}

console.log(obj); // 👉️ Bird {}

该obj变量存储类型为Bird或的对象Fish。

如果满足条件，我们将Bird实例分配给对象，否则我们将Fish实例分配给对象。

我们可以将任一值分配给对象，因为我们使用了联合类型。

结论

–