跳转到主要内容
模块 3 · 第 1 课(共 2)课程中的5/14~12 min
模块课程(1/2)

类型化函数

函数是任何 JavaScript 应用程序的基本构建块。在 TypeScript 中,我们可以精确地注释输入参数和返回值,使我们的接口和函数调用极其安全和自记录。


可选和默认参数

在 JavaScript 中,每个参数都是可选的,如果省略,则默认为 undefined。在 TypeScript 中,默认情况下,每个声明的参数都是必需的。

但是,我们可以使用问号(?)定义可选参数,或者直接在函数签名中指定默认值。

1. 可选参数

可选参数必须位于所有强制参数的之后:

TS
function greetUser(name: string, title?: string): string {
  if (title) {
    return `Good morning ${title} ${name}`;
  }
  return `Hello ${name}`;
}

2. 默认参数

如果没有为具有默认值的参数提供值,TypeScript 会推断其类型并分配指定的默认值:

TS
function greetUserWithDefault(name: string, prefix: string = 'Hello'): string {
  return `${prefix} ${name}`;
}

其余参数 (...args)

当我们想要接受可变数量的参数时,我们可以使用剩余运算符。在 TypeScript 中,这些参数必须以数组形式输入:

TS
function sumAll(message: string, ...numbers: number[]): string {
  const total = numbers.reduce((sum, n) => sum + n, 0);
  return `${message} ${total}`;
}

函数类型(调用签名)

我们可以独立定义函数的类型,然后在变量声明或回调参数中重用它:

TS
// Define function type using type alias
type MathOperation = (a: number, b: number) => number;

const add: MathOperation = (x, y) => x + y;
const multiply: MathOperation = (x, y) => x * y;

当将函数作为参数传递给其他函数(回调)时,这种方法至关重要。


自己尝试一下

练习 1:可选参数

锻炼#ts.m3.l1.e1
尝试:0加载中...

创建一个名为 formatName 的函数,该函数接受firstName 参数(字符串)和可选的lastName 参数(字符串)。如果提供了姓氏,则返回“firstName姓氏”,否则仅返回“firstName”。

正在加载编辑器...
显示提示

请记住,可选参数是在强制参数之后使用 lastName?: 字符串声明的。

3 次尝试后可用的解决方案

练习 2:默认参数

锻炼#ts.m3.l1.e2
尝试:0加载中...

创建一个名为 power 的函数,它接受基数(数字)和指数(默认值为 2 的数字)。该函数必须计算并返回底数到指数的值(使用 Math.pow)。

正在加载编辑器...
显示提示

在函数签名中使用基数:number 和指数:number = 2。

3 次尝试后可用的解决方案

练习 3:函数签名

锻炼#ts.m3.l1.e3
尝试:0加载中...

定义一个名为 BinaryOp 的类型别名,它描述一个接受两个数字参数并返回一个数字的函数。接下来,声明一个名为 sum 的 BinaryOp 类型常量,用于实现加法。

正在加载编辑器...
显示提示

函数类型的语法为 (a: number, b: number) => number。

3 次尝试后可用的解决方案

练习 4:回调函数

锻炼#ts.m3.l1.e4
尝试:0加载中...

创建一个名为 processItems 的函数,它接受两个参数:items(字符串数组)和回调(接受单个字符串且不返回任何内容的函数,即 void)。该函数必须对 items 中的每个元素运行 for...of 循环并将其传递给回调。

正在加载编辑器...
显示提示

将签名声明为 processItems(items: string[], callback: (item: string) => void): void 并使用循环来调用回调。

3 次尝试后可用的解决方案