TypeScript 进阶必修课:解锁强大的内置工具类型(二)

核心工具类型(二)

1. Exclude<T, U>: 排除联合类型成员

  • 作用: 从联合类型 T 中排除所有可分配给 U 的成员。

  • 示例:

    typescript 复制代码
    type AllPossibleId = number | string | boolean | undefined;
    
    // 我只想要非数字的 ID 类型
    type NonNumericId = Exclude<AllPossibleId, number>;
    // 结果是:type NonNumericId = string | boolean | undefined;
    
    // 排除 null 和 undefined
    type ValidStatus = Exclude<"active" | "inactive" | null | undefined, null | undefined>;
    // 结果是:type ValidStatus = "active" | "inactive";

2. Extract<T, U>: 提取联合类型成员

  • 作用: 从联合类型 T 中提取所有可分配给 U 的成员。

  • 示例:

    typescript 复制代码
    type AllPossibleValue = string | number | boolean | object;
    
    // 我只想要可以被序列化为 JSON 的原始类型
    type JsonPrimitive = Extract<AllPossibleValue, string | number | boolean>;
    // 结果是:type JsonPrimitive = string | number | boolean;

3. NonNullable<T>: 移除 nullundefined

  • 作用: 从类型 T 中排除 nullundefined

  • 示例:

    typescript 复制代码
    type MaybeString = string | null | undefined;
    
    // 确定其不为空后,可以获取其非空类型
    type GuaranteedString = NonNullable<MaybeString>;
    // 结果是:type GuaranteedString = string;
    
    function processString(text: GuaranteedString) {
        console.log(text.length); // ✅ 不会报错,因为 text 保证不是 null 或 undefined
    }
    
    const myText: MaybeString = "Hello";
    if (myText !== null && myText !== undefined) {
        processString(myText); // myText 在这里被收窄为 string
    }

4. ReturnType<T>: 获取函数返回类型

  • 作用: 获取函数类型 T 的返回类型。

  • 示例:

    typescript 复制代码
    function getUserData(id: number, name: string) {
        return { id, name, isAdmin: id === 1 };
    }
    
    // 获取 getUserData 函数的返回类型
    type UserData = ReturnType<typeof getUserData>;
    /* 等同于:
    type UserData = {
        id: number;
        name: string;
        isAdmin: boolean;
    }
    */
    
    const currentUser: UserData = {
        id: 5,
        name: 'Sarah',
        isAdmin: false,
    };

5. Parameters<T>: 获取函数参数类型

  • 作用: 获取函数类型 T 的参数类型,以元组的形式。

  • 示例:

    typescript 复制代码
    function greet(firstName: string, lastName?: string): string {
        return `Hello, ${firstName} ${lastName || ""}`;
    }
    
    // 获取 greet 函数的参数类型元组
    type GreetParams = Parameters<typeof greet>;
    // 结果是:type GreetParams = [firstName: string, lastName?: string | undefined];
    
    
    function callGreet(...args: GreetParams) {
         // 可以在这里对参数进行一些处理
         return greet(...args);
    }
    
    console.log(callGreet("John", "Doe")); // "Hello, John Doe"
    console.log(callGreet("Jane")); // "Hello, Jane "

总结

如果你喜欢本教程,记得点赞+收藏!关注我获取更多JavaScript/TypeScript开发干货

相关推荐
艾小码1 分钟前
别再开无效复盘会了!前端工程师这样复盘,成长速度快人一步
前端
苏无逢1 小时前
CSS基础查缺补漏(持续更新补充)
前端·css
翻斗花园刘大胆2 小时前
JavaWeb之快递管理系统(完结)
java·开发语言·前端·jvm·spring·servlet·java-ee
正义的大古2 小时前
OpenLayers地图交互 -- 章节四:修改交互详解
前端·javascript·vue.js
深耕AI3 小时前
【9/10】前端认证整合:Vue.js 中处理 JWT,实现登录页面和受保护路由
前端·javascript·vue.js
摩羯座-185690305946 小时前
VVIC 平台商品详情接口高效调用方案:从签名验证到数据解析全流程
java·前端·数据库·爬虫·python
木觞清7 小时前
补环境-JS原型链检测:在Node.js中完美模拟浏览器原型环境
开发语言·javascript·node.js
我是华为OD~HR~栗栗呀7 小时前
华为od-前端面经-22届非科班
java·前端·c++·后端·python·华为od·华为
知识分享小能手7 小时前
React学习教程,从入门到精通,React Router 语法知识点及使用方法详解(28)
前端·javascript·学习·react.js·前端框架·vue·react
黄毛火烧雪下7 小时前
React中Class 组件 vs Hooks 对照
前端·javascript·react.js