砥砺前行

函数

// 参数由名字与类型组成，之间用冒号分割
function fn(num:number):string {// 函数的返回值可有可无，没有时，返回类型为void
    return `找到了${num}`;
}
let num:number = 2;
let res:string = fn(num);
console.log(res);
1
2
3
4
5
6
7

函数定义

// es5定义函数
// 函数声明
function run() {
    return 'run';
}
// 函数表达式
let run2 = function() {
    return 'run2';
}
1
2
3
4
5
6
7
8
9
// ts定义函数
// 函数声明
function run():string {
    return 'test';
}
// 函数表达式(匿名函数)
let run2 = function():number {
    return 123;
}
1
2
3
4
5
6
7
8
9
// 参数和返回值均有类型
function getInfo(name:string, age:number): string {
    return `${name}----${age}`;
}

console.log(getInfo('lisi', 20)); // lisi----20
// 函数表达式
let getInfo2 = function(name:string, age: number):string {
    return `${name}----${age}`;
}
1
2
3
4
5
6
7
8
9
10
// 没有返回值的方法
function run():void {
    console.log('我没有返回值');
}
1
2
3
4

形参和实参

  • 函数定义的时候写的参数是形参。从字面意义上我们可以看出，形参就是形式上的参数。我们定义了形参也就规定了此函数的参数个数和参数类型，规范了函数。
  • 调用函数时传递的具体值就是实参。同样从字面理解，实参就是真实的参数，我们在使用的时候，具体真实传递过去的就是实参。

注意：在TS中，函数调用的时候，我们需要按照形参的规则传递实参，有几个形参就要传递几个实参，并且每一个实参的类型要与对应的形参类型一致。

TypeScript中的函数参数

TypeScript的函数参数是比较灵活的，它不像那些早起出现的传统语言那么死板。在TypeScript语言中，函数的形参分为：可选形参、默认形参、剩余参数形参等。

可选参数

ES5中方法的实参和形参可以不一样，但是在ts中必须一样，如果不一样就需要配置可选参数。

可选参数，就是我们定义形参的时候，可以定义一个可传可不传的参数。这种参数，在定义函数的时候通过?标注。

需要注意：可选参数必须配置到参数的最后面。

// 可选参数的函数
function test(name:string, age?:number):string {
    let res:string = '';
    res = `找到了${name}`;
    if (age) {
        res += age;
    }
    return `${res}同学`;
}
console.log(test('lisi'));
console.log(test('lisi', 20));
1
2
3
4
5
6
7
8
9
10
11

默认参数(特殊的可选参数，可以不传直接使用默认值即可)

ES5中无法设置默认参数，在ES6和ts中都可以设置默认参数。

// 设置默认姓名为wangwu，默认年龄为20
// name可以不传，直接使用默认值wangwu
// age可以不传，直接使用默认值20
function test(name:string='wangwu', age:number=20): string {
    let res: string = '';
    res = `找到了${name}`;
    if (age) {
        res += age;
    }
    return `${res}同学`;
}
console.log(test('lisi')); // 找到了lisi20同学
console.log(test('lisi', 30)); // 找到了lisi30同学
1
2
3
4
5
6
7
8
9
10
11
12
13

剩余参数

const arr1 = [1];
const arr11 = [2, 3, 4];
arr1.push(arr11); // [1, Array(3)]
console.log(arr1);
// 通过展开运算符可以同时向数组中添加多个元素
arr1.push(...arr11);
console.log(arr1); //  [1, Array(3), 2, 3, 4]
1
2
3
4
5
6
7
// 剩余参数，采用ES6中的剩余运算符
// 2, 3, 4, 5作为参数赋值给数组args(数值数组)
function sum(a:number, ...args:number[]):number {
    let sum:number = a;
    sum = args.reduce((previousValue:number, currentValue:number) => {
        return previousValue + currentValue;
    }, sum);
    return sum;
}

console.log(sum(1, 2, 3, 4, 5)); // 15
1
2
3
4
5
6
7
8
9
10
11

函数重载

java中方法的重载指：两个或者两个以上的同名函数，它们的参数不一样，这时就会出现函数重载的情况。

ts中的重载是：通过为同一个函数提供多个函数类型定义来实现多种功能。 ts为了兼容ES5和ES6重载的写法和java中有区别。

// es5中出现同名函数，后面的函数定义会覆盖前面的
function fn(a) {}

function fn(a, b) {}
1
2
3
4
// 参数个数一致
// 给getInfo函数提供了两个函数定义(分别用来输出name和age)，就是函数重载
function getInfo(name:string):string;
function getInfo(age:number):string;
// 函数实体(不属于函数重载)
function getInfo(str:any):any {
    if (typeof str === 'string') {
        return `我叫${str}`;
    }
    return `我的年龄是${str}`;
}

console.log(getInfo(12));
console.log(getInfo('lisi'));
// 在函数重载中找不到相关定义
console.log(getInfo(true)); // 错误写法(函数不支持布尔类型)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 参数个数不一致
function getInfo(name:string):string;
function getInfo(name:string, age:number):string;
// 函数实体(不属于函数重载)
function getInfo(name:any, age?:any):any {
    if (age) {
        return `我叫${name},我的年龄是${age}`;
    }
    return `我叫${name}`;
}

console.log(getInfo('lisi', 12)); // 我叫lisi,我的年龄是12
console.log(getInfo('lisi')); // 我叫lisi
1
2
3
4
5
6
7
8
9
10
11
12
13

函数定义方法(3种)

函数声明法

函数声明法创建函数是最常用的函数定义法。使用function关键字和函数名去定义一个函数。

function add(a:number, b:number):number {
    return a + b;
}
1
2
3

函数表达式法

函数表达式法是将一个函数赋值给一个变量，这个变量名就是函数名，通过变量名就可以调用函数了。这种方式定义的函数，必须在定义之后调用函数。下面例子中等号右边的函数没有函数名，称为匿名函数。

const add = function(a:number, b:number):number {
    return a + b;
}
1
2
3

箭头函数(ES6)

箭头函数是 ES6 中新增的函数定义的新方式，我们的 TypeScript语言是完全支持ES6语法的。箭头函数定义的函数一般都用于回调函数中。

const add = (a:number, b:number):number => a + b;
1

类型别名定义函数

// 给字符串类型string指定一个别名isString
type isString = string;
const strasd:isString = '123';
1
2
3
type Add = (a:number, b:number) => number;

let addFn:Add; // 声明一个变量为Add类型
addFn = (a:number, b:number):number => a + b;
1
2
3
4

← 4. Typescript类→