typescript-函数

168 阅读3分钟

函数是 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会产生错误。