当我们在使用 TypeScript 进行开发的过程中，遇到了 “Cannot read property of undefined” 这类错误，这往往是因为我们试图访问一个没有赋值的变量或者对象的属性导致的。这种错误十分常见，但仍经常会让开发者为之揪心。本文将深入探讨 TypeScript 中“Cannot read property of undefined”错误的原因以及解决方法。
错误原因
在 TypeScript 中使用对象的某个属性或者变量前需要进行初始化或者赋值。如果我们没有赋值或者初始化就试图使用，就会遇到 “Cannot read property of undefined” 错误。下面是一个例子：
interface Person {
name: string;
age: number;
}
let person: Person;
console.log(person.name);当运行上述代码时，就会抛出以下错误：
Cannot read property 'name' of undefined
这是因为在上述代码中，我们声明了一个 person 变量，但是并没有初始化它。因此，当我们尝试访问它的属性 name 时，就会遇到 “Cannot read property of undefined” 错误。
解决方法
一、初始化或者赋值
在上面的例子中，我们可以通过为变量 person 赋值来解决这个问题，例如：
-- -------------------- ---- ------- --------- ------ - ----- ------- ---- ------- - --- ------- ------ - - ----- -------- ---- -- -- -------------------------
这样一来，就不会再出现 “Cannot read property of undefined” 错误了。
二、判断对象是否为 undefined
在某些情况下，我们可能无法直接赋值或者初始化一个变量。此时，我们可以通过先判断对象是否为 undefined 来避免错误，例如：
-- -------------------- ---- ------- --------- ------ - ----- ------- ---- ------- - --- ------- ------- -- ------- --- ---------- - ------------------------- -
在这种情况下，我们使用了 if 语句，先判断 person 是否为 undefined。只有当 person 不是 undefined 时，才访问它的属性 name。这样一来，就可以避免 “Cannot read property of undefined” 错误。
三、使用可选链操作符
在 TypeScript 3.7 版本中，新增了一种语法：可选链操作符（Optional Chaining Operator），用于避免访问 undefined 或 null 值的属性。例如：
interface Person {
name?: string;
age?: number;
}
let person: Person = {};
console.log(person?.name);在这里，我们使用了可选链操作符 ?.，表示只有在 person 不为 undefined 时，才会访问它的属性 name。如果 person 为 undefined，则会返回 undefined，而不会抛出错误。
四、使用默认值
除了以上三种方式外，我们还可以使用默认值来避免 “Cannot read property of undefined” 错误。例如：
interface Person {
name: string;
age: number;
}
let person: Person | undefined;
console.log(person?.name || 'N/A');在这里，我们使用了 || 运算符，如果 person?.name 为 undefined，则会返回默认值 'N/A'。
需要注意的是，默认值只会在变量为 undefined 时生效，如果变量为 null 或者空字符串 ''，默认值不会生效。
结语
遇到 “Cannot read property of undefined” 错误时，我们需要仔细排查错误原因，想办法解决问题。本文介绍了四种解决方案，希望对 TypeScript 开发者们有所帮助。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67c55d0cce2eedcb71b1d5f5