TypeScript 中的字符串类型不存在属性 [已修复]

作者

属性在 TypeScript 中的字符串类型上不存在

Property does not exist on type String in TypeScript

当我们尝试访问该类型上不存在的属性时，会出现“String 类型上不存在的属性”错误string。

要解决该错误，请使用对象而不是字符串，或者确保您正在访问字符串上的有效内置方法。

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

索引.ts
const name = 'Bobby Hadz';

// ⛔️ Property 'id' does not exist on type '"Bobby Hadz"'.
console.log(name.id);

我们试图访问id字符串上的属性并收到错误，因为该
id属性在字符串上不存在。

确保你没有拼错内置方法

如果您尝试调用内置方法，请确保您没有拼错它。

索引.ts
const name = 'Bobby Hadz';

// 👇️ BOBBY HADZ
console.log(name.toUpperCase());

如果您不打算访问 type 值上的属性string，请使用
console.log来记录您正在访问该属性的值。

您可以使用typeof运算符在访问属性之前检查变量的类型。

如果您需要检查一个值是否是一个对象，请点击
下面的文章。

使用对象而不是字符串

要解决该错误，请使用对象而不是字符串并键入对象的属性。

索引.ts
interface Person {
  name: string;
  id: number;
}

const p1: Person = {
  name: 'Bobby Hadz',
  id: 1,
};

console.log(p1.name); // 👉️ "Bobby Hadz"
console.log(p1.id); // 👉️ 1

我们创建了一个包含和属性的接口。nameid

该p1变量的类型为Person，因此我们可以安全地访问该对象的name和
id属性。

如果您需要
将对象初始化为空，或者最初缺少一些键值对，请

使用问号将特定属性设置为可选。

索引.ts
interface Person {
  name?: string;
  id?: number;
}

const p1: Person = {};

p1.name = 'Bobby Hadz';
p1.id = 1;

console.log(p1.name); // 👉️ "Bobby Hadz"
console.log(p1.id); // 👉️ 1

我们将name和id对象属性设置为可选，因此我们能够将对象初始化为空。

您可以稍后设置必要的属性。

请注意，您不应尝试访问对象类型中不存在的属性。

您还可以使用Partial实用程序类型使
所有属性成为可选的。

使用可变键

In some cases, you won’t know the names of all of the object’s keys or the shape
of the values ahead of time.

index.ts
type Person = {
  [key: string]: any;
  name: string;
};

const p1: Person = {
  name: 'Bobby Hadz',
};

p1.id = 1;
p1.salary = 100;

console.log(p1.name); // 👉️ "Bobby Hadz"
console.log(p1.test); // 👉️ undefined

The {[key: string]: any} syntax is called an
index signature and is used when you don’t
know the names of the object’s keys or the shape of the values ahead of time.

The syntax means that when the object is indexed with a string key, it will
return a value of any type.

If you know any of the names of the properties ahead of time, you can specify them to get better type safety.

We set the name property to string in the Person type, so the type checker
would throw an error if the property is not provided or is set to a value of a
different type.

If you don’t know the names of all of the object’s keys but know the shape of
the values, you can use a more specific index signature for better type safety.

index.ts
type Person = {
  [key: string]: string | number;
  name: string;
  id: number;
};

const p1: Person = {
  name: 'Bobby Hadz',
  id: 1,
};

p1.job = 'accountant';
p1.salary = 100;

The index signature in the example means that when the object is indexed with a
string key, it will return a value that has a string or number type.

The string | number syntax is called a
union type in TypeScript.

We had to use a union type, because both the name and id properties are strings and they return different types.

In other words, you can’t specify that when the object is indexed with a string
key, it returns a value of type string, and then add another string key to the
interface that has a value of type number.

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

The example shows that the type checker throws an error if we specify that when
indexed with a string key, the object returns a value of type string, and
then try to add another string key that has a value of type number.

# Additional Resources

You can learn more about the related topics by checking out the following
tutorials: