← 返回首页
Vue3基础教程(十三)
发表时间:2021-08-05 16:58:09
函数

与JavaScript 一样,TypeScript 函数可以创建有名字的函数和匿名函数。由于Typescript是一种强类型语言我们可以规定函数的返回类型和参数的类型。

实例:

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

const addNumber =(x:number,y:number):number =>{
    return x+y;
}

console.log(add(5,7));
console.log(addNumber(7,8));

我们也可以指定参数的默认值。

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

console.log(add());

剩余参数会被当做个数不限的可选参数。 可以一个都没有,同样也可以有任意个。 编译器创建参数数组,名字是你在省略号( ...)后面给定的名字,你可以在函数体内使用这个数组。

例如:

function add(...args:number[]): number {
    let result = 0;
    for(let n of args){
        result +=n;
    }
    return result;
}

console.log(add());
console.log(add(5,7));
console.log(add(4,5,6,7));

函数重载: 函数名相同, 而形参不同的多个函数 在JS中, 由于弱类型的特点和形参与实参可以不匹配, 是没有函数重载这一说的 但在TS中, 与其它面向对象的语言(如Java)就存在此语法。

// 重载函数声明
function add (x: string, y: string): string
function add (x: number, y: number): number

// 定义函数实现
function add(x: string | number, y: string | number): string | number {
    // 在实现上我们要注意严格判断两个参数的类型是否相等,而不能简单的写一个 x + y
    if (typeof x === 'string' && typeof y === 'string') {
        return x + y
    } else if (typeof x === 'number' && typeof y === 'number') {
        return x + y
    }
}

console.log(add(10,10));
console.log(add("10","10"));