TypeScript的函数定义与使用案例教程
时间:2022-04-25 10:48:12|栏目:C代码|点击: 次
TypeScript中函数的定义和使用
1. 声明一个函数约束其传参类型,以及返回值类型
传入两个参数,没有返回值 const fun1 = (key: string, value: number): void => { console.log(key, value);//"Typescript",100 }; fun1("Typescript", 100);
2.TypeScript中的函数配置可选参数,在ES5或者ES6中函数中的实参可以不传递进去,但是在TS中必须传递进去,如果需要设置非必传参数,就必须设置可选参数具体如下
const fun2 = (a: string, b?: number) => { //形参后面加个?代表可以传递参数也可以不传递参数 console.log(a);//typescript } fun2('typescript'); 注意:配置可选参数必须配置到最后一个参数, 否则ts会有报错提示(虽然编译可以通过但不建议这么使用)
3.TypeScript的函数设置默认值
//设置了默认值,并传入实参,默认实参会代替默认值,这一点和ES6一致 const fun3 = (a: number, b: string = 'ECMAScript'): void => { console.log(a);//20 console.log(b);//typescript }; fun3(20, 'typescript'); /设置了默认值,没有传递实参,默认B的值就是true const fun4 = (a: number, b: boolean = true): void => { console.log(a);//60 console.log(b);//true }; fun4(60);
4.TypeScript函数的剩余参数
//接收多个参数,并放到一个容器里面,与ES6中的rest...三点运算符一样 const fun5 = (...result: number[]): void => { //用变量result接收实参,并指明数据类型 let sum: number = 0; for (let index = 0; index < result.length; index++) { sum += result[index]; }; console.log(sum);//150 }; fun5(10, 20, 30, 40, 50); //注意接收多个实参的变量必须放在最后一个,否则会报错 //接收参数,与变量名一一对应 const fun6 = (first: string, ...result: string[]): void => { console.log(first);//string console.log(result);//[ 'number', 'boolean', 'function', 'true' ] } fun6('string', 'number', 'boolean', 'function', 'true');
5.TypeScript中的函数重载
// java中方法的重载:重载指的是两个或者两个以上同名函数, 但它们的参数不一样,这时会出现函数重载的情况。 // typescript中的重载: 通过为同一个函数提供多个函数类型定义来试下多种功能的目的。 //TS中函数重载 TS为了兼容ES5和ES6 不能写大括号 //对实参类型进行约束 function dataFn(a: string, b: number): void function dataFn(a: number, b: string): void function dataFn(a: number, b: number): void function dataFn(a: any, b: any): void { //对传入的实参类型进行判断 如果符合某个函数就执行其函数体 if(typeof (a) === "string") { console.log('This is 字符串') }; if (typeof (a) === "number" && typeof (b) === "number") { console.log('this is 数字'); }; if (typeof (a) === 'number') { console.log(a, b);//20,typescript } else { } } dataFn(10, 20); dataFn(20, 'typescript');
6.TypeScript中的箭头函数
基本形式: let func = num:number => num; //只有一个形参可以‘='后面写形参名,并约束其类型 let func = () => num;//如果有多个形参,在‘='后面写‘()'把形参写在()里面并约束其类型 let sum = (num1, num2) :number=> num1 + num2;//如果只有1条执行语句, //直接在‘=>'后面写执行语句即可,还要指定其返回类型 如果有多条语句必须写{},将代码写在{}里面,重新指定返回值,以及类型 注意事项: 函数体内的this对象,就是定义时所在的上下文,如果箭头函数是全局里面的话, 还是指向window,建议在箭头函数外部再嵌套一层函数以便于控制里面的this 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。 不可以使用arguments对象,该对象在函数体内不存在。 如果要用,可以用 rest 参数代替。 const fun8 = (a: number, b: number): void => { console.log(a, b) } fun8(10, 20);