TypeScript 函数与函数表达式

注意: 如果您是 TypeScript 新手，请先查看我们的 TypeScript 入门 教程。

函数是一个独立的代码块，用于执行特定任务，而函数表达式是一种将函数存储在变量中的方法。

// Create a function named greet()
function greet(): void {
    console.log("Hello World!");
}

// Store a function in the displayPI variable
// This is a function expression
let displayPI = function(): void {
    console.log("PI = 3.14");
}

// Call the greet() function
greet();

// Call the displayPI() function
displayPI();

// Output:
// Hello World!
// PI = 3.14

创建 TypeScript 函数

我们可以使用 function 关键字并在其中指定返回类型来在 TypeScript 中创建函数。

function greet(): void {
    console.log("Hello World!");
}

在这里，我们创建了一个名为 greet() 的简单函数，它会在屏幕上打印 Hello World!。

我们的函数包含以下部分：

• Function 关键字 - function 关键字用于创建函数。
• 函数名 - 函数名为 greet，后跟括号 ()。
• 返回类型（可选） - 函数返回的值的数据类型。greet() 的返回类型为 void，表示它不返回任何值。
• 函数体 - 调用函数时要执行的代码。在我们的例子中，是 console.log("Hello World!");

调用函数

之前，我们声明了一个名为 greet() 的函数。

function greet(): void {
   console.log("Hello World!");
}

如果我们运行上面的代码，我们不会得到任何输出。但为什么呢？

因为创建函数并不意味着我们正在执行它里面的代码。换句话说，函数已经准备好并在我们选择执行时可用。

如果我们想使用该函数，我们需要调用它。

以下是我们如何调用函数：

greet();

正如您所见，我们通过编写函数名（greet）后跟括号 () 来调用函数。

示例 1：TypeScript 函数调用

// Create a function
function greet(): void {
    console.log("Hello World!");
}

// Call the function
greet();

console.log("Outside function");

输出

Hello World!
Outside function

在上面的示例中，我们创建了一个名为 greet() 的函数。程序的控制流程如下：

这里，

1. 当调用 greet() 函数时，程序控制会转移到函数定义（我们定义函数的地方）。
2. 函数内的所有代码都会执行（打印 Hello World!）。
3. 然后，程序控制会跳转到函数调用之后的下一条语句（打印 Outside function）。

TypeScript 函数参数

参数是在调用函数时传递给函数的实参。

// Function with a string parameter called 'name'
function greet(name: string): void {
    console.log(`Hello ${name}`);
}

// Pass argument to the function
greet("John");

// Output: Hello John

在上面的示例中，我们将 "John" 作为参数传递给 greet() 函数。

注意括号内声明的 name 变量。

function greet(name: string): void {
    // Code
}

在这里，name 是一个 **函数形参**，它充当存储函数实参的占位符。

换句话说，实参 "John" 存储在 name 形参中。

请记住：函数实参是我们传递给函数的具体值，而函数形参是存储传递给函数的实参的占位符。

将不同的实参传递给函数

我们可以在每次调用时传递不同的实参，使函数可重用且动态。

function greet(name: string): void {
    console.log(`Hello ${name}`);
}

// Pass "John" as argument
greet("John");

// Pass "David" as argument
greet("David");

输出

Hello John
Hello David

示例 2：TypeScript 函数相加

我们也可以将多个参数传递给一个函数。例如：

// Function with two arguments
// We haven't specified the return type to make the code clean
function addNumbers(num1: number, num2: number) {
    let sum = num1 + num2;
    console.log(`Sum: ${sum}`);
}

// Call function by passing two arguments
addNumbers(5, 4);

// Output:
// Sum: 9

在上面的示例中，我们创建了一个名为 addNumbers() 的函数，它有两个 number 类型的形参：num1 和 num2。在这里：

• num1 接收第一个实参 **5** 的值。
• num2 接收第二个实参 **4** 的值。

然后，函数将 num1 和 num2 的值相加，并将结果作为输出打印出来。

return 语句

我们可以使用 return 语句从 TypeScript 函数返回值。

// Function to find square of a number
function findSquare(num: number) : number {

    // Return the square of num
    return num * num; 
}

// Call the function and store the result
let square = findSquare(3);

console.log(`Square: ${square}`);

输出

Square: 9

在上面的示例中，我们创建了一个名为 findSquare() 的函数。该函数接受一个数字并返回该数字的平方。

由于数字的平方也是一个数字，因此我们将 findSquare() 的返回类型指定为 number。

这是我们的程序如何工作的：

1. 首先，我们将 **3** 作为实参传递给函数。
2. 因此，函数将 **3** 的平方（即 **9**）返回给函数调用。因此，返回值存储在 square 变量中。
3. 最后，执行函数调用之后的代码。在我们的例子中，它是打印 square 值的代码。

这个过程如下面的图所示：

// Function without explicit return type
function findSquare(num: number) {

    // Return the square of num
    return num * num; 
}

// Call the function and store the result
let square = findSquare(3);

// Print the data type of the return value
console.log(typeof square);

// Output: number

// Define a function defining the return type explicitly
function findSquare(num: number) {

    // Print the square
    console.log(num * num); 
}

// Call the function
findSquare(3);

// Output: 9

// Create a function without defining the parameter type
function greet(name): void {
    console.log(`Hello ${name}`);
}

// Pass string "John" as argument
greet("John");

// Pass number 5 as argument
greet(5);

Hello John
Hello 5

return 语句终止函数

return 语句之后的函数中的任何代码都不会执行。例如：

function display(): string {

    console.log("This will be executed.");

    return "Returning from function.";

    console.log("This will not be executed.");
}

let message: string = display();
console.log(message);

输出

This will be executed.
Returning from function.

在此示例中，display() 函数不会执行其中的第二个 console.log() 语句。

这是因为函数执行在 return 语句处停止。因此，以下代码永远不会被执行：

console.log("This will not be executed.");

实际发生的情况是这样的：

1. 首先，函数在屏幕上打印 This will be executed.。
2. 然后，它将字符串 "Returning from function." 返回给函数调用。
3. 最后，函数终止执行。
4. 返回值然后存储在 message 变量中并打印出来。

TypeScript 库函数

TypeScript 可以利用 JavaScript 的内置函数，这些函数可以直接在我们的程序中使用。我们不需要创建这些函数，只需要调用它们。

一些常见的 TypeScript 库函数是：

要了解有关库函数的更多信息，请访问 JavaScript 库函数。

示例 3：TypeScript 库函数

// Math.sqrt() computes the square root
let squareRoot: number = Math.sqrt(4);
console.log(`Square Root of 4 is ${squareRoot}`);

// Math.pow() computes the power
let power: number = Math.pow(2, 3);
console.log(`2 to the power of 3 is ${power}`);

// toUpperCase() converts text to uppercase
let band: string = "Iron Maiden";
let bandUpper = band.toUpperCase();
console.log(`Favorite Band: ${bandUpper}`);

输出

Square Root of 4 is 2
2 to the power 3 is 8
Favorite Band: IRON MAIDEN

这里，

函数表达式

在 TypeScript 中，函数表达式是一种将函数存储在变量中的方法。例如：

// Store a function in the square variable
// The function takes an argument of number type
// And, it returns a number value
let square = function(num: number): number {
    return num * num;
};

console.log(square(5));  

// Output: 25

在此示例中，计算数字平方的函数被赋值给 square 变量。

然后，我们使用该变量通过代码 square(5) 来调用函数表达式，其中 **5** 是函数实参。

注意：与函数一样，我们需要在变量名后使用括号 () 来调用函数表达式。

// Declare a variable of Function type
let square: Function;

// Turn square into a function expression
square = function(num: number) {
    return num * num;
};

console.log(square(5));  

// Output: 25

另请阅读

• TypeScript 默认参数
• TypeScript 箭头函数