1. 90前端首页
  2. 前端开发
  3. JavaScript

TypeScript系列(五)一等公民-函数

函数是Javascript应用程序的基础,是主要定义行为的地方,本篇文章我们一起来了解一下Typescript中的函数。

如何定义函数

使用function关键字直接定义

// 这里函数的返回值可以通过系统推断得出
function myAdd(x: number, y:number) {
	return x + y;
}

通过变量定义函数类型

let myAdd: (x: number, y: number) => number = function(x: number, y: number): number { 
	return x + y; 
};

注意这里的=> 是用来表示函数的定义,左边是输入类型,右边是返回类型。要和ES6中的箭头函数区分开来。

使用接口定义函数

interface myAdd {
	(x: number, y: number): number
}

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

通过类型别名定义

type myAdd = myAdd: (x: number, y: number) => number;

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

Typescript函数的参数

可选参数

JavaScript中每个参数都是可选的,不传参数默认就是undefined。但是在Typescript中形参和实参都是一一对应,个数必须一致。举个例子:

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

let result = add(1); // 报错 应有两个参数,但只有一个
let result1 = add(1, 2, 3) // // 报错 应有两个参数,但获得三个参数

有些时候,我们需要某些参数是可选的,Typescript中使用?实现可选参数。值得注意的是,可选参数必须是在必选参数后面。

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

// 都能正常运行
console.log(add(1, 2, 3)); // 输出6
console.log(add(1, 2)); // 输出2

参数默认值

Typescript中可以为参数提供一个默认值,用户没有传参数值的时候使用默认值。和可选参数不同的是,带默认值的参数不需要放在必选参数后面,
但是带默认值的参数出现在必选参数前面的话,用户必须使用传入undefined来使用默认值。

function sayHello(name = 'World') {
	console.log('Hello ' + name);
} 

sayHello(); // Hello World
sayHello('Mark'); // Hello Mark

剩余参数

如果想同时操作很多参数,JavaScript中可以使用arguments来访问所有参数。

function add (x: number, ...rest: number[]) {
	return x + rest.reduce((total, item) => total + item);
}

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

函数重载

函数重载的好处是不需要因为相似功能的函数而定义多个相似的函数。Typescript中是为同一个函数提供多个函数类型定义来进行函数重载。可以看下面这个例子:

// 多个函数定义,会优先从最前面的开始匹配
function myAdd(...rest: number[]): number;
function myAdd(...rest: string[]): number;
// 具体实现
function myAdd(...rest: number| string): number| string {
	if (typeof x === 'number') {
        return rest.reduce((total, item) => total + item);
    } else if (typeof x === 'string') {
        return rest.join('');
    }
}

myAdd(1, 2, 3) // 6
myAdd(a, b, c) // abc

本文来自网络整理,转载请注明原出处:

展开阅读全文

发表评论

登录后才能评论