函数是 JavaScript 应用程序的基础。TypeScript 为 JavaScript 函数添加了额外的功能
函数的定义
定义与 js 一致,可以创建有名字的函数和匿名函数
第一种是函数声明法:
function function_name(): return_type {
// 语句
return value;
}
函数声明法的示例:
function add(): number {
return 12;
}
console.log(add());//12
function say(): void {
console.log('say...');//say...
}
say();
第二种是匿名函数:
let add = function (): number {
return 12;
}
console.log(add());//12
我们可以给每个函数添加返回值类型。但是 typescript 能够根据返回语句自动推断返回值的类型,因此通常会省略它。
方法传参
function add(x: number, y: number) {
return x + y;
}
console.log(add(5, 6)); //11
相对于 js 的传参,只是将形参定义了类型而已。其他基本上一致的。
注意点:形参定义之后与实参是一一对应的,少传与多传都是不行的
可选参数
与属性的可选一致,参数后面加 ?,表示此形参不是必填的。
function add(x: number, y?: number) {
if (y) {
return x + y
}
return x * 2
}
console.log(add(5)); // 10
console.log(add(5, 6)); // 11
但是如果有必填形参的话,可选参数需放置最后
// 只有一个可选参数 可以定义
function add(y?: number) {
if (y) {
return y
}
return 1
}
console.log(add(5)); // 5
console.log(add()); // 1
// 必选参数不能位于可选参数后
function mul(y?: number, x: number) {}
默认参数
可以为参数提供一个默认值,当用户没有传递或者传递的值为 undefined,默认的值才会生效
function add(x: number, y: number = 10): number {
return x + y;
}
console.log(add(5)); // 15
console.log(add(5, undefined)); // 15
console.log(add(5, 6)); // 11
剩余参数
默认参数和可选参数有个共同点:它们表示某一个参数。
但是有时我们并不知道会有多少参数传递进来,但是又想全部接收过来。
在 JavaScript 里,可以使用 arguments来访问所有传入的参数。
在 TypeScript 里,你可以把所有参数收集到一个变量里:
function add(...res: number[]) {
let sum = 0;
for (let i in res) {
sum += res[i]
}
return sum
}
console.log(add(5, 4)); // 9
console.log(add(5, 6, 7, 8)); // 26
剩余参数是个数不限的。可以由任意个,因此也可以一个没有
function add(...res: number[]) {
let sum = 0;
for (let i in res) {
sum += res[i]
}
return sum
}
console.log(add()); // 0
函数重载
JavaScript 里函数根据传入不同的参数而返回不同类型的数据是很常见的
参数相同:
function add(x: number): number;
function add(x: string): string;
function add(x: any): any {
if (typeof x == 'string') {
return `我是${x}`
}
return x * 2
}
console.log(add(5));// 10
console.log(add('5'));// 我是5
// add(true); // 类型“true”的参数不能赋给类型“string”的参数
参数不同:
function add(x: number, y: number): number;
function add(x: number): number;
function add(x: number, y?: number): number {
if (y) {
return x * y
}
return x * 2
}
console.log(add(5));//10
console.log(add(5, 6));//30
注意:为了让编译器能够选择正确的检查类型,它会查找重载列表,尝试使用第一个重载定义。 如果匹配的话就使用这个。 因此,在定义重载的时候,一定要把最精确的定义放在最前面。
注意:add(x): any并不是重载列表的一部分,因此这里只有两个重载:一个是接收对象另一个接收数字。 以其它参数调用 add会产生错误。