赋值表达式的左侧可能不是可选的属性访问

作者

赋值表达式的左侧可能不是可选的属性访问

The left-hand side of assignment expression may not be an optional property access

当我们尝试使用可选链接 (?.) 将属性分配给对象时，会出现错误“赋值表达式的左侧可能不是可选属性访问”。

要解决该错误，请改用if充当类型保护的语句。

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

索引.ts
type Employee = {
  name: string;
  country: string;
};

let employee: Employee | undefined; // 👈️ could be undefined

// ⛔️ Error: The left-hand side of an
// assignment expression may not be
// an optional property access.ts(2779)
employee?.country = 'Germany';

我们不允许在赋值的左侧使用可选链接 (?.) 运算符。

使用if语句作为类型保护来解决错误

要解决该错误，请在赋值之前使用if语句作为
类型保护。

索引.ts
type Employee = {
  name: string;
  country: string;
};

let employee: Employee | undefined; // 👈️ could be undefined

if (employee != undefined) {
  employee.country = 'Germany';
}

我们使用松散的不等于运算符 (!=) 来检查变量是否不等于nulland undefined。

这是有效的，因为当松散地比较时，null等于undefined。

索引.ts
console.log(null == undefined); // 👉️ true

console.log(null === undefined); // 👉️ false

该if块仅在employee不存储undefined或
null值时运行。

这类似于
可选链接 (?.)运算符的作用。

使用非空断言操作符解决错误

您可能还会在网上看到使用
非空断言运算符解决错误的示例。

索引.ts
type Employee = {
  name: string;
  country: string;
};

let employee: Employee | undefined; // 👈️ could be undefined

employee!.country = 'Germany';

感叹号是
TypeScript 中的非空断言运算符。

它在不进行任何显式类型检查的情况下从类型中删除null和。undefined

当你使用这种方法时，你基本上告诉 TypeScript 这个值永远不会是nullor undefined。

大多数时候这是非常冒险的，因为当我们不确定该值永远不会是null or时，它通常会导致运行时错误undefined。

下面是使用此方法设置对象属性的示例。

索引.ts
type Employee = {
  name: string;
  country: string;
};

// 👇️ could be undefined
const employee: Employee | undefined = {
  name: '',
  country: '',
};

employee!.country = 'Germany';

// 👇️ { name: '', country: 'Germany' }
console.log(employee);

在大多数情况下，您应该使用一个简单的if语句作为类型保护，就像我们在前面的代码示例中所做的那样。

使用类型断言避免错误

您还可以使用类型断言来避免出现错误。但是，不建议这样做。

索引.ts
type Employee = {
  name: string;
  country: string;
};

// 👇️ could be undefined
const employee: Employee | undefined = {
  name: '',
  country: '',
};

(employee as Employee).country = 'Germany';

// 👇️ { name: '', country: 'Germany' }
console.log(employee);

该(employee as Employee)语法称为类型断言。

当我们有关于 TypeScript 不知道的值类型的信息时，使用类型断言。

我们有效地告诉 TypeScript 变量employee将有一个类型
Employee并且不用担心它。

如果变量是nullor ，这可能会出错，因为访问 a或值undefined的属性会导致运行时错误。nullundefined

使用逻辑与 (&&) 运算符来绕过错误

您还可以使用逻辑与 (&&) 运算符来避免出现错误。

索引.ts
type Employee = {
  name: string;
  country: string;
};

// 👇️ could be undefined
const employee: Employee | undefined = {
  name: '',
  country: '',
};

employee && (employee.country = 'Germany');

console.log(employee); // 👉️ { name: '', country: 'Germany' }

逻辑与 (&&) 运算符在评估括号中的语句之前检查左侧的值是否为真。

如果employee变量存储的是假值（例如nullor undefined），则逻辑与 (&&) 运算符右侧的代码根本不会运行。

JavaScript 中的假值是：false, undefined, null, 0, ""
（空字符串），NaN（不是数字）。

所有其他值都是真实的。

null但是，如果值不等于和 ，则此方法只能用于一次分配一个属性undefined。

可选的链接运算符只应在访问属性时使用

null如果引用等于or ，则可选的链接 (?.) 运算符会短路
undefined。

索引.ts
type Employee = {
  name: string;
  country: string;
};

let employee: Employee | undefined; // 👈️ could be undefined

// 👇️ undefined
console.log(employee?.country.toLowerCase());

可选的链接 (?.) 运算符将undefined在示例中简单地返回，因为employee其值为undefined.

可选链 (?.) 运算符的目的是
访问深度嵌套的属性
，而不会在链中的值等于null或时出错undefined。

但是，可选的链接运算符不能用在赋值表达式的左侧。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：