TypeScript：非可选变量为何会出现undefined值及解决方法

为什么非可选变量会变成undefined？ #

核心原因是**any类型绕过了TypeScript的编译时类型检查**，且可能未开启严格空值校验：

• 变量val被声明为string | any，any类型会让TypeScript放弃对它的类型校验，赋值undefined时不会触发警告。
• 尽管data类型要求nonOptional为string，但val的any身份让TypeScript允许将undefined赋值给这个非可选属性，最终导致运行时data.nonOptional变为undefined。

如何避免这种情况？ #

1. 移除any类型，开启严格模式 #

首先不要用any污染类型定义，将val的类型改为明确的string | undefined，同时在tsconfig.json中开启strict: true（包含strictNullChecks等所有严格校验规则）：

{
  "compilerOptions": {
    "strict": true
  }
}

修改后的代码会在编译阶段直接报错，提前拦截问题：

type data = {
  nonOptional: string
  optional?: string
}

var val: string | undefined = "example"
val = undefined

// 编译报错：Type 'undefined' is not assignable to type 'string'.
var data: data = {nonOptional: val};

2. 批量验证非可选属性（无需逐个检查） #

如果需要在运行时验证对象的所有非可选属性有效性，可编写通用验证函数，利用TypeScript类型系统自动识别必填项：

type data = {
  nonOptional: string
  optional?: string
}

// 通用验证函数：检查对象所有非可选属性是否不为null/undefined
function validateRequiredFields<T>(obj: T): asserts obj is Required<T> {
  for (const key in obj) {
    if (obj[key] === undefined || obj[key] === null) {
      throw new Error(`必填属性 ${key} 不能为null或undefined`);
    }
  }
}

var val: string | undefined = "example"
val = undefined

const tempData = {nonOptional: val};
// 验证失败则直接抛出错误
validateRequiredFields(tempData);
// 验证通过后，tempData类型会被收窄为完整的必填类型，可安全赋值
var data: data = tempData;
console.log("nonOptional value: " + data.nonOptional)

该函数会自动遍历对象属性，无需手动逐个检查所有必填项。

3. 用类替代类型（构造时自动验证） #

若场景允许，可通过类定义数据结构，在构造函数中完成必填项校验：

class Data {
  nonOptional: string;
  optional?: string;

  constructor(props: {nonOptional: string; optional?: string}) {
    if (props.nonOptional === undefined || props.nonOptional === null) {
      throw new Error("nonOptional 是必填属性，不能为null或undefined");
    }
    this.nonOptional = props.nonOptional;
    this.optional = props.optional;
  }
}

var val: string | undefined = "example"
val = undefined

// 实例化时直接触发验证，无效则抛出错误
const data = new Data({nonOptional: val});

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