9 函数与接口 📦之函数的定义与调用
在上一章中,我们探讨了 TypeScript 的基本类型和类型推断。在本章里,我们将聚焦于函数的定义与调用。函数是编程中的重要组成部分,TypeScript 为函数提供了类型定义的能力,以确保更好的类型安全和代码可读性。
函数的定义
在 TypeScript 中,函数的定义与 JavaScript 类似,但我们可以为函数的参数和返回值指定类型,从而增强代码的可读性和可维护性。
函数的基本语法
以下是 TypeScript 中定义函数的基本语法:
function functionName(parameter1: type1, parameter2: type2): returnType {
// function body
}
functionName
是函数的名称。parameter1
,parameter2
是函数的参数,其中type1
,type2
是对应的类型。returnType
是函数的返回值类型。
###示例:函数的定义
让我们来看一个简单的函数,它接受两个数字并返回它们的和:
function add(x: number, y: number): number {
return x + y;
}
// 调用函数
const result = add(5, 10);
console.log(result); // 输出 15
在这个示例中,我们定义了一个名为 add
的函数,它接受两个 number
类型的参数,并返回一个 number
类型的结果。
函数的调用
在 TypeScript 中,调用函数的方法与 JavaScript 完全相同。我们只需使用函数名后跟圆括号并传递所需的参数。
示例:函数调用
继续上述的 add
函数,我们可以通过不同的方式调用它:
const sum1 = add(3, 4);
const sum2 = add(10, 20);
console.log(sum1); // 输出 7
console.log(sum2); // 输出 30
在这个示例中,我们多次调用 add
函数并将返回的结果保存在不同的变量中。
可选参数和默认参数
在 TypeScript 中,函数可以有可选参数和默认参数。可选参数用问号 ?
表示,默认参数则是在参数列表中直接赋值。
示例:可选参数和默认参数
function greet(name: string, greeting: string = "Hello", age?: number): string {
let message = `${greeting}, ${name}`;
if (age !== undefined) {
message += `. You are ${age} years old.`;
}
return message;
}
console.log(greet("Alice")); // 输出 "Hello, Alice"
console.log(greet("Bob", "Hi")); // 输出 "Hi, Bob"
console.log(greet("Charlie", "Hey", 25)); // 输出 "Hey, Charlie. You are 25 years old."
在这个示例中,greeting
是一个默认参数,如果调用时不传递它,则默认为 "Hello"。age
是一个可选参数,可以选择性地提供。
剩余参数
TypeScript 还支持剩余参数,用于处理不确定数量的参数。我们可以使用 ...
符号来表示剩余参数。
示例:剩余参数
function concatenateStrings(...strings: string[]): string {
return strings.join(", ");
}
console.log(concatenateStrings("a", "b", "c")); // 输出 "a, b, c"
console.log(concatenateStrings("Hello", "World")); // 输出 "Hello, World"
在这个示例中,concatenateStrings
函数可以接收多个字符串参数,并将它们连接成一个字符串。
总结
在本章中,我们探讨了 TypeScript 中函数的定义与调用,包括函数的基本语法、可选参数、默认参数和剩余参数。通过为函数的参数和返回值指定类型,我们能够在编译时捕获潜在的错误,提升代码的质量。
在下一章中,我们将进一步学习如何在 TypeScript 中指定函数类型,这将使我们对函数的使用更加灵活和强大。