TypeScript学习日记-函数

ts 的函数与js大致相同,只是增加了一下几种限制

1. 必须定义返回值, 无返回值则用void定义类型
2. 实参和形参的类型要一致
3. 实参与形参的的数量要一致

函数声明

ES5中函数声明

// 函数声明
function fun(res) {
    return 'res'
}
// 匿名函数
var fun = function (res) {
    return 'res'
}
// 无返回值函数
function fun() {
    console.log('none')
}

TS中函数声明

// 函数声明
function fun(res: string): string {
    return res
    // return 123 //不能将类型“123”分配给类型“string”。
}
// 匿名函数
var fun = function (res: string): string {
    return res
}
// 无返回值函数
function fun(): void {
    console.log('none')
}

但是上述的声明是函数的简单声明, 是因为ts根据语句的推断出函数的类型, 所以我们通常省略它. 其完整声明如下

var fun: (x: string) => string = function (res: string): string { return res }

可选参数

由于形参与实参要求数量必须一致, 形参总数已知的情况下,对于可选参数,需使用 ? 来标记

function getInfo(name: string, age?: number): string {
    if (age) {
        return `${name}--${age}`
    } else {
        return `${name}--null`
    }
}

剩余参数

当形参总数不确定的情况下, 可以使用 ... 来接收多余参数

剩余参数只能有一个

剩余参数只能定义为数组

剩余参数只能写作最后一个参数

function sum(...result: number[]): number {
    var sum = 0;
    for (var i = 0; i < result.length; i++) {
        sum += result[i]
    }
    return sum
}
// 同时也支持拆出部分参数, 但是剩余参数必须在最后一个
function sum(a: number, ...result: number[]): number {
    var sum = 0;
    for (var i = 0; i < result.length; i++) {
        sum += result[i]
    }
    return sum + a
}

默认参数

ES5中无默认参数, 而在ES6和TS中可以使用 = 为参数附加默认值

function getInfo(name: string = "defaultName", age: number = 0): string {
    return `${name}--${age}`
}
console.log(getInfo()) // defaultName--0
console.log(getInfo('ZFLin')) // ZFLin--0
console.log(getInfo('ZFLin', 18)) // ZFLin--18
console.log(getInfo(undefined, 18)) // defaultName--18  可以传undefined跳过第一个参数

函数重载

//es5中同名方法,后来的会替换之前的函数声明
function css(config) { }
function css(csonfig, value) { } // 替换上面

重载在JAVA中是指名称相同的函数,因为参数的不同导致各参数下执行的函数形式各不相同

TS中,重载通过为同一个函数提供多个函数类型定义来实现多种功能的目的. 主要是为了之后引用函数时可以为参数进行限制, 写法与JAVA有区别.

// 参数类型不同重载
function typeOverload(x: string): string;
function typeOverload(x: number): string;
function typeOverload(x: object): string;
function typeOverload(x: any): any {
    if (typeof x === "string") {
        return '我叫' + x
    } else if (typeof x === "number") {
        return '我' + x + '岁'
    } else if (typeof x === "object") {
        return '我叫' + x.name + '我' + x.age + '岁'
    }
};
console.log(typeOverload('ZFLin')) // 我叫ZFLin
console.log(typeOverload(18)) // 我18岁
console.log(typeOverload({ name: 'ZFLin', age: 18 })) // 我叫ZFLin我18岁
// console.log(typeOverload(true)) //没有与此调用匹配的重载。