TS 函数 配合接口

指定类型

声明函数时，大致和 vue2 一样，多了可以指定 参数 和 返回值 的类型，

直接看例子

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

我们 现在有 sum 函数，第一个 sum 指定了 参数类型， 第二个指定了 返回值类型，使用一下函数

sum('1',2)	// 报错
 
sum('1',2)	// 报错

 两次使用都会报错，但是报错信息不一样：

1. x、y类型必须都是number类型

2. 参数 '1',2 进行的是字符串拼接，所以返回值是string，不是number类型

？可选参数

使用 ‘？’ 指定参数为可选参数，需要正常参数后定义

function sum(x:number, y?:number) {
    console.log(x,y);
}
 
sum(1)

可以看到，我们不穿传 y 不报错，并且 y 的值为 undefined 

默认参数

和vue2 一样，直接看例子

function sum(x:number, y?:number,z=10) {
  console.log(x,y,z);
}
sum(1)

 剩余参数

function sum(x:number,y:number,...result:number[]):number{}

通过 ...result 获取剩余参数 （result可以改成别的名字），

注：需要注意这个参数的类型，是个数组但是，可能你在使用时不是 数字数组（ number[] ），注意好指明类型就好

配合接口

现在我们可以使用接口，更规范的定义 参数 返回值，返回值例子：

interface Back {
    bark: Function
}
interface Person {
    name: string,
    age: number
}
type MergeType = Person & Back 
function funcMerge(): MergeType {
    let zs: Person  = {
        name: "zs",
        age: 18
    }
    let back : Back = {
        bark: () => {
            console.log('holle')
        }
    }
    return Object.assign(zs, back )
}

可以看到上面例子中 函数的返回值 为两个合并的接口，最后返回 一个 对象 和 一个方法，

当然参数类型也可以这样定义