• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Typescript实战---(4)函数

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
1、函数的定义方式(4种)
// (1)、命名函数
function add1(x: number, y: number): number {
  return x + y;
}

// (2)、匿名函数
let add2:(x: number, y: number) => number = function(x: number, y: number) {
  return x + y;
}

// (3)、类型别名
type add3 = (x: number, y: number) => number

// (4)、接口
interface add4 {
  (x: number, y: number): number
}

 

js中每个参数都是可选的,可传可不传,没传参时的值就是 undefined;ts中形参和实参的类型和数量必须一一对应

function add(x: number, y: number) {
  return x + y;
}

add(1, 2);
add(1, 2, 3);   // 应有 2 个参数,但获得 3 个
add('1', 2);    // 类型“"1"”的参数不能赋给类型“number”的参数
add(1);         // 应有 2 个参数,但获得 1 个

 

关于函数返回值的类型推断

// 如果函数没有返回值
function noReturn(): void {
  console.log('222');
}

// 如果函数不可能全部执行完
function foo(): never {
  throw new Error();
  console.log('333'); // throw后面的代码不会执行
}

// 如果函数参数使用对象解构赋值
function bar({ a, b }: { a: number, b: number}): number {
  return a + b;
}

 

2、可选参数
ts中我们可以在参数名后面使用 ? 实现可选参数的功能,可选参数必须跟在必须参数后面
function add(x: number, y?: number) {
  return y ? x + y : x
}
add(1);

// error: 必选参数不能位于可选参数后
function add2(x: number, y?: number, z: number) {
  return x + y + z;
}

 

3、默认参数
 
ts中我们也可以为参数提供一个默认值,使用默认参数需注意两点:
(1)、如果带默认值的参数出现在必须参数之前,必须手动传入 undefined 来获得默认值
(2)、如果带默认值的参数后面没有必须参数,则无须传入任何内容就可以获得默认值
function add(a: number, b=1, c: number, d=2) {
  return a + b + c + d;
}

console.log(add(3, undefined, 4));  // 10 (3+1+4+2)
console.log(add(1, 2, 3, 4));       // 10 (1+2+3+4)
console.log(add(1, 2, 3));          // 8  (1+2+3+2) 
console.log(add(1,2));   // Expected 3-4 arguments, but got 2.
 
4、剩余参数
剩余参数会被当做个数不限的可选参数,需要放在参数列表的最后面
function add1(x: number, ...restParams: number[]) {
  return x + restParams.reduce((pre, cur) => pre + cur)
}

console.log(add1(1, 2, 3, 4));    // 10

 

5、重载
 
所谓重载,指的是不同函数使用相同的函数名,但是函数的参数个数或类型不同,返回类型可以相同也可以不同。调用的时候,根据函数的参数来区别不同的函数
 
重载的好处是不需要为了功能相近的函数使用选用不同的函数名称,以此来提高函数的可读性
 
ts中的重载要求我们先定义一系列名称相同的函数声明(即重载列表),并且在定义重载的时候,一定要把最精确的定义放在前面
function overload(...restParams: number[]): number;

function overload(...restParams: string[]): string;

function overload(...restParams: any[]) {
  let firstParam = restParams[0];
  if(typeof firstParam === 'number') {
    return restParams.reduce((prev, curr) => prev + curr);
  }
  if(typeof firstParam === 'string') {
    return restParams.join('');
  }
}

console.log('传入数字参数,返回求和: ', overload(1, 2, 3));
// 传入数字参数,返回求和:  6

console.log('传入字符参数,返回拼接: ', overload('a', 'b', 'c'));
// 传入字符参数,返回拼接:  abc

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript实现设计模式——策略模式发布时间:2022-07-18
下一篇:
typescript书写规范发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap