2.6 void、null、undefined - 全栈应用开发修炼手册课程

🎯 学习目标

理解 void 类型的作用和使用场景
掌握 null 和 undefined 的区别
了解严格空值检查的影响
学会正确处理空值

🔄 void 类型

void 表示没有类型，常用于函数没有返回值的情况。

// 函数没有返回值
function log(message: string): void {
  console.log(message);
}

// 返回 void 的函数可以返回 undefined 或 null（取决于配置）
function returnNothing(): void {
  return;  // 或 return undefined
}

// 变量声明 void 没有实际意义
let unusable: void = undefined;
      

💡

void vs undefined

void 用于描述函数返回值类型，表示"无返回值"；undefined 是一个具体的值。函数返回 void 时，实际返回的是 undefined。

🈳 null 和 undefined

// null 表示"空值"
let empty: null = null;

// undefined 表示"未定义"
let notDefined: undefined = undefined;

// 默认情况下，它们是所有类型的子类型
let num: number = null;       // 非严格模式下 OK
let str: string = undefined;  // 非严格模式下 OK

// 严格模式下（strictNullChecks: true）
let strictNum: number = null;       // Error
let strictStr: string = undefined;  // Error

// 需要显式包含 null/undefined
let maybeNum: number | null = null;
let maybeStr: string | undefined = undefined;
      

📊 类型对比

类型	含义	典型使用场景
`void`	无类型	函数无返回值
`null`	空值	表示"有值但为空"
`undefined`	未定义	表示"值不存在"

🔒 严格空值检查

// 开启 strictNullChecks 后
interface User {
  name: string;
  email: string | null;  // email 可能为 null
}

function getEmail(user: User): string {
  // 需要处理 null 的情况
  if (user.email === null) {
    return '未设置邮箱';
  }
  return user.email;
}

// 可选链操作符
function getEmailLength(user: User): number {
  return user.email?.length ?? 0;
}

// 空值合并运算符
function getDisplayName(user: User): string {
  return user.name ?? '匿名用户';
}
      

⚠️

推荐配置

建议在 tsconfig.json 中启用 strict: true 或至少启用 strictNullChecks: true，避免空值相关的运行时错误。

📝 本节小结

✅

• void 用于函数无返回值的类型声明
• null 表示"空值"，undefined 表示"未定义"
• 严格模式下 null/undefined 不是所有类型的子类型
• 使用可选链(?.)和空值合并(??)处理空值