在 TypeScript 应用程序中，当我们尝试访问一个未定义的属性时，TypeScript 编译器可能会抛出 TypeError 异常。这种情况经常发生在对象或数组中使用点语法或括号索引时。本文将介绍产生该异常条件的情形以及如何避免这些错误和处理它们。
错误产生原因
TypeError 错误通常由 JavaScript 运行时引发，表示正在尝试对一个值进行不支持的操作。在 TypeScript 中，这种错误通常是由尝试读取 undefined 或 null 属性/元素导致的。下面是一些常见的产生该错误的例子：
访问未定义的对象属性：
interface User {
name: string;
}
const user: User = {};
console.log(user.age); // 抛出：TypeError: Cannot read property 'age' of undefined在这个例子中，user 对象未定义 'age' 属性，所以当我们尝试获取该属性时会抛出异常。
访问未定义的数组元素：
const numbers: number[] = [1, 2, 3]; console.log(numbers[5]); // 抛出：TypeError: Cannot read property '5' of undefined
在这个例子中，我们试图访问不存在于数组中的第 6 个元素。
使用 null 或 undefined ：
let x: number; console.log(x.toString()); // 抛出：TypeError: Cannot read property 'toString' of undefined
这种情况与前面的例子类似。由于我们没有为 x 变量分配初始值，它最初是未定义的（undefined），当 TypeScript 尝试调用 toString() 方法时会抛出异常。
解决方案
要避免或处理这些错误，我们需要考虑一下如何在访问属性或元素前检查其是否已定义。以下是几种可行的解决方案：
使用 Optional Chaining 操作符(?)：
Optional Chaining 操作符可以安全地访问对象或数组的嵌套属性或元素，而不必担心它们不存在的情况。如果它们不存在，操作符就会返回 undefined，这样可以避免抛出 TypeError 错误。
interface User {
name?: string;
}
const user: User = {};
console.log(user?.name?.length); // 输出 undefined，不会抛出异常手动检查变量是否已定义：
手动检查变量是否已定义也是一种有效的解决方案。
let x: number | undefined;
if (typeof x !== "undefined") {
console.log(x.toString());
} else {
console.log("x is not defined");
}如果 x 已经定义，则将其转换为字符串；否则，输出一个消息指示其未定义。通过这种方式，我们可以避免浪费时间和资源尝试访问未定义的变量。
设置默认值：
另一种方法是为对象或者数组元素设置默认值。这样，即使未定义相关属性或元素，也不会触发异常。
interface User {
name?: string;
}
const user: User = { name: "John" };
console.log(user.name || "Placeholder name"); // 输出 John
console.log(user.age || 0); // 输出 0，因为 age 属性未定义，会自动使用默认值 0在这个例子中，如果 user 对象没有 name 属性，则使用“占位符名称”代替。
总结
当我们尝试读取 undefined 或 null 属性/元素时，TypeScript 经常会抛出 TypeError 异常。要避免这些错误，检查变量是否已定义并使用可选链接操作符，手动检查
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6529b3aa7d4982a6ebc2235b