0

0

TypeScript 函数交叉类型与返回类型推断:深入理解与解决方案

DDD

DDD

发布时间:2025-10-17 10:14:08

|

517人浏览过

|

来源于php中文网

原创

typescript 函数交叉类型与返回类型推断:深入理解与解决方案

在 TypeScript 中,当处理函数交叉类型时,其行为等同于函数重载。然而,在实际调用这类函数时,TypeScript 会根据参数匹配度选择最合适的(通常是第一个)签名来确定返回类型;而在使用 `infer` 进行类型推断时,它却倾向于从最后一个函数签名进行推断,这导致了返回类型的不一致。本文将深入探讨这一现象,并提供重构建议,以确保类型推断的准确性和一致性。

理解函数交叉类型与函数重载

在 TypeScript 中,函数交叉类型(Intersection Types for Functions)的行为与函数重载(Function Overloads)非常相似。一个由多个函数类型通过 & 符号连接而成的交叉类型,会被 TypeScript 解释为一个具有多个调用签名(Call Signatures)的重载函数。

考虑以下示例:

type Foo = (() => Promise) & (() => Promise);
type Foo2 = (() => Promise) & (() => Promise);

在这里,Foo 和 Foo2 都被视为具有两个调用签名的重载函数。关键在于,TypeScript 处理重载函数时,在调用和类型推断方面存在不同的行为模式。

调用时的返回类型解析

当您实际调用一个重载函数时,TypeScript 会根据传入的参数类型,选择“最合适”的调用签名来确定函数的返回类型。在没有参数或参数类型相同的情况下,通常会选择第一个匹配的签名。

例如:

// 示例1: Foo 类型
type Foo = (() => Promise) & (() => Promise);

const a: Foo = async () => {
    return "";
};

const b = await a();
// 实际调用时,b 的类型被推断为 string
// 这是因为 (() => Promise) 是第一个签名,且匹配成功。
//    ^? const b: string

在 Foo 类型中,(() => Promise) 是第一个签名。因此,当 a 被调用时,其返回类型被解析为 Promise,解包后 b 的类型是 string。

// 示例2: Foo2 类型
type Foo2 = (() => Promise) & (() => Promise);

const c: Foo2 = async () => {
    return "";
};

const d = await c();
// 实际调用时,d 的类型被推断为 any
// 这是因为 (() => Promise) 是第一个签名,且匹配成功。
//    ^? const d: any

类似地,在 Foo2 类型中,(() => Promise) 是第一个签名。因此,当 c 被调用时,其返回类型被解析为 Promise,解包后 d 的类型是 any。

使用 infer 进行类型推断时的行为

与调用行为不同,当您尝试使用条件类型中的 infer 关键字(例如通过 ReturnType 工具类型)从一个重载函数类型中提取返回类型时,TypeScript 通常会从最后一个调用签名进行推断。这是一个已知的 TypeScript 设计限制。

继续上面的示例:

// 示例1: Foo 类型
type Foo = (() => Promise) & (() => Promise);

type FooResult = Foo extends () => Promise ? T : null;
// 使用 infer 时,FooResult 的类型被推断为 any
// 这是因为 (() => Promise) 是 Foo 类型中的最后一个签名。
//    ^? type FooResult = any

这里,FooResult 被推断为 any,与 b 的实际类型 string 产生了不匹配。

PictoGraphic
PictoGraphic

AI驱动的矢量插图库和插图生成平台

下载
// 示例2: Foo2 类型
type Foo2 = (() => Promise) & (() => Promise);

type FooResult2 = Foo2 extends () => Promise ? T : null;
// 使用 infer 时,FooResult2 的类型被推断为 string
// 这是因为 (() => Promise) 是 Foo2 类型中的最后一个签名。
//    ^? type FooResult2 = string

同样,FooResult2 被推断为 string,与 d 的实际类型 any 产生了不匹配。

这种调用时取第一个签名、推断时取最后一个签名的行为,正是导致类型不一致的根本原因。

解决方案与重构建议

为了避免这种不一致性,并确保类型推断的准确性,最佳实践是尽量避免使用参数类型完全相同的函数交叉类型来模拟重载。如果您的函数没有不同的参数签名来区分不同的重载,那么它可能不适合作为重载函数处理。

1. 使用单一明确的函数签名

如果您的目标是获得一个明确的返回类型,并且函数没有真正的重载逻辑(即不同的参数导致不同的行为),那么应该直接使用一个单一的函数签名来表示其类型。

例如,如果您期望函数始终返回 Promise,则应明确定义:

type MyFunctionType = () => Promise;

const myFunc: MyFunctionType = async () => {
    return "hello";
};

type MyFuncResult = MyFunctionType extends () => Promise ? T : null;
//    ^? type MyFuncResult = string

const result = await myFunc();
//    ^? const result: string

这样,MyFuncResult 和 result 的类型将保持一致。

2. 显式定义交叉返回类型

如果您确实希望函数的返回类型是多个类型的交叉,那么不应该通过交叉函数类型来实现,而是直接在单一的函数签名中定义一个交叉的返回类型。

// 错误的示例:试图通过函数交叉类型获得交叉返回类型
type BadAttempt = (() => { a: string }) & (() => { b: number });

type BadRet = ReturnType;
//    ^? type BadRet = { b: number; } // 仅推断出最后一个签名

const badCall = ((): BadAttempt => {
    return { a: "", b: 1 };
})();
//    ^? const badCall: { a: string; } // 实际调用得到第一个签名

// 正确的示例:直接在单一函数签名中定义交叉返回类型
type CorrectFunction = () => { a: string } & { b: number };

const correctFunc: CorrectFunction = () => {
    return { a: "", b: 1 };
};

type CorrectRet = ReturnType;
//    ^? type CorrectRet = { a: string; } & { b: number; }

const correctCall = correctFunc();
//    ^? const correctCall: { a: string; } & { b: number; }

通过这种方式,CorrectRet 和 correctCall 的类型将完全一致,都反映了 string 和 number 的交叉类型。

总结与最佳实践

  • 函数交叉类型即重载: (() => T) & (() => U) 等同于一个重载函数,其行为受 TypeScript 重载规则的约束。
  • 调用与推断的不一致: 调用重载函数时通常匹配第一个签名;使用 infer 推断时通常匹配最后一个签名。这是导致类型不一致的核心原因。
  • 避免无意义的重载: 如果您的函数没有通过参数类型区分的真正重载逻辑,应避免使用函数交叉类型。
  • 使用单一明确的签名: 大多数情况下,直接使用一个单一的函数签名来定义其输入和输出类型,是确保类型一致性和可预测性的最佳方法。
  • 显式交叉返回类型: 如果需要一个包含多个属性的交叉返回类型,请直接在函数的返回类型中声明这个交叉类型,而不是通过交叉函数类型来间接实现。

通过遵循这些原则,您可以有效地管理 TypeScript 中的函数类型,避免由重载和 infer 行为差异引起的潜在类型问题,从而编写出更健壮、更易于理解的代码。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
string转int
string转int

在编程中,我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算,或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

443

2023.08.02

function是什么
function是什么

function是函数的意思,是一段具有特定功能的可重复使用的代码块,是程序的基本组成单元之一,可以接受输入参数,执行特定的操作,并返回结果。本专题为大家提供function是什么的相关的文章、下载、课程内容,供大家免费下载体验。

483

2023.08.04

js函数function用法
js函数function用法

js函数function用法有:1、声明函数;2、调用函数;3、函数参数;4、函数返回值;5、匿名函数;6、函数作为参数;7、函数作用域;8、递归函数。本专题提供js函数function用法的相关文章内容,大家可以免费阅读。

163

2023.10.07

promise的用法
promise的用法

“promise” 是一种用于处理异步操作的编程概念,它可以用来表示一个异步操作的最终结果。Promise 对象有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。Promise的用法主要包括构造函数、实例方法(then、catch、finally)和状态转换。

306

2023.10.12

html文本框类型介绍
html文本框类型介绍

html文本框类型有单行文本框、密码文本框、数字文本框、日期文本框、时间文本框、文件上传文本框、多行文本框等等。详细介绍:1、单行文本框是最常见的文本框类型,用于接受单行文本输入,用户可以在文本框中输入任意文本,例如用户名、密码、电子邮件地址等;2、密码文本框用于接受密码输入,用户在输入密码时,文本框中的内容会被隐藏,以保护用户的隐私;3、数字文本框等等。

406

2023.10.12

俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

167

2026.01.28

包子漫画在线官方入口大全
包子漫画在线官方入口大全

本合集汇总了包子漫画2026最新官方在线观看入口,涵盖备用域名、正版无广告链接及多端适配地址,助你畅享12700+高清漫画资源。阅读专题下面的文章了解更多详细内容。

35

2026.01.28

ao3中文版官网地址大全
ao3中文版官网地址大全

AO3最新中文版官网入口合集,汇总2026年主站及国内优化镜像链接,支持简体中文界面、无广告阅读与多设备同步。阅读专题下面的文章了解更多详细内容。

74

2026.01.28

php怎么写接口教程
php怎么写接口教程

本合集涵盖PHP接口开发基础、RESTful API设计、数据交互与安全处理等实用教程,助你快速掌握PHP接口编写技巧。阅读专题下面的文章了解更多详细内容。

2

2026.01.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
TypeScript 教程
TypeScript 教程

共19课时 | 2.5万人学习

TypeScript——十天技能课堂
TypeScript——十天技能课堂

共21课时 | 1.1万人学习

TypeScript-45分钟入门
TypeScript-45分钟入门

共6课时 | 0.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号