目录
函数是一种特殊的对象,可以被调用。TS 里的函数和原生,ES 6 里的函数差不太多,只是多了一些其他功能。
- // 1.函数声明法
- function fun(): string {
- return '123'
- }
- // 2.匿名函数法
- let fun2 = function (): number {
- return 123
- }
- // 3.没有返回值的方法
- function fun3(): void {
- console.log(111);
-
- }
TS 里可以自定义传入参数的类型以及函数返回的类型。
- function getInfo(name: string, age: number): string {
- return name + age
- }
- console.log(getInfo('zs', 20));
TS 函数还可以设置可选参数。如果不设置可选参数,那么所有定义的参数都要传入,在参数后边加一个?号表示该参数可传可不传
注意:可选参数必须配置到参数的后面
-
- function fun(name: string, age?: number): string {
- if (age) {
- return name + age
- } else {
- return name + '年龄未知'
- }
- }
- fun('zs')
- fun('ls', 29)
当函数设置了默认参数时,如果给函数传值,所传过来的值会覆盖设置的默认值,未传值时选择默认值,这个其实是 ES 6 的特性,可以给函数加默认参数值。
要注意的是设置了默认值后就不需要设置类型了,因为 TS 可以做类型推断。
- function fun(name: string, age: number = 29): string {
- if (age) {
- return name + age
- } else {
- return name + '年龄未知'
- }
- }
- fun('zs')
- fun('ls', 30)
当函数不知道要传递多少个参数的情况下,可以使用三点运算符(…)这是函数里类似数组的一个特殊对象,里面存放的是函数传入参数,很好理解。
注意:不是数组,是对象,只是长得像数组。
- function fn(a: number, b: number): number {
- // return a + b
- return arguments[0] + arguments[1]
- }
- console.log(fn(1, 2));
-
-
- function fn(a: number, ...args: number[]) {
- // rest (剩余部分)参数必须是数组类型
- let res = 0
- args.forEach(item => {
- res += item
- })
- return res
- }
- console.log(fn(1, 2, 3, 4, 5))//14
JavaScript 作为动态语言, 是没有函数重载这一说法的。原因如下:
既然语言层面无法自动进行重载,但借助其动态的特性,我们可以在代码中手动检查入参的类型,或者通过 arguments
获取到参数个数,从而实现根据不同的入参做不同的操作。
TS 的重载和 Java 的差不多,就是可以对调用同一个函数的时候传入不同的参数。但是重载的函数参数数目应该要是一样的。
需要注意的是: 当 TypeScript 编译器处理函数重载时,它会查找重载列表,尝试使用第一个重载定义。 如果匹配的话就使用这个。 因此,在定义重载的时候,一定要把最精确的定义放在最前面。
由于 JavaScript 是一个动态语言,我们通常会使用不同类型的参数来调用同一个函数,该函数会根据不同的参数而返回不同的类型的调用结果:
- function add(x, y) {
- return x + y
- }
- console.log(add(1, 2));//3
- console.log(add(1, '2'));//12
以上代码在JS环境中运行是没有问题的,但是如果在TypeScript环境下且TypeScript编译器开启noImplicitAny(将TypeScript从可选类型语言转换为强制类型检验语言)
配置项时,以上代码会提示以下错误信息:
Parameter 'x' implicitly has an 'any' type.
Parameter 'y' implicitly has an 'any' type.
该信息告诉我们参数 x 和参数 y 隐式具有 any
类型。为了解决这个问题,我们可以为参数设置一个类型。因为我们希望 add
函数同时支持 string 和 number 类型,因此我们可以定义一个 string | number
联合类型
设置了联合类型后,之前错误提示信息就消失了,接着下一步:
- let result = add('hearts', 'spades');
- result.split(' ');
我们想当然的以为result类型为string,然后就可以正常使用字符串对象上的split方法, 结果又出现了新问题, 提示number类型的对象上并不存在split属性。
这时可以使用函数重载
。可以为同一个函数提供多个函数类型定义来进行函数重载(函数名称相同,参数数量或类型不同, 或者参数数量相同同时参数顺序不同
)。
如何进行定义?
- type Types = number | string;
-
- // 重载签名
- function add(x: number, y: number): number
- function add(x: string, y: string): string
- function add(x: string, y: number): string
- function add(x: number, y: number): string
- //实现签名
- function add(x: Types, y: Types) {
- if (typeof x === 'string' || typeof y === 'string') {
- return x.toString() + y.toString();
- }
- return x + y;
-
- }
- let result = add('hearts', 'spades');
- result.split(' ');