在 TypeScript 中分配之前使用变量“X”

作者

在 TypeScript 中赋值之前使用变量 ‘X’

Variable ‘X’ is used before being assigned in TypeScript

“Variable is used before being assigned”的错误发生在我们声明一个变量但没有给它赋值或者只在满足条件的情况下赋值。

要解决该错误，请将变量的类型更改为可能undefined或为其赋予初始值。

以下是错误发生方式的 3 个示例。

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

let employee: Employee; // 👈️ did not assign value to variable

// 1. ⛔️ Error: Variable 'employee' is used before being assigned.ts(2454)
employee.name = 'bobbyhadz.com';

// ------------------------------------------

let arr: string[]; // 👈️ did not assign value to variable

// 2. ⛔️ Error: Variable 'arr' is used before being assigned.ts(2454)
arr[0] = 'bobbyhadz.com';

// ------------------------------------------

// 3. Only assigns value to the variable if a condition is met 👇️
let salary: number;

if (Math.random() > 0.5) {
  salary = 100;
}

// ⛔️ Error: Variable 'salary' is used before being assigned.ts(2454)
if (salary === 100) {
  console.log('success');
}

前两个示例导致错误的原因是：

  1. 我们声明一个变量并设置它的类型。
  2. 我们不给变量一个初始值。
  3. 我们尝试使用变量。

初始化变量解决错误

要解决该错误，请在声明变量时为其赋予预期类型的​​初始值。

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

const employee: Employee = {
  name: '',
  country: '',
};

employee.name = 'bobby hadz';

// ------------------------------------

const arr: string[] = [];

arr[0] = 'bobbyhadz.com';

我们用初始值声明了变量，因此在它们被赋值之前我们不再使用它们。

将变量的类型更新为可能未定义

另一种解决方案是将变量的类型更新为 possibly
undefined。

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

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

// 👉️ somewhere in your code this should be set to an object

if (employee !== undefined) {
  employee.name = 'Bobby Hadz';
}

// ---------------------

let arr: string[] | undefined; // 👈️ could be undefined

// 👉️ somewhere in your code this should be set to an array

if (arr !== undefined) {
  arr[0] = 'bobbyhadz.com';
}

我们使用联合类型来指定变量可以是一种类型，也可以是undefined。

现在我们必须使用if语句作为
类型保护，以确保undefined在向其添加属性或元素之前变量不存在。

对于数组，这样做并没有真正的好处。最好在声明变量时将一个
空数组分配给变量并正确键入变量。

使用 Partial 实用程序类型解决错误

如果您正在处理对象并且无法为所有属性设置默认值，请考虑使用
Partial 实用程序类型。

该类型可用于将对象的属性设置为可选。

然后你可以给变量一个
空对象的初始值。

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

const employee: Partial<Employee> = {};

employee.name = 'Bobby Hadz';
employee.country = 'Brazil';

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

实用程序类型将该类型Partial的所有属性设置Employee为可选，因此我们可以为employee变量提供一个空对象的初始值。

只有满足条件才给变量赋值

当我们仅在满足特定条件时才为变量赋值时，通常会导致错误。

索引.ts
// 3. Only assigns value to a variable if a condition is met 👇️
let salary: number;

if (Math.random() > 0.5) {
  salary = 100;
}

// ⛔️ Error: Variable 'salary' is used before being assigned.ts(2454)
if (salary === 100) {
  console.log('success');
}

我们可以更新变量的类型以undefined解决问题。

索引.ts
let salary: number | undefined; // 👈️ could be undefined

if (Math.random() > 0.5) {
  salary = 100;
}

if (salary === 100) {
  console.log('success');
}

变量salary可以是 anumber也可以是undefined.

现在我们已经准确地设置了它的类型，错误不再发生。

或者，您可以在声明变量时为其赋予初始值。

索引.ts
let salary = 0; // 👈️ give it an initial value of the correct type

if (Math.random() > 0.5) {
  salary = 100;
}

if (salary === 100) {
  console.log('success');
}

您选择哪种方法取决于您的用例。如果可能，我更喜欢使用预期类型的​​初始值。

额外资源

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