文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Typescript中函数类型及示例详解

2023-01-05 12:00

关注

不给参数定义类型,会报错,如下: 

常见写法

function add1(x: number, y: number) {
  return x + y;
}
 
function add1_1(x: number, y: number): number {
  return x + y;
}
 
const add2 = function (x: number, y: number): number {
  return x + y;
};
 
const add3 = (x: number, y: number): number => x + y;
const add3_1 = (x: number, y: number) => x + y;
 
 
const add4: { (x: number, y: number): number } = (x: number, y: number): number => x + y;
 
type TAdd = {
  (x: number, y: number): number
}
const add5: TAdd = (x: number, y: number): number => x + y;
const add5_1: TAdd = function (x: number, y: number): number {
  return x + y;
};
 
interface IAdd {
  (x: number, y: number): number
}
const add6: IAdd = (x: number, y: number): number => x + y;
const add6_1: TAdd = function (x: number, y: number): number {
  return x + y;
};

函数名赋值:

const abs0: (x: number) => number = Math.abs;
 
const abs1: { (x: number): number } = Math.abs;
 
type TAbs = {
  (x: number): number
}
const abs3: TAbs = Math.abs;
 
interface IAbs {
  (x: number): number
}
const abs4: IAbs = Math.abs;
 
console.log(abs0(23) === abs1(23));  // true
console.log(abs0(23) === abs3(23));  // true
console.log(abs0(23) === abs4(23));  // true

 可选参数

在JavaScript中,函数的每一个参数都是可选参数,而在TypeScript中,默认情况下函数的每一个参数都是必选参数。在调用函数时,编译器会检查传入实际参数的个数与函数定义中形式参数的个数是否相等。如果两者不相等,则会产生编译错误。如果一个参数是可选参数,那么就需要在函数类型定义中明确指定。

在函数形式参数名后面添加一个问号“?”就可以将该参数声明为可选参数。

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

 函数的可选参数必须位于函数参数列表的末尾位置。在可选参数之后不允许再出现必选参数,否则将产生编译错误。

 默认参数

如果函数定义了默认参数,并且默认参数处于函数参数列表末尾的位置,那么该参数将被视为可选参数,在调用该函数时可以不传入对应的实际参数值。

function add(x: number, y: number = 0) {
  return x + y;
}
 
console.log(add(1));    // 1
console.log(add(1, 2));    // 3

 同一个函数参数不允许同时声明为可选参数和默认参数,否则将产生编译错误

如果默认参数之后存在必选参数,那么该默认参数不是可选的参数,在调用函数时必须传入对应的实际参数值

function add(x: number = 0, y: number) {
  return x + y;
}
 
add(1);            // 编译错误
add(1, 2);         // 正确
add(undefined, 2); // 正确

 剩余参数

必选参数、可选参数 和 默认参数 处理的都是单个参数,而剩余参数处理的则是多个参数。如果函数定义中声明了剩余参数,那么在调用函数时会将多余的实际参数收集到剩余参数列表中。因此,剩余参数的类型应该为数组类型或元组类型

数组类型的剩余参数

最常见的做法是将剩余参数的类型声明为数组类型。在调用定义了剩余参数的函数时,剩余参数可以接受零个或多个实际参数

function f(...args: number[]) {
  console.log("args:", args)
}
 
f();
f(0);
f(0, 1); 

 元组类型的剩余参数

如果剩余参数的类型为元组类型,那么编译器会将剩余参数展开为独立的形式参数声明,主要包括以下几种情况:

常规元组类型:

function f0(...args: [boolean, number]) { }
 
// 等同于:
function f1(args_0: boolean, args_1: number) { } 

 带有可选元素的元组类型:

function f0(...args: [boolean, number]) { }
 
// 等同于:
function f1(args_0: boolean, args_1: number) { } 

 带有剩余元素的元组类型:

function f0(...args: [boolean, ...string[]]) { }
 
// 等同于:
function f1(args_0: boolean, ...args_1: string[]) { }

 在了解了元组类型剩余参数的展开行为后,我们也就清楚了该如何传入对应的实际参数,如下所示:

function f0(...args: [boolean, number, string]) { }
f0(true, 0, '');
 
function f1(...args: [boolean, number, string?]) { }
f1(true, 0, '');
f1(true, 0);
 
function f2(...args: [boolean, number, ...string[]]) { }
f2(true, 0);
f2(true, 0, '');
f2(true, 0, '', 'coolcou');
 
function f3(...args: [boolean, number?, ...string[]]) { }
f3(true);
f3(true, 0);
f3(true, 0, '');
f3(true, 0, '', 'coolcou');

解构参数

解构还可以应用在函数参数列表中。

未给解构参数添加类型将会报错,如下:

可以使用类型注解为解构参数添加类型信息

function f0([x, y]: [number, number]) { }
f0([0, 1]);
 
function f1({ x, y }: { x: number; y: number }) { }
f1({ x: 0, y: 1 });

重载函数

参考:

TypeScript重载函数,重载函数是指一个函数同时拥有多个同类的函数签名。例如,一个函数拥有两个及以上的调用签名,或者一个构造函数拥有两个及以上的构造签名。当使用不同数量和类型的参数调用重载函数时,可以执行不同的函数实现代码。 TypeScript中的重载函数与其他编程语言中的重载函数略有不同。 下例中定义了一个重载函数add。它接受两个参数,若两个参数的类型为number,则返回它们的和;若两个参数的类型为数组,则返

https://www.jb51.net/article/231642.htm

 构造函数类型字面量

如JavaScript提供了一个内置的Error构造函数,它接受一个可选的message作为参数并返回新创建的Error对象

const a = new Error();
const b = new Error('Error message.');

我们可以使用如下构造函数类型字面量来表示Error构造函数的类型。该构造函数有一个可选参数message并返回Error类型的对象

let ErrorConstructor: new (message?: string) => Error;

 构造签名

若在对象类型中定义了构造签名类型成员,那么我们称该对象类型为构造函数类型。构造签名的语法如下:

{
    new (ParameterList): Type
}

 在该语法中,new是运算符关键字,ParameterList表示构造函数形式参数列表类型,Type表示构造函数返回值类型,两者都是可选的。

let Dog: { new(name: string): object };
 
Dog = class {
  private name: string;
  constructor(name: string) {
    this.name = name;
  }
};
 
let dog = new Dog('coolcou');

有一些函数被设计为既可以作为普通函数使用,同时又可以作为构造函数来使用。例如,JavaScript内置的“Number()”函数和“String()”函数等都属于这类函数。示例如下:

const a: number = Number(1);
 
const b: Number = new Number(1);

 若在对象类型中同时定义调用签名和构造签名,则能够表示既可以被直接调用,又可以作为构造函数使用的函数类型。示例如下:(报错了,不知道为什么)

declare const F: {
  new(x: number): Number;  // <- 构造签名
  (x: number): number;      // <- 调用签名
};
 
// 作为普通函数调用
const a: number = F(1);
 
// 作为构造函数调用
const b: Number = new F(1);

到此这篇关于Typescript中函数类型的文章就介绍到这了,更多相关Typescript中函数类型内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯