如何使用useState将变量类型设为可选undefined（TypeScript）

首先，将user的类型定义为UserRecord | undefined本身是正确的思路，关键是要确保TypeScript的严格空值检查处于开启状态，否则不会触发预期的错误提示。

1. 定义UserRecord类型 #

先明确你的用户结构类型（根据实际业务调整）：

interface UserRecord {
  _id: string;
  // 其他用户属性，比如name、email等
}

2. 声明user变量 #

直接将变量类型指定为UserRecord | undefined：

let user: UserRecord | undefined;

3. 开启TypeScript严格空值检查 #

在tsconfig.json中，必须开启strictNullChecks（或直接开启全严格模式strict，它包含了strictNullChecks）：

{
  "compilerOptions": {
    "strict": true, // 推荐开启全严格模式
    // 也可以单独开启关键配置：
    // "strictNullChecks": true
  }
}

4. 错误触发与正确处理 #

• 触发错误的场景：未检查user是否存在就直接访问属性

const userId = user._id; // TypeScript会报错：Object is possibly 'undefined'

• 合法的处理方式：
  • 用条件判断收窄类型：

    if (user) {
      const userId = user._id; // 此处user被推断为UserRecord类型，无报错
    }
    

  • 使用可选链操作符：

    const userId = user?._id; // userId类型为string | undefined，无报错
    

如果之前的写法没生效，大概率是因为strictNullChecks未开启——这个配置是TypeScript检测undefined/null访问风险的核心开关。

内容的提问来源于stack exchange，提问作者cjmling