在前端开发中，TypeScript 已经成为越来越多项目的首选语言。TypeScript 提供了强类型约束、代码提示等重要特性，避免了很多传统 JavaScript 开发中令人头痛的问题。然而，偶尔我们仍会遇到 TypeScript 编译错误的情况，其中比较常见的错误是 TS2339: “属性不存在于类型”。
问题描述
当我们对一个 TypeScript 对象使用成员访问操作符“.”来访问其属性时，并且这个属性在对象的类型定义中未被明确定义时，TypeScript 就会抛出 TS2339 错误，如下所示：
Property 'propertyName' does not exist on type 'typeName'.
其中，propertyName 指的是我们试图访问的对象属性名，typeName 指的是对象的类型名称。
我们来看一个示例：
-- -------------------- ---- ------- --------- ------ - ----- ------- ---- ------- - --- ---- ------ - - ----- ------ ---- -- -- ------------------------
上面的例子中，我们定义了一个 Person 接口来描述一个人，tom 对象是一个类型为 Person 的实例。但是在最后一行，我们试图访问 tom 对象上的一个不存在的 gender 属性，就会导致 TypeScript 编译错误 TS2339：“Property 'gender' does not exist on type 'Person'。”
这是因为我们在 Person 接口中并没有定义 gender 属性，因此 TypeScript 编译器无法确定这个属性是否存在于 Person 类型中。
解决方案
要解决 TS2339 错误，我们可以采用以下解决方案。
方案一：定义缺失的属性
最简单的解决方法就是定义缺失的属性，让 TypeScript 知道这个属性确实存在。以刚才的示例为例：
-- -------------------- ---- ------- --------- ------ - ----- ------- ---- ------- ------- ------- -- ------ - --- ---- ------ - - ----- ------ ---- --- ------- ------ -- --------- -- ------------------------ -- ------
通过在 Person 接口中添加 gender 属性，并在 tom 对象中为这个属性赋值，我们就可以避免 TS2339 错误。
方案二：使用类型断言
如果您确定要访问的属性确实存在，您可以使用类型断言来告诉 TypeScript 编译器，它应该把这个对象视为某个类型。例如：
-- -------------------- ---- ------- --------- ------ - ----- ------- ---- ------- - --- ---- ------ - - ----- ------ ---- -- -- ---------------- -- ------------- -- --- --- --- ------- ------ --
以上代码中，我们使用类型断言把 tom 对象转换成 any 类型，就可以访问其上的任意属性。
方案三：使用可选属性
如果您不确定要访问的属性是否存在，您可以在 Person 接口中将其声明为可选属性。例如：
-- -------------------- ---- ------- --------- ------ - ----- ------- ---- ------- -------- ------- -- ------ -------- - --- ---- ------ - - ----- ------ ---- -- -- ------------------------ -- ---------
通过把 gender 声明为可选属性，我们就告诉 TypeScript 编译器，可能存在一种情况，实例中并没有 gender 属性。这样，在访问 tom.gender 属性时，如果属性不存在，程序不会报错，而是返回 undefined 值。
总结
在开发前端应用时，TypeScript 是一种非常有用的语言，可以提供类型检查和代码提示等强大特性，有助于编写高质量的代码。但是，在编写 TypeScript 代码时，我们有时会遇到 TS2339 错误，即属性不存在于类型中。要避免这类错误，我们可以采用如下三种解决方案：
在类型中定义缺失属性；
使用类型断言；
把不确定存在的属性声明为可选属性。
掌握这些解决方案，您就可以更轻松地编写 TypeScript 代码，避免 TS2339 错误的发生。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6502b16795b1f8cacdfebe66