持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天，点击查看活动详情

前言

我们已经知道了如何定义函数类型，这节我们来说一下函数参数相关的一些问题。

可选参数

有的时候我们函数中需要传入的参数是可选的，在typescript中如何做类型检查呢？我们可以通过可选参数的功能来定义。

const myName = function (firstName: string, lastName?: string) {
  return `${firstName}—${lastName}`;
};

const name1 = myName('张');
const name2 = myName('张', '三');
const name4 = myName('张', '三', '三'); // 应有 1-2 个参数，但获得 3 个。

typescript的类型检查是传递给函数的参数个数必须与函数期望的参数个数相同，不然无法通过检查。上面的函数需要两个参数，当我们传入三个参数的时候就会报错。

默认值

有的时候我们在函数中需要定义默认值，方便我们在没有值的情况下程序可以正常使用。在typescript中可以这样定义：

function buildName(firstName = "Will", lastName: string) {
    return firstName + " " + lastName;
}
let result4 = buildName(undefined, "Adams");     // okay and returns "Will Adams"

此时，我们将鼠标虚浮到函数上，可以看到firstName参数类型是必选的,因为可选参数必须放到必选参数后面。在typescript中，我们带默认值的参数可以不放在必须参数后面。我们可以通过传入undefined来获得默认值。

如果我们后面的参数是可选的，那给了默认值的参数也是可选的。

const buildName = function (firstName = 'Will', lastName?: string) {
  return firstName + ' ' + lastName;
};
const result4 = buildName(undefined, 'Adams');

此时，我们将鼠标虚浮到函数上，可以看到firstName变成可选了。如果我们的参数都是可选的，包括给了默认值的参数，我们应该如何定义呢？

我们可以给整个函数声明完整的函数类型。

const buildName: (firstName?: string, lastName?: string) => string = function (
  firstName = 'Will',
  lastName: string
) {
  return firstName + ' ' + lastName;
};
const result4 = buildName(undefined, 'Adams');

此时通过(firstName?: string, lastName?: string) => string完整的函数声明，覆盖了默认的声明。

剩余参数

在ES6中，有剩余参数的写法，可以帮助我们把其他参数收集起来，在typescript里，我们也可以对其做类型检查

function buildName(firstName: string, ...restOfName: string[]) {
  return firstName + " " + restOfName.join(" ");
}

let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

总结

对于在typescript对函数参数做类型检查的介绍就先说这些吧，其他的等我们用到的时候再介绍。

vue3入门23 - typescript 函数参数

前言

可选参数

默认值

剩余参数

总结