ts-extras类型守卫详解：isPresent与isDefined如何消除null和undefined隐患-拓冰建站

ts-extras类型守卫详解：isPresent与isDefined如何消除null和undefined隐患

【免费下载链接】ts-extrasEssential utilities for TypeScript projects项目地址: https://gitcode.com/gh_mirrors/ts/ts-extras

TypeScript 开发中，处理null和undefined是每个开发者都会遇到的挑战。ts-extras 提供了简单而强大的类型守卫工具，让您轻松消除这些潜在的运行时错误。本文将深入解析isPresent和isDefined这两个核心函数，展示它们如何让您的代码更加安全可靠。

🔍 为什么需要类型守卫？

在 TypeScript 中，类型系统提供了编译时的安全保障，但运行时仍然需要验证数据的有效性。null和undefined是 JavaScript 中常见的"空值"表示，如果不加检查直接使用，很容易导致运行时错误。

ts-extras 的类型守卫函数通过简单的检查，帮助 TypeScript 编译器理解代码的执行路径，从而提供更精确的类型推断。

📦 快速开始 ts-extras

安装 ts-extras 非常简单：

npm install ts-extras

然后就可以在项目中导入并使用：

import { isDefined, isPresent } from 'ts-extras';

🛡️ isDefined：确保值不是 undefined

isDefined函数检查一个值是否不是undefined。它位于 source/is-defined.ts 文件中，实现非常简洁：

export function isDefined<T>(value: T | undefined): value is T { return value !== undefined; }

使用场景示例

import { isDefined } from 'ts-extras'; // 过滤数组中的 undefined 值 const numbers = [1, undefined, 2, undefined, 3]; const definedNumbers = numbers.filter(isDefined); // 结果: [1, 2, 3] // TypeScript 知道 definedNumbers 的类型是 number[] // 条件判断 let user: { name: string } | undefined = getUser(); if (isDefined(user)) { // 在这个作用域内，TypeScript 知道 user 的类型是 { name: string } console.log(user.name); // 安全访问 }

与 Boolean 过滤器的区别

您可能会想："为什么不直接使用.filter(Boolean)？" 问题在于Boolean函数会过滤掉所有"假值"，包括0、false、""（空字符串），而不仅仅是undefined。isDefined更加精确，只过滤undefined。

🛡️ isPresent：确保值既不是 null 也不是 undefined

isPresent函数检查一个值是否既不是null也不是undefined。它位于 source/is-present.ts 文件中：

export function isPresent<T>(value: T): value is NonNullable<T> { return value !== null && value !== undefined; }

使用场景示例

import { isPresent } from 'ts-extras'; // 过滤数组中的 null 和 undefined 值 const data = [1, null, 2, undefined, 3]; const presentData = data.filter(isPresent); // 结果: [1, 2, 3] // TypeScript 知道 presentData 的类型是 number[] // 处理可能为 null 或 undefined 的值 function processValue(value: string | null | undefined) { if (isPresent(value)) { // 在这个作用域内，TypeScript 知道 value 的类型是 string return value.toUpperCase(); // 安全调用方法 } return "默认值"; }

🚨 断言函数：运行时保障

ts-extras 还提供了对应的断言函数，当值不满足条件时会抛出错误：

assertDefined

位于 source/assert-defined.ts：

import { assertDefined } from 'ts-extras'; function getUserData(id: string) { const data = fetchData(id); assertDefined(data, `无法获取用户 ${id} 的数据`); // 这里 TypeScript 知道 data 不是 undefined return process(data); }

assertPresent

位于 source/assert-present.ts：

import { assertPresent } from 'ts-extras'; function processInput(input: string | null) { assertPresent(input, "输入不能为空"); // 这里 TypeScript 知道 input 是 string 类型 return input.trim(); }

🎯 实际应用场景

场景一：API 响应处理

interface ApiResponse<T> { data?: T; error?: string; } function handleResponse<T>(response: ApiResponse<T>): T { if (!isPresent(response.data)) { throw new Error(response.error || "未知错误"); } return response.data; // TypeScript 知道 response.data 不是 null 或 undefined }

场景二：表单验证

interface FormData { name?: string; email?: string | null; age?: number; } function validateForm(data: FormData) { const errors: string[] = []; if (!isPresent(data.name)) { errors.push("姓名不能为空"); } if (!isPresent(data.email)) { errors.push("邮箱不能为空"); } return errors; }

场景三：配置处理

interface Config { apiUrl?: string; timeout?: number; retries?: number | null; } function getApiConfig(config: Config) { const apiUrl = config.apiUrl ?? "https://api.example.com"; const timeout = isPresent(config.timeout) ? config.timeout : 5000; const retries = isPresent(config.retries) ? config.retries : 3; return { apiUrl, timeout, retries }; }

📊 性能考虑

这些类型守卫函数非常轻量，运行时开销几乎可以忽略不计。它们只是简单的条件检查，编译后的 JavaScript 代码非常简洁：

// isDefined 编译后 function isDefined(value) { return value !== undefined; } // isPresent 编译后 function isPresent(value) { return value !== null && value !== undefined; }