有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

ts 函数类型(ts函数的几个点简单梳理)

javascript 炮渣日记 4周前 (11-13) 20次浏览 已收录 0个评论 扫描二维码

一、函数声明

在JavaScript中,有两种常见的定义函数的方式函数声明 (Function Declaration)和函数表达式(Function Expression) :

函数声明(Function Declaration)

function sum(x, y) {
	return x + y
}

函数表达式(Function Expression)

let mySum = function (x, y) {
	return x + y;
}

一个函数有输入和输出,要在TypeScript中对其进行约束,需要把输入和输出都考虑到,其中函数声明的类型定义较简单:

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

注意,输入多余的(或者少于要求的)参数,是不被允许的:

function sum(x: number, y: number): number { 
  return x + y;
}
	sum(1, 2, 3);
//  error: Supplied parameters do not match any signature of call target .

二、函数,可选参数,参数默认值可选参数

前面提到,输入多余的(或者少于要求的)参数,是不允许的。那么如何定义可选的参数呢?与接口中的可选属性类似,我们用 表示可选的参数:

function myName(firstName: string, lastName?: string) {
  if (lastName) {
		return firstName + ' ' + 	lastName ;
	} else {
		return firstName;
	}
}
let animal1 = myName('Tom', 'Cat' ); 
let animal2 = myName( 'Tom' );

需要注意的是,可选参数必须接在必需参数后面。换句话说,可选参数后面不允许再出现必需参数了:

function myName(firstName?: string, lastName: string) { 
  if (firstName)
		return firstName + ' ' + 	lastName ;
	} elset
		return las tName;
	}
}
let animal1 = myName('Tom', ' Cat' ); 
let animal2 = myName(undefined, ' Tom' );
//  error: A required parameter cannot follow an optional parameter.

参数默认值

在ES6中,我们允许给函数的参数添加默认值,TypeScript 会将添加了默认值的参数识别为可选参数:

function myName(firstName: string, lastName: string = 'Cat') { 
	return firstName + ' ' + lastName ;
}
let animal1 = myName('Tom', 'Cat');
let animal2 = myName( 'Tom ' );

此时就不受「 可选参数必须接在必需参数后面」的限制了:

function myName(firstName: string =‘Tom' ,lastName: string) { 
    return firstName + ' ' + lastName;
}
let animal1 = myName('Tom', 'Cat'); 
let animal2 = myName( undefined, 'Cat' );

三、函数剩余参数、重载 。ES6中,可以使用..rest 的方式获取函数中的剩余参数(rest 参数) :

function pushWay(array, ...items) { 
	items。forEach( function(item) { 
  	array . push(item);
	});
}
let a: any[] = [];
pushWay(a, 1, 2, 3);

事实上,items 是一个数组。 所以我们可以用数组的类型来定义它:

function pushWay(array: any[], ...items: any[]) { 
  items.forEach( function(item) {
		array . push(item);
	});
}
leta=[];
pushWay(a, 1, 2, 3);

注意,rest 参数只能是最后一个参数, 关于rest参数,可以参考ES6中的rest参数。

重载

重载允许个函数接受不同数量或类型的参 数时,作出不同的处理。(方法名相同,参数列表、类型不同)

比如,我们需要实现一个函数reverse ,输入数字123的时候,输出反转的数字321 ,输入字符串’ts’ 的时候,输出反转的字符串’st’。那么利用联合类型,我们可以这么实现:

function reverse(x: number| string): number | stringvoid {
	if (typeof x === ' number') {
		return Number(x.toString().split('').reverse().join('')); 
  } else if (typeof x === 'string') {
		return x.split('').reverse(). join('');
	}
}

然而这样有一个缺点, 就是不能够精确表达,输入为数字的时候,输出也应该为数字,输入为字符串的时候,输出也应该为字符串。 这时,我们可以使用重载来定义多个reverse 的函数类型:

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number| string): number | string| void { 
  if (typeof x === ' number') {
		return Number(x.toString().split('').reverse().join('')); 
  } else if (typeof x === 'string') {
		return x.split('').reverse(). join('');
	}
}
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址