迹忆客 专注技术分享

当我们尝试访问或设置不包含在对象类型中的属性时，会出现“Property does not exist on type '{}' ”错误。 要解决该错误，请显式键入对象属性或使用具有可变键名的类型。

以下是错误发生方式的示例：

const obj = {};

// ⛔️ Error: Property 'name' does not
// exist on type '{}'.ts(2339)
obj.name = 'Tom';

我们没有显式键入 obj 变量并将其声明为空对象，因此我们无法分配或访问对象类型中不存在的属性。

要解决该错误，请明确键入对象并指定我们打算访问的任何属性。

// ✅ When you know property names ahead of time
type Employee = {
  id?: number;
  name?: string;
};

const obj: Employee = {};

obj.id = 1;
obj.name = 'Alice';

// ✅ When you don't know ALL property names ahead of time
type Employee2 = {
  [key: string]: any; // 👈️ variable key
  name: string;
};

const obj2: Employee2 = {
  name: 'James',
};

obj2.salary = 100;

第一个示例展示了当您提前知道对象的属性名称和值的类型时如何键入对象。

我们需要将对象声明为空，因此我们使用问号将属性标记为可选。

现在可以将对象初始化为空，稍后可以分配 id 和 name 属性。

这里重要的是——属性存在于对象类型上，所以我们在访问它们时不会得到“Property does not exist on type '{}'”的错误。

在某些情况下，我们不会提前知道所有对象键的名称或值的形状。

type Employee2 = {
  [key: string]: any; // 👈️ variable key
  name: string;
};

const obj2: Employee2 = {
  name: 'James',
};

obj2.salary = 100;

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

该语法意味着当使用字符串键索引对象时，它将返回任何类型的值。

如果我们提前知道属性的任何名称，则可以指定它们以获得更好的类型安全性。

我们在 Employee2 类型中将 name 属性设置为字符串，因此如果未提供该属性或将其设置为不同类型的值，类型检查器将抛出错误。

如果我们不知道对象所有键的名称，但知道值的形状，则可以使用更具体的索引签名以获得更好的类型安全性。

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

const obj2: Employee2 = {
  id: 1,
  name: 'James',
};

obj2.department = 'accounting';
obj2.salary = 100;

索引签名意味着当使用字符串键索引对象时，它将返回一个具有 string 或 number 类型的值。

string | number 语法在 TypeScript 中称为联合类型。

我们必须使用联合类型，因为 name 和 id 属性是字符串并且它们返回不同的类型。

换句话说，你不能指定当对象被一个字符串键索引时，它返回一个字符串类型的值，并在接口中添加另一个具有数字类型值的字符串键。

type Employee2 = {
  [key: string]: string;
  name: string;
  // ⛔️ Error: Property 'id' of type 'number' is
  // not assignable to 'string' index type 'string'.ts(2411)
  id: number;
};

该示例表明，如果我们指定在使用字符串键索引时对象返回 string 类型的值，并尝试添加另一个值为 number 的字符串键，则类型检查器会抛出错误。

总结

当我们尝试访问或设置不包含在对象类型中的属性时，会出现“Property does not exist on type '{}' ”错误。 要解决该错误，请显式键入对象属性或使用具有可变键名的类型。