TypeScript 中 Property does not exist on type Object 错误

TypeScript 11月前 327

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

下面是发生上述错误的示例。

const obj: Object = {
  name: 'Tom',
  age: 30,
};

// ⛔️ Error: Property 'country' does
// not exist on type 'Object'.ts(2339)
obj.country = 'Chile';

我们将 obj 变量键入为 Object 并尝试访问该对象的 country 属性。

但是，Object 类型上不存在 country 属性，因此类型检查器会抛出错误。

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

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

const obj1: Person1 = {
  name: 'Tom',
  age: 30,
};

obj1.country = 'Chile';

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

const obj2: Person2 = {
  name: 'Tom',
};

obj2.city = 'Santiago';
obj2.age = 30;

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

我们可以使用问号将初始化对象时不会提供的属性标记为可选。

现在 country 属性存在于对象的类型中，所以我们可以安全地访问它。

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

type Person2 = {
  [key: string]: any;
  name: string;
};

const obj2: Person2 = {
  name: 'Tom',
};

obj2.city = 'Santiago';
obj2.age = 30;

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

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

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

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

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

type Person2 = {
  [key: string]: string | number;
  name: string;
  age: number;
};

const obj2: Person2 = {
  name: 'Tom',
  age: 30,
};

obj2.city = 'Santiago';
obj2.favNumber = 100;

示例中的索引签名意味着当使用字符串键索引对象时，它将返回具有字符串或数字类型的值。

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

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

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

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