TypeScript 函数

17 Mar 2025 | 4 分钟阅读

函数是 JavaScript 中任何应用程序的基本构建块。它使代码可读、可维护和可重用。我们可以用它来构建抽象层，模仿类、信息隐藏和模块。但是，在 TypeScript 中，我们有类、命名空间和模块的概念，但函数仍然是描述如何做事不可或缺的一部分。 TypeScript 还允许向标准 JavaScript 函数添加新功能，使代码更易于使用。

函数的优点

以下是函数的主要优点。

代码可重用性：我们可以多次调用一个函数，而无需再次编写相同的代码块。代码可重用性节省了时间并减少了程序大小。
更少的编码：函数使我们的程序更紧凑。因此，我们每次都不需要编写很多行代码来执行一个常见任务。
易于调试：它使程序员可以轻松地定位和隔离错误信息。

函数方面

函数有三个方面。

函数声明：函数声明告诉编译器函数名称、函数参数和返回类型。函数声明的语法是

函数定义：它包含要执行的实际语句。它指定将如何完成特定任务。函数定义的语法是

function functionName( [arg1, arg2, ...argN] ){  
         //code to be executed  
}  

函数调用：我们可以从程序中的任何位置调用一个函数。参数/自变量在函数调用和函数声明中不能不同。我们必须传递与函数声明中声明的相同数量的函数。函数调用的语法是

函数创建

我们可以通过两种方式创建函数。这些是

命名函数
匿名函数

命名函数

当我们通过给定的名称声明和调用一个函数时，这种类型的函数被称为命名函数。

语法

示例

//Function Definition
function display() {
    console.log("Hello JavaTpoint!");
}
//Function Call
display();

输出

匿名函数

没有名称的函数被称为匿名函数。这种类型的函数是在运行时动态声明的。它被定义为一个表达式。我们可以将其存储在一个变量中，因此它不需要函数名称。与标准函数一样，它也接受输入并返回输出。我们可以通过使用包含函数的变量名来调用它。

语法

示例

// Anonymous function
let myAdd = function (x: number, y: number) : number {
    return x + y;
};
// Anonymous function call
console.log(myAdd(5,3));

输出

函数参数

参数是传递给函数的值或自变量。在 TypeScript 中，编译器接受与函数签名中定义的相同数量和类型的自变量。如果编译器与函数签名中的参数不匹配，则会给出编译错误。

函数参数可以分为以下几类

可选参数
默认参数
剩余参数

可选参数

在 JavaScript 中，我们可以在不传递任何自变量的情况下调用一个函数。因此，在 JavaScript 函数中，参数是可选的，当我们这样做时，每个参数值都是未定义的。

与 JavaScript 不同，如果我们尝试在不提供与其函数签名中声明的参数的确切数量和类型的情况下调用函数，TypeScript 编译器将抛出错误。为了克服这个问题，我们可以使用带有问号 ('?') 的可选参数。这意味着可能接收也可能不接收值的参数可以附加一个“？”符号，以将其标记为可选。在下面的示例中，e_mail_id 被标记为可选参数。

语法

function function_name(parameter1[:type], parameter2[:type], parameter3 ? [:type]) { }

示例

function showDetails(id:number,name:string,e_mail_id?:string) { 
   console.log("ID:", id, " Name:",name); 
   if(e_mail_id!=undefined)  
   console.log("Email-Id:",e_mail_id); 
}
showDetails(101,"Virat Kohli");
showDetails(105,"Sachin","sachin@javatpoint.com");

输出

默认参数

TypeScript 提供了一个选项来为函数参数设置默认值。如果用户没有将值传递给自变量，TypeScript 会初始化参数的默认值。默认参数的行为与可选参数相同。对于默认参数，如果在函数调用中未传递值，则默认参数必须遵循函数签名中的必需参数。但是，如果函数签名在必需参数之前具有默认参数，我们仍然可以调用一个函数，该函数将默认参数标记为传递为未定义的值。

注意：我们不能同时使参数可选和默认。

语法

function function_name(parameter1[:type], parameter2[:type] = default_value) { }

示例

function displayName(name: string, greeting: string = "Hello") : string {
    return greeting + ' ' + name + '!';
}
console.log(displayName('JavaTpoint'));   //Returns "Hello JavaTpoint!"
console.log(displayName('JavaTpoint', 'Hi'));   //Returns "Hi JavaTpoint!".
console.log(displayName('Sachin'));    //Returns "Hello Sachin!"

输出

剩余参数

剩余参数用于将零个或多个值传递给一个函数。我们可以通过在参数之前加上三个“点”字符 ('...') 来声明它。它允许函数具有不同数量的自变量，而无需使用 arguments 对象。 TypeScript 编译器将使用剩余参数创建一个自变量数组，以便所有数组方法都可以与剩余参数一起使用。当我们有不确定数量的参数时，剩余参数很有用。

Rest 参数的规则

一个函数中只允许一个剩余参数。
它必须是数组类型。
它必须是参数列表中的最后一个参数。

语法

function function_name(parameter1[:type], parameter2[:type], ...parameter[:type]) { }

示例

function sum(a: number, ...b: number[]): number {
  let result = a;
  for (var i = 0; i < b.length; i++) {
  result += b[i];
  }
  return result;
}
let result1 = sum(3, 5);
let result2 = sum(3, 5, 7, 9);
console.log(result1 +"\n" + result2);

输出

下一个主题TypeScript 箭头函数

TypeScript 函数

函数的优点

函数方面

函数创建

命名函数

匿名函数

函数参数

可选参数

默认参数

注意：我们不能同时使参数可选和默认。

剩余参数

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

TypeScript 教程

差异

面试题

TypeScript 函数

函数的优点

函数方面

函数创建

命名函数

匿名函数

函数参数

可选参数

默认参数

注意：我们不能同时使参数 可选和 默认。

剩余参数

相关帖子

Typescript Map

Typescript 构建工具

函数重载

TypeScript 继承

类型注释

TypeScript vs JavaScript

TypeScript 版本

Typescript 接口

TypeScript 数字

TypeScript 访问器

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器

注意：我们不能同时使参数可选和默认。