首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在typescript中实现回调返回类型的类型保护?

在 TypeScript 中,回调函数的返回类型可以通过使用类型谓词(Type Predicate)来实现类型保护。类型谓词是一种特殊的函数返回类型,它告诉 TypeScript 编译器某个函数能够确切地返回一个特定类型的值。

以下是一个简单的例子,展示了如何在 TypeScript 中实现回调返回类型的类型保护:

代码语言:txt
复制
interface Bird {
    fly(): void;
}

interface Fish {
    swim(): void;
}

type Animal = Bird | Fish;

// 类型谓词函数
function isBird(animal: Animal): animal is Bird {
    return (animal as Bird).fly !== undefined;
}

// 使用类型谓词的回调函数
function doSomething(animal: Animal, callback: (isBird: boolean) => void): void {
    if (isBird(animal)) {
        // 在这个代码块中,TypeScript 知道 animal 是 Bird 类型
        animal.fly();
        callback(true);
    } else {
        // 在这个代码块中,TypeScript 知道 animal 是 Fish 类型
        animal.swim();
        callback(false);
    }
}

// 示例使用
const bird: Bird = { fly: () => console.log("Flying...") };
const fish: Fish = { swim: () => console.log("Swimming...") };

doSomething(bird, (isBird) => {
    console.log("Is bird?", isBird); // 输出: Is bird? true
});

doSomething(fish, (isBird) => {
    console.log("Is bird?", isBird); // 输出: Is bird? false
});

在这个例子中,isBird 函数是一个类型谓词,它接受一个 Animal 类型的参数,并返回一个布尔值。当返回 true 时,TypeScript 编译器知道传入的 animal 参数实际上是 Bird 类型;当返回 false 时,则是 Fish 类型。

doSomething 函数中,我们使用了 isBird 类型谓词来检查 animal 的类型,并根据检查结果执行不同的逻辑。这样,我们就可以在回调函数中准确地知道 animal 的类型,并安全地调用其方法。

这种方法的优点是它提供了编译时的类型安全,减少了运行时错误的可能性,并且提高了代码的可读性和可维护性。

参考链接:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

利用函数类型实现封装

当进行业务逻辑开发时候,经常要进行封装,封装成独立类文件,在类文件属性预留出函数类型API 在调用该类文件某些方法时候,也根据业务需要调用类属性函数, 在主业务可以传递特定函数注册到属性...package main import "log" func main() { c := NewConn(callback, callback2) c.Start() } //在当前模块定义函数...,调类主模块函数 package main type Connection struct{ handleFunc func() handleFunc2 func(name string...)string } //把被函数注册进了封装类属性 func NewConn(callback func(),callback2 func(name string)string) *Connection...Connection{ handleFunc: callback, handleFunc2: callback2, } return c } //在进行某些业务时也把函数执行了

2.4K10

实现TypeScript互斥类型

此时,你会怎么用TypeScript来定义这个类型?本文将带大家实现一个互斥类型来解决这个问题,欢迎各位感兴趣开发者阅读本文。 前置知识 在实现之前,我们需要先来了解几个基础知识。...: string }; never类型TypeScript它有一个特殊类型never,它是所有类型类型,无法再进行细分,也就意味着除了其本身没有类型可以再分配给它。...接下来,我们来梳理下实现思路: 实现一个排除类型,用于从A对象类型剔除B对象类型属性,并将排除后属性类型设为never,得到一个新对象类型。...实现代码 接下来,我们来看下代码实现,如下所示: // 定义排除类型:将U从T剔除, keyof 会取出T与U所有键, 限定P取值范围为T所有键, 并将其类型设为never type Without...> & T); 注意:为了类型可复用性,我们使用了泛型,对此不熟悉开发者请移步:TypeScript中文网——泛型 测试用例 我们将文章开头所说问题代入上述实现代码,看一下它能否将其解决,如下所示

3.1K40
  • 何在 TypeScript 中使用函数

    在本节,我们将学习如何创建函数类型,它们是表示特定函数签名类型。在将函数传递给其他函数时,创建与特定函数匹配类型特别有用,例如,具有本身就是函数参数。这是创建接受函数时常见模式。...举一个更具体例子,假设我们正在创建一个名为 onEvent 事件侦听器函数,它接收事件名称作为第一个参数,第二个参数接收事件。...在 JavaScript ,这通常是通过有一个参数来完成,该参数可以采用不同类型值,字符串或数字。将多个实现设置为相同函数名称称为函数重载。...现在,当我们将鼠标悬停在这些函数上时,将为每个重载显示注释,如下面的动画所示: 用户定义类型保护 本教程将检查 TypeScript 函数最后一个特性是用户定义类型保护,它们是允许 TypeScript...结论 函数是 TypeScript 应用程序构建块,在本教程,我们学习了如何在 TypeScript 构建类型安全函数,以及如何利用函数重载来更好地记录单个函数所有变体。

    15K10

    分享 30 道 TypeScript 相关面的面试题

    在当今 Web 开发世界TypeScript 作为一种强大工具为自己赢得了一席之地,它弥补了 JavaScript 灵活性和静态类型语言鲁棒性之间差距(至少在 JavaScript 实现自己类型之前...19、如何在 TypeScript 中使用类型断言?何时需要它? 答案:TypeScript 类型断言是一种告诉编译器将变量视为某种类型方法。这就像其他语言中类型转换。...是一个逻辑运算符,当其左侧操作数为空或未定义时返回其右侧操作数,否则返回其左侧操作数。这在您想要回退到默认值情况下非常有用。 22、什么是映射类型,以及如何在 TypeScript 中使用它们?...答:TypeScript 类型推断是指编译器在没有显式类型注释情况下自动推断和分配类型能力。虽然鼓励显式类型,但编译器会尽可能使用上下文(变量初始化、返回语句等)来推断类型。...自定义类型保护是一个函数,其返回类型是使用 is 关键字缩小类型类型谓词,例如 function isFish(pet: Fish | Bird): pet is Fish。

    77830

    详细介绍 TypeScript 函数各种特性、用法和最佳实践

    函数定义和调用在 TypeScript ,我们可以使用 function 关键字来定义一个函数。函数定义包括函数名、参数列表和返回类型。...console.log(subtract(5, 3)); // 输出:2函数类型函数在 TypeScript ,函数也可以作为一种类型来使用。...例如,当我们需要在异步操作完成后执行某个函数时,可以使用函数类型来声明函数参数类型。...;上述代码演示了如何使用函数类型声明一个接受函数作为参数函数。fetchData 函数模拟异步操作获取数据,并在操作完成后调用传入函数。...总结本文详细介绍了 TypeScript 函数各种特性,包括定义和调用函数、可选参数和默认参数、剩余参数、函数重载、箭头函数以及函数类型函数。

    40120

    不使用回函数ajax请求实现(async和await简化函数嵌套)

    以最简单前端ajax请求为例 代码先输出1,再输出2,整个程序执行流程并未因http请求而被阻塞,函数方案完美的把问题解决。 然而,这只是最简单函数示例,假如函数嵌套了许多层呢?...当函数被声明为async类型时,如果这个函数要有返回值 ,并且返回值要在某个函数获得,那么这个函数返回结果就只能是一个 Promise对象,就像示例ajax函数一样,返回值如果是其它类型那就达不到期望效果...因为没辙啊, 试想一下,ajax函数中使用return语句, 意义何在?因此也只能变向通过Promise将返回值扔给外部调用者。...所以,使用async和await第一个要点就是 当函数要获得异步结果时,可以函数声明为async类型, 函数返回值设为Promise类型对象,而Promiseresolve和reject是用来向...另一种方法是在调用函数时加上await关键字,await意义就在于接收async函数Promise对象resolve和reject传递值 ,而且除非resolve和reject这两个函数在函数中被调用到了

    2.8K50

    Typescript 使用日志(干货)

    •联合类型,不确定类型是哪个,但能提供几种选择,:type1 | type2。•交叉类型,必须满足多个类型组合,:type1 & type2。...•对象兼容•函数返回值兼容•函数参数列表兼容•函数参数结构兼容•类兼容•泛型兼容 在 Typescript 是通过结构体来判断兼容性,如果两个结构体一致,就直接兼容了,但如果不一致,Typescript...mouse 类型,所以在函数,我们是知道返回参数一定是一个 MouseEvent 类型,这样是符合逻辑,但由于 MouseEvent 类型属性是多于 Event 类型,所以说 Typescript...那么问题来了,我们怎么去确定运行时到底是什么类型? 答:类型保护类型保护是针对于联合类型,让我们能够通过逻辑判断,确定最终类型,是来自联合类型哪个类型。...实战优点: 1、发现 es 规范弃用方法,:Date.toGMTString。 2、避免了一些不友好开发代码,:动态给 obj 添加属性。

    2.5K10

    void 在 JS 和 TS 区别

    void 作为运算符存在于 JavaScript ,而作为基本类型存在于 TypeScript 。在这两个世界,void 工作机制与大多数人习惯有点不同。...button.onclick = () => void doSomething(); TypeScript void TypeScript void 是 undefined 类型。...undefined,而 void 总是在 JavaScript 返回 undefined,TypeScript void 是一个正确类型,告诉开发人员这个函数返回 undefined: declare...虽然有一点点不同,但这种差别很大:作为返回类型 void 可以用不同类型替换,以允许高级模式: function doSomething(callback: () => void) { let...如果你想确保传递只返回 undefined 函数(“nothing”),请确保调整你方法签名: - function doSomething(callback: () => void) { +

    4K20

    【文末送书】Typescript 使用日志

    •对象兼容•函数返回值兼容•函数参数列表兼容•函数参数结构兼容•类兼容•泛型兼容 在 Typescript 是通过结构体来判断兼容性,如果两个结构体一致,就直接兼容了,但如果不一致,Typescript...函数返回兼容,采用是协变。...mouse 类型,所以在函数,我们是知道返回参数一定是一个 MouseEvent 类型,这样是符合逻辑,但由于 MouseEvent 类型属性是多于 Event 类型,所以说 Typescript...那么问题来了,我们怎么去确定运行时到底是什么类型? 答:类型保护类型保护是针对于联合类型,让我们能够通过逻辑判断,确定最终类型,是来自联合类型哪个类型。...实战优点: 1、发现 es 规范弃用方法,:Date.toGMTString。 2、避免了一些不友好开发代码,:动态给 obj 添加属性。

    2.9K10

    Web前端面试敲重点知识,14个TypeScript核心基础面试题和答案

    6、TypeScript 声明变量有哪些不同关键字? 7、如何书写带有类型注释函数 ? 8、如何在 TypeScript 创建对象 ? 9、如何在 TypeScript 中指定可选属性 ?...TypeScript 具有三种常用基本类型:字符串、数字和布尔值,这些对应于 JavaScript 类似命名类型。...void 表示变量没有类型,它充当与任何相反类型,它在不返回函数特别有用 如果变量是 void 类型,则只能将 null 或 undefined 值分配给该变量。...函数是执行特定代码代码块 函数可以有选择地接受一个或多个参数,处理它们,并有选择地返回一个值。 image.png 8、如何在 TypeScript 创建对象 ?...protected:受保护成员仅对包含该成员子类可见。不扩展容器类外部代码无法访问受保护成员。 private:私有成员仅在类内部可见,没有外部代码可以访问类私有成员。

    11.5K10

    JS和TSvoid

    void 作为运算符存在于 JavaScript ,而作为基本类型存在于 TypeScript 。在这两个世界,void 工作机制与大多数人习惯有点不同。...undefined,而 void 总是计算它旁边表达式,你有一个非常简洁方法从函数返回而不返回一个值,但仍然调用一个例如: // returning something else than undefined...undefined,而 void 总是在 JavaScript 返回 undefined,TypeScript void 是一个正确类型,告诉开发人员这个函数返回 undefined: declare...虽然有一点点不同,但这种差别很大:作为返回类型 void 可以用不同类型替换,以允许高级模式: function doSomething(callback: () => void) { let...如果你想确保传递只返回 undefined 函数(“nothing”),请确保调整你方法签名: - function doSomething(callback: () => void) { +

    6.3K10

    React实战精讲(React_TSAPI)

    你能所学到知识点 ❝ TS_React:使用泛型来改善类型 TS_React:Hook类型化 TS_React:类型化事件 React API ❞ TS_React:使用泛型来改善类型 TypeScript...useEffect里面的应该是什么都不返回,或者是一个会清理任何副作用Destructor函数(「析构函数」,这个词借用了C++说法) ---- 类型化 useMemo 和 useCallback...---- 类型化自定义hook ❝「类型化自定义hook基本上和类型化普通函数一样」 ❞ ---- TS_React:类型化事件 类型化「事件处理程序参数」 类型化「事件处理程序本身」 依靠「类型推断...Children.forEach并不会返回值,而是停留在遍历阶段 Children.count Children.count:返回Child总个数,等于传递给map或forEach将被调用次数...:与memo理念上差不多,都是判断是否满足「当前限定条件」来决定是否执行callback函数,而useMemo第二个参数是一个「数组」,通过这个数组来判定是否执行函数 ❝当一个父组件调用了一个子组件时候

    10.4K30

    Angular12个经典问题,看看你能答对几个?(文末附带Angular测试)

    如何实现不出现编辑器警告自定义类型? 在大多数情况下,第三方库都带有它.d.ts 文件,用于类型定义。...在某些情况下,我们需要通过向现有类型提供一些更多属性来扩展现有类型,或者如果我们需要定义其它类型以避免TypeScript警告。...要定义应用程序(JavaScript / Typescript)对象类型,我们应该在应用程序相应模块models文件夹,定义接口和实体类。...对于这些情况,我们可以通过创建我们自己“ .d.ts”文件来实现定义或扩展类型。...如果服务器HTTP请求结果或其它一些异步操作不再需要,则Observable订阅者可以取消订阅,而Promise将最终调用成功或失败,即使你不需要通知或其提供结果。

    17.3K80

    带你体验一次类型编程实践

    写作背景: 在看 uniapp 教程时看到大量 API 还是使用 callback 方式来接收 API 执行结果,大量 API 嵌套使用又会造成地狱现象出现,在 API Promise...api 成功失败所对应函数。...,切记返回是函数还没有执行,遇到了多少写防抖节流小伙伴是忘了执行还各个群里问 why ~ 发挥TypeScript类型强大之处: Typescript内置类型工具: Parameters:提取函数类型参数所组成类型列表...Promise 对象类型约束:这里只能通过泛型约束成功状态类型,成功状态类型实际上是 uniapp api 选项 success 属性(函数)返回类型。...我们需要先提取到 success 属性,然后再次使用内置类型工具(1)来提取回函数返回类型

    36230

    手撕钉钉前端面试题

    // 因此称这种现象为 地狱 // .... }); }); }); }); 函数不能通过 return 返回数据,比如我们希望调用带有参数函数并返回异步执行结果时...: 使用者函数设计没有进行错误捕获,而恰恰三方库进行了错误捕获却没有抛出错误处理信息,此时使用者很难感知到自己设计函数是否有错误 使用者难以感知到三方库时机和次数,这个函数执行权利控制在三方库手中...HTTP 请求,第一个请求接口返回数据是第二个请求接口参数,使用回函数实现方式如下所示(这里使用 setTimeout 来指代异步请求): // 地狱 const doubble = (...: 调用 async 函数后返回是一个 Promise 对象,通过 then 可以拿到 async 函数内部 return 语句返回值 调用 async 函数后返回 Promise 对象必须等待内部所有...#### 44、 TypeScript ?.、??、!.、_、** 等符号含义? #### 45、 TypeScript 预定义有条件类型有哪些?

    3K20

    TypeScript 官方手册翻译计划【十一】:类型操控-模板字面量类型

    同理,和 age 相关联事件函数在被调用时候应该接受一个 number 类型参数。...不过,从上面的描述来看,我们发现代码还需要实现很重要类型约束。而模板字面量类型正好就可以帮助我们做到这一点。...同理,age 改变时候,对应函数也会接受一个 number 类型参数。但目前,我们仅仅只是用 any 作为函数参数类型而已。...这里我们需要再次使用模板字面量类型,它可以确保属性数据类型和属性对应函数参数类型保持一致。...实现这一点关键在于:我们可以使用一个带有泛型函数,从而确保: 第一个参数字面量可以被捕获为一个字面量类型 泛型有效属性会构成一个联合类型,可以验证捕获字面量类型是否是该联合类型一个成员 可以在泛型结构通过按索引访问方式去查看已验证属性类型

    91080

    TypeScript很麻烦,不想使用!

    一、类型复用不足 在代码审查过程,我发现了大量重复类型定义,这显著降低了代码复用性。 进一步交流后,我了解到许多团队成员并不清楚如何在TypeScript复用类型。...提供工具类型Omit来更高效地实现这种复用。...: T; /** * 当组件值变化时函数 */ onChange: (value: T) => void; } 基于这些基础类型,定义具体组件属性类型变得简单而直接: interface...通过函数重载,我们可以在同一函数名下定义多个函数实现,根据不同参数类型、数量或返回类型进行区分。...如果你在使用TypeScript过程遇到任何问题,不清楚应该使用哪种语法或技巧来解决,欢迎在评论区留言。我们一起探讨,共同解决TypeScript遇到挑战。

    23610
    领券