当前位置：首页 > TypeScript > TypeScript函数定义与参数类型详解

TypeScript函数定义与参数类型详解

作者：拾光时间：2026-10-24 20:35:55浏览：205

本文详细解析TypeScript中函数的三种声明方式，重点阐述如何为参数和返回值添加类型注解。内容涵盖可选参数、默认参数的实现机制，以及剩余参数的定义与使用，帮助开发者掌握TS函数的类型安全特性。

1.函数定义

1.1JavaScript中的函数

在深入TypeScript函数之前，有必要先回顾JavaScript中常见的几种函数定义方式。

第一种方式是通过function关键字来声明函数。


function add1 (x, y) {
    return x + y
}

第二种方式是利用函数字面量进行声明。


const add2 = function (x, y) {
    return x + y
}

第三种方式则是采用箭头函数语法来定义。


const add3 = (x, y) => {
    return x + y
}

1.2TypeScript中的函数

TypeScript中的函数声明语法与JavaScript基本一致，主要区别在于TypeScript强制要求明确指定参数类型和返回值类型。若函数没有返回值，必须显式声明为void类型，而不能留空。

下面展示如何使用TypeScript语法重新定义上述三种函数。

第一种：使用function关键字声明函数。


/*
 语法结构如下
 function 函数名(形参1: 类型, 形参2: 类型,...): 返回值类型 {
     函数体
 }
 */
function add4(x: number, y: number): number {
    return x + y
}

第二种：使用字面量方式声明函数。


/*
 语法结构如下
 const 函数名 = function (形参1: 类型, 形参2: 类型,...): 返回值类型 {
     函数体
 }
 */
const add5 = function (x: number, y: number): number {
    return x + y
}

第三种：使用箭头函数声明函数。


/*
 语法结构如下
 const 函数名 = (形参1: 类型, 形参2: 类型,...): 返回值类型  => {
     函数体
 }
 */
// 3. 使用箭头函数声明函数
const add6 = (x: number, y: number): number => {
    return x + y
}

以上即为TypeScript中声明函数的基本方式。此外，JavaScript支持参数解构赋值，那么在TypeScript中如何为解构参数指定类型呢？参考以下示例代码。


const add7 = ({ x, y }: { x: number; y: number }): number => {
    return x + y
}

在TypeScript中，还有一种可读性更高的写法，如下所示。


const add8: (baseValue: number, increment: number) => number = function (
    x: number,
    y: number
): number {
    return x + y
}

这种写法将函数类型定义与函数实现分离，等号前面指定函数的参数类型和返回值类型，等号后面才是具体的函数定义部分。

这种分离写法的主要目的是提高代码的可读性，在实际功能上并无额外优势。

2.可选参数和默认参数

TypeScript 中定义的每个函数，其参数默认都是必填的。这并不意味着不能传递undefined或null作为参数值，而是指调用函数时必须为每个形参提供对应的实参值。如果实参数量与形参数量不一致，程序将抛出异常。简而言之，就是要求形参个数与实参个数严格一致。

示例代码如下所示。


function add(x: number, y: number): number {
    return x + y
}
let result1 = add(1) //  Expected 2 arguments, but got 1.
let result2 = add(1, 2)
let result3 = add(1, 2, 3) //  Expected 2 arguments, but got 3

在JavaScript中，所有参数默认都是可选的，调用时可以传递也可以不传递。如果不传递参数，其值默认为undefined 。

在TypeScript中同样可以实现可选参数功能，只需在参数名后添加问号（?）即可。

如下代码所示。


// 实现可选参数功能
// 参数名旁加一个?即可
function add(x: number, y?: number): number {
  return x + y
}
let result1 = add(1)
let result2 = add(1, 2)
// let result3 = add(1, 2, 3) //  Expected 2 arguments, but got 3

上述代码成功实现了可选参数的功能。

在TypeScript中实现默认参数的方式与JavaScript完全相同，只需在参数定义时直接赋值即可。

示例代码如下所示。


;(function () {
  function add(x: number, y: number = 2): number {
    return x + y
  }
  let result1 = add(1) // 3
  let result2 = add(1, 2) // 3
})()

当然，如果不为y指定类型，其行为将与JavaScript中的默认参数行为一致。

3.剩余参数

所谓剩余参数，是指函数定义时声明了两个参数，但调用时传递了三个或更多参数，多出来的部分即为剩余参数。

在JavaScript中，我们可以使用arguments对象来访问所有传递的参数。那么在TypeScript中如何访问剩余参数呢？

实际上，TypeScript允许将所有剩余参数存储在一个数组变量中，该变量本质上是一个解构后的数组。

示例代码如下：


function fun(x: number, ...numbers: number[]): void {
    console.log(numbers)
}
fun(1, 2, 3, 4) // [ 2, 3, 4 ]

到此这篇关于TypeScript中的函数的文章就介绍到这了,更多相关TypeScript函数内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

JS处理含Emoji或中文的字符串转数组乱码问题

2026-11-05 16:12:28

JS怎么使用展开运算符合并对象

2026-11-05 14:42:18

ES6+环境下判断JS对象为空的简洁写法

2026-11-05 12:12:23

怎么通过replacer函数自定义JS中JSON的格式化输出

2026-11-05 11:19:44

JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符

2026-11-05 11:16:58

相关文章
更多