TypeScript 中未赋值对象真值检查的正确处理姿势

本文深入探讨了在 typescript 中对可能未赋值的变量进行真值检查时遇到的常见问题及其解决方案。当 typescript 严格检查变量类型时，直接对声明为 `object` 但尚未赋值的变量进行 `if (variable)` 判断会导致编译错误。通过引入联合类型 `object | undefined` 或 `object | null`，并结合适当的初始化，可以有效解决这一问题，确保代码的类型安全和逻辑正确性。

理解 TypeScript 中未赋值变量的挑战

在 JavaScript 中，对一个已声明但尚未赋值的变量进行真值检查（例如 if (variable)）是常见的做法。未赋值的变量默认为 undefined，而 undefined 在布尔上下文中被视为 false。然而，当我们将这类代码迁移到 TypeScript 时，由于其严格的类型检查机制，可能会遇到编译错误。

考虑以下 JavaScript 代码片段：

const accounts = state.msalInstance.getAllAccounts();
let account; // 声明但未赋值

if (accounts.length) {
  account = accounts[0];
} else {
  await state.msalInstance
    .handleRedirectPromise()
    .then(redirectResponse => {
      if (redirectResponse !== null) {
        account = redirectResponse.account;
      } else {
        state.msalInstance.loginRedirect();
      }
    })
    .catch(error => {
      console.error(`Error during authentication: ${error}`);
    });
}

if (account) {
  // 这在 JavaScript 中是合法的，因为 account 可能是 undefined
}

当尝试将其转换为 TypeScript 并指定 account 的类型为 object 时：

const accounts = state.msalInstance.getAllAccounts();
let account: object; // 指定为 object 类型

if (accounts.length) {
  account = accounts[0];
} else {
  await state.msalInstance
    .handleRedirectPromise()
    .then((redirectResponse: { account: object | null }) => { // 假设 account 可能为 null
      if (redirectResponse !== null) {
        account = redirectResponse.account;
      } else {
        state.msalInstance.loginRedirect();
      }
    })
    .catch((error: { name: string }) => {
      console.error(`Error during authentication: ${error}`);
    });
}

if (account) {
  // 此时 TypeScript 会报错：Variable 'account' is used before being assigned.
  // 因为 TypeScript 无法确定在所有执行路径下 account 是否都被赋值了。
}

TypeScript 的错误 Variable 'account' is used before being assigned. 是因为它分析出在某些代码路径（例如 accounts.length 为 false 且 redirectResponse 为 null，或者 handleRedirectPromise 发生错误）下，account 变量可能在被 if (account) 检查时仍未被赋值。而 let account: object; 明确告诉 TypeScript account 只能是一个 object 类型的值，它不允许 undefined。

解决方案：使用联合类型

为了解决这个问题，我们需要明确告诉 TypeScript，account 变量除了可以是 object 类型外，还可能处于未赋值（undefined）或显式为空（null）的状态。

方案一：允许 undefined

最直接的解决方案是使用联合类型 object | undefined。这告诉 TypeScript，account 变量可以是 object 类型，也可以是 undefined。

Otter.ai

一个自动的会议记录和笔记工具，会议内容生成和实时转录

下载

const accounts = state.msalInstance.getAllAccounts();
let account: object | undefined; // 明确指出 account 可以是 object 或 undefined

if (accounts.length) {
  account = accounts[0];
} else {
  await state.msalInstance
    .handleRedirectPromise()
    .then((redirectResponse: { account: object | null }) => {
      if (redirectResponse !== null && redirectResponse.account !== null) { // 确保 account 不为 null
        account = redirectResponse.account;
      } else {
        state.msalInstance.loginRedirect();
      }
    })
    .catch((error: { name: string }) => {
      console.error(`Error during authentication: ${error}`);
    });
}

if (account) {
  // 现在，TypeScript 知道 account 可能是 undefined，所以这个真值检查是合法的。
  // 在此代码块内，TypeScript 会自动收窄 account 的类型为 object。
  console.log("Account is assigned:", account);
} else {
  console.log("Account is not assigned or is null.");
}

通过将 account 的类型声明为 object | undefined，TypeScript 允许变量在未赋值时保持 undefined 状态，并且 if (account) 这样的真值检查也变得有效，因为 undefined 是一个“假值”（falsy value）。

方案二：允许 null 并初始化

在某些情况下，你可能希望明确表示一个变量当前没有值，而不是简单地未赋值。这时，可以使用 null 并进行初始化。null 同样是一个“假值”，在布尔上下文中会被视为 false。

const accounts = state.msalInstance.getAllAccounts();
let account: object | null = null; // 明确指出 account 可以是 object 或 null，并初始化为 null

if (accounts.length) {
  account = accounts[0];
} else {
  await state.msalInstance
    .handleRedirectPromise()
    .then((redirectResponse: { account: object | null }) => {
      if (redirectResponse !== null && redirectResponse.account !== null) {
        account = redirectResponse.account;
      } else {
        state.msalInstance.loginRedirect();
      }
    })
    .catch((error: { name: string }) => {
      console.error(`Error during authentication: ${error}`);
    });
}

if (account) {
  // 同样，TypeScript 知道 account 可能是 null，所以真值检查合法。
  // 在此代码块内，TypeScript 会自动收窄 account 的类型为 object。
  console.log("Account is assigned:", account);
} else {
  console.log("Account is not assigned or is null.");
}

这种方法通过显式初始化 account = null，确保了 account 变量在任何时候都有一个明确的值（要么是 object，要么是 null），从而避免了“变量未赋值”的错误。

总结与最佳实践

• 理解 TypeScript 的严格性： TypeScript 旨在提供更强的类型安全。当你声明 let myVar: Type; 而不立即赋值时，TypeScript 默认认为 myVar 在被赋值之前是 undefined。如果 Type 不包含 undefined（例如 object），那么在赋值前使用 myVar 就会报错。
• 使用联合类型： 当变量可能在某些代码路径下未被赋值，或者其值可能为 null 时，应使用联合类型，例如 Type | undefined 或 Type | null。
• 显式初始化： 如果你希望变量在声明时就有一个明确的“无值”状态，使用 Type | null = null 是一个好习惯。
• 真值检查的有效性： 在 TypeScript 中，if (variable) 这样的真值检查对于 undefined 和 null 都是有效的，它们都会被视为 false。当 TypeScript 确认变量在此检查后不再是 undefined 或 null 时，它会自动进行类型收窄（Type Narrowing），使得在该代码块内可以安全地使用变量的非 undefined/null 类型。

通过采纳这些实践，你可以编写出既符合 TypeScript 类型安全要求，又逻辑清晰、易于维护的代码。