第二章 TypeScript 函数详解

在 TypeScript 中,函数是实现特定功能的重要组成部分。

一、函数声明基础语法

使用 `function` 关键字声明函数,

例如:

复制代码
 function sum(a: number, b: number): number { return a + b; }

这里,`function` 是定义函数的关键字,`sum` 是函数名称,`a` 和 `b` 是参数,参数类型为 `number`,函数的返回值类型也为 `number`。

二、参数详解

1. 可选参数 通过在参数名后添加 `?` 来标识可选参数。

例如:

复制代码
function getPersonInfo(name: string, age: number, gender?: string): string { if (gender === undefined) { gender = '未知'; } return `name:${name},age:${age},gender:${gender}`; }

调用时可以不传递可选参数,此时该参数值为 `undefined`。

2. 默认参数 可以在参数列表中为参数指定默认值。

例如:

复制代码
 function fun1(name: string, age: number, gender: string = '未知'): string { return `name:${name},age:${age},gender:${gender}`; } 

三、特殊类型

1. 联合类型 当函数可能处理不同类型的值时,可以使用联合类型。

例如:

复制代码
function numOrString(message: number | string) { console.log(message); }
2. 任意类型 若函数需要处理任意类型的值,可使用 `any` 类型。

例如:

复制代码
 function funAny(message: any) { console.log(message); } 

四、返回值详解 如果函数没有返回值,使用 `void` 作为返回值类型。

例如:

复制代码
function demo(): void { console.log("aaaa"); }

五、函数声明特殊语法

1. 匿名函数 匿名函数适合简单且只使用一次的场景。

例如:

复制代码
 let numTest: number[] = [1, 2, 3]; 
numTest.forEach(function (number) { console.log(number); }); 

匿名函数能根据上下文推断参数类型,参数类型可省略。

2. 箭头函数 进一步简化匿名函数,只保留参数列表和函数体,用 `=>` 连接。

例如:

复制代码
 let num3: number[] = [1, 2, 3, 4, 5]; num3.forEach((num4) => { console.log(num4); }); 

总结

TypeScript 中的函数具有丰富的特性和灵活的用法。通过明确参数类型和返回值类型,可以提高代码的可读性和可维护性。可选参数和默认参数为函数的调用提供了更多的灵活性。联合类型和任意类型允许函数处理不同类型的值。而特殊语法如匿名函数和箭头函数则为开发者提供了简洁高效的编程方式。掌握 TypeScript 函数的这些特性,有助于开发出更加健壮、高效的应用程序。

相关推荐
程序员鱼皮2 小时前
前特斯拉 AI 总监:AI 编程最大的谎言,是 “提效”
前端·后端·ai·程序员·开发
pusheng20252 小时前
普晟传感2026年新春年会总结与分析
前端·javascript·html
D11_2 小时前
[特殊字符]️ 5379工具箱 - 全部网站链接汇总
服务器·百度·阿里云·typescript·编辑器
谢尔登2 小时前
React19事件调度的设计思路
前端·javascript·react.js
Emma_Maria2 小时前
本地项目html和jquery,访问地址报跨域解决
前端·html·jquery
奋斗吧程序媛2 小时前
常用且好用的命令
前端·编辑器
2301_796512522 小时前
【精通篇】打造React Native鸿蒙跨平台开发高级复合组件库开发系列:Lazyload 懒加载(懒加载的图片)
前端·javascript·react native·react.js·ecmascript·harmonyos
敲敲了个代码2 小时前
从N倍人力到1次修改:Vite Plugin Modular 如何拯救多产品前端维护困境
前端·javascript·面试·职场和发展·typescript·vite
摘星编程2 小时前
OpenHarmony环境下React Native:Timeline时间轴组件
javascript·react native·react.js
摘星编程2 小时前
在OpenHarmony上用React Native:Timeline水平时间轴
javascript·react native·react.js