极客笔记TypeScript 在使用 TypeScript 时遇到 “Property … does not exist on type …” 错误
在本文中，我们将介绍在使用 TypeScript 时遇到的 “Property … does not exist on type …” 错误，并提供解决方案和示例代码。这个错误通常在代码中使用了不存在的属性时发生，同时也可能是 TypeScript 类型定义不匹配导致的。
阅读更多：TypeScript 教程
问题背景
当我们使用 TypeScript 进行开发时，时常会遇到以下错误之一：
Property 'propertyName' does not exist on type 'typeName'.
或者
Type 'typeName' has no property 'propertyName'.
这种错误的出现通常是因为我们在代码中访问了一个不存在的属性，或者属性的类型与我们期望的不一致。
解决方案
下面是一些常见的解决方案和建议，帮助我们避免或解决这类错误。
1. 检查属性名称拼写
首先，我们需要检查代码中属性名称的拼写是否正确。尤其是当我们使用复杂的命名约定或缩写时，可能会出现拼写错误的情况。
2. 使用可选链操作符
可选链操作符（Optional Chaining Operator）是 TypeScript 3.7 中引入的新特性，它可以帮助我们在访问属性时避免出现 “Property … does not exist on type …” 错误。我们可以使用问号（?）来标记我们希望访问的属性是可选的，如果属性不存在，表达式将会被短路，返回 undefined。
下面是一个示例代码：
// 定义一个类型
type User = {
name?: string;
age?: number;
};
// 创建一个对象
const user: User = {
name: "Alice"
};
// 使用可选链操作符访问属性
const userName = user?.name;
console.log(userName); // 输出："Alice"
3. 使用类型断言
有时，我们可能确实需要访问一个类型定义中不存在的属性。这种情况下，我们可以使用类型断言（Type Assertion）来告诉 TypeScript 编译器我们知道该属性的存在。
下面是一个示例代码：
// 定义一个类型
type User = {
name: string;
};
// 创建一个对象
const user: User = {
name: "Bob"
};
// 使用类型断言访问属性
const userName = (user as any).name;
console.log(userName); // 输出："Bob"
请注意，使用类型断言时需要注意属性的真实性，避免运行时出现错误。
4. 更新类型定义
如果我们使用的是第三方库或模块，并且出现了 “Property … does not exist on type …” 错误，可能是因为类型定义文件不完整或过时。这种情况下，我们可以更新或替换类型定义文件，或者手动添加缺失的属性定义。
示例说明
下面是一个示例场景，展示了如何解决 “Property … does not exist on type …” 错误：
假设我们有一个名为 Person 的类型，表示一个人的基本信息，包括姓名和年龄。我们定义一个 printPerson 函数来输出人的信息：
type Person = {
name: string;
age: number;
};
function printPerson(person: Person) {
console.log(`Name: {person.name}, Age:{person.age}`);
}
const person = {
name: "Alice",
age: 25
};
printPerson(person);
运行以上代码，我们可以正确地输出人的信息。
现在，我们想给 person 添加一个新的属性 address，并且在 printPerson 函数中输出地址信息。我们更新代码如下：
type Person = {
name: string;
age: number;
address: string; // 添加了新的属性
};
function printPerson(person: Person) {
console.log(`Name: {person.name}, Age:{person.age}, Address: ${person.address}`);
}
const person = {
name: "Alice",
age: 25,
address: "123 Main St"
};
printPerson(person);
此时，TypeScript 编译器会报错：
Property 'address' does not exist on type 'Person'.
这是因为我们在更新类型定义之前已经声明并使用了 printPerson 函数。
为了解决这个问题，我们可以使用类型断言来告诉编译器 person 具有 address 属性：
printPerson(person as Person);
或者我们可以更新 printPerson 函数的参数类型，使其允许 address 属性是可选的：
type Person = {
name: string;
age: number;
address?: string; // address 变成可选属性
};
function printPerson(person: Person) {
console.log(`Name: {person.name}, Age:{person.age}, Address: ${person.address}`);
}
const person = {
name: "Alice",
age: 25,
address: "123 Main St"
};
printPerson(person);
两种方法都能解决这个问题，选择哪一种取决于我们的实际需求和代码结构。
总结
“Property … does not exist on type …” 错误是在使用 TypeScript 开发时经常遇到的问题。本文介绍了一些解决这个错误的常见方法，包括检查属性拼写、使用可选链操作符、类型断言和更新类型定义。通过了解和应用这些方法，我们可以更好地处理这类错误，提高代码质量和开发效率。