前言

方法重载在传统的静态类型语言中非常常见。作为一种动态语言，JavaScript是不会重载的。第一，它的参数没有类型区分，第二，参数个数没有检查。虽然语言层面不能自动重载，但凭借其动态特性，我们可以手动检查代码中的参数类型，或者通过参数获取参数个数，从而根据不同的参数实现不同的操作。

例如，有一种获取聊天消息的方法，它根据传入的参数从数组中查找数据。如果输入参数是数字，则认为是id，然后从数据源中找到id对应的数据并返回；否则，如果它被认为是一种类型，则返回这种类型的消息。

函数getMessage(query){ if(type of query==' nunber '){ return data . find(message=message . id===query)；} else { return data . filter(message=message . type===query)；}}TypeScript，如果我们的消息数据具有以下结构：

type MessageType=' string ' | ' image ' | ' audio '；消息类型={ id:号码；type: MessageTypecontent:字符串；};上述获取数据的方法相当于：

函数getMessage(query : number | MessageType): Message[]| Message | undefined { if(type of query==' number '){ return data . find(Message=Message . id===query)；} else { return data . filter(message=message . type===query)；}}这在类型编写上比较难看，没有充分发挥TypeScript类型检查的优势。在这里，我们可以根据输入的类型清楚地知道返回的类型，即如果传入id，则返回单个数据或undefined，如果按类型搜索，则返回一个数组。现在，调用方法后，得到的类型太宽泛，这与使用any作为返回没有太大区别。

函数返回类型不够紧凑

由于类型不明确，返回的结果不能直接操作，需要进行类型转换后才能继续。

const result 1=Getmessage(' audio ')；/* *数组方法*/console . log((result 1 smessage[])。length)不能直接在result1上调用；const result 2=Getmessage(1)；If (result2) {/**无法直接访问属性*/console . log((result 2 smessage))。内容);}重载实现

此时，可以通过提供多个函数类型声明来解决上述问题，最终的结果是函数被间接重载。当然，只有在编译TypeScript时，才会出现这种重载。

函数getMessage(id:数字): Message | undefined函数getMessage(type : Message type): Message[]；函数getMessage(query : any): any { if(type of query==' number '){ return data . find(message=message . id===query)；} else { return data . filter(message=message . type===query)；}}这个转换之后，我们调用的时候，会直接出现重载提示。

重载后调用TypeScript时实现自动提示

并且得到的结果类型是重载方法中指定的输入和返回的组合，所以使用结果时不需要进行类型转换。

const result 1=Getmessage(' audio ')；/* *不需要类型转换*/console . log(result 1 . length)；const result 2=Getmessage(1)；If (result2) {/**不需要类型转换*/console . log(result 2 . content)；}这里需要理解的是，上面添加的函数类型只是在编译时作为TypeScript使用，并没有像传统的静态类型语言那样真正实现重载，也没有改变编译后代码的输出。实际的运行时仍然是没有重载的JavaScript版本。

编译代码

但是这并不影响我们在TypeScript中使用这个伪重载。

可选参数

TypeScript重载的另一个场景。也是上面获取消息数据的方法，因为根据类型查找消息时，会返回一个相同类型的消息数组。此时，我们希望添加一个参数，只返回结果中的前几个数据，这样我们就可以轻松地执行以下转换：

函数getMessage(id:数字): Message | undefined函数getMessage(type : MessageType，计数？号码):消息[]；函数getMessage(query: any，count=10): any { if(type of query==' number '){ return data . find(message=message . id===query)；} else { return data . filter(message=message . type===query)。拼接(0，计数)；}}通过重载，这个新增加的参数只有在输入参数MessageType时才能轻松实现，所以如果我们有以下调用，我们会在编译时得到一个错误报告：

/**类型为“1”的参数不可分配给类型为“MessageType”*/getMessage(1，10)的参数；并且非重载版本没有上述类型的优势。

函数getMessage(query : number | MessageType，count=10): Message[]| Message | undefined { if(type of query==' number '){ return data . find(Message=Message . id===query)；} else { return data . filter(message=message . type===query)。拼接(0，计数)；}}/** ojbk，没有报道好*/getMessage(1，10)；过载程序

TypeScript通过从上到下匹配传入参数和重载方法签名来重载进程，直到找到完全匹配的函数签名，否则会报告错误。所以建议更具体的重载签名，放在后面。

/* * */函数getMessage(type : MessageType，count？号码):消息[]；函数getMessage(id:数字): Message | undefined/* * */函数getMessage(id:数字): Message | undefined函数getMessage(type : MessageType，计数？号码):消息[]；像上面例子中的正确方式，如果只有一个输入参数，可以直接跳过第一个函数签名，不需要判断输入参数类型。

相关资源

Typescript手册-函数-重载typescript方法重载摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。