普洱市网站建设_网站建设公司_页面加载速度_seo优化

TypeScript 函数详解

TypeScript 的函数语法与 JavaScript 基本一致，但增加了强大的类型支持，包括参数类型、返回值类型、可选参数、默认参数、剩余参数、重载等。这些特性让函数更安全、更易维护。

1. 基本函数声明与表达式

// 函数声明（Function Declaration）functionadd(a:number,b:number):number{returna+b;}// 函数表达式（Function Expression）constsubtract:(x:number,y:number)=>number=(x,y)=>x-y;// 箭头函数（Arrow Function）——推荐用于简短函数constmultiply=(a:number,b:number):number=>a*b;

TS 优势：

• 参数和返回值必须指定类型（或通过推断）。
• 编译时检查类型匹配，避免运行时错误。

add(10,"20");// 编译错误：参数类型不匹配

2. 可选参数与默认参数

// 可选参数（用 ? 表示，必须放在必选参数后面）functiongreet(name:string,greeting?:string):string{return`${greeting??"Hi"}${name}`;}greet("Alice");// "Hi Alice"greet("Bob","Hello");// "Hello Bob"// 默认参数（ES6+ 支持）functionlog(message:string="Info"):void{console.log(message);}log();// "Info"log("Error");// "Error"

3. 剩余参数（Rest Parameters）

functionsum(...numbers:number[]):number{returnnumbers.reduce((total,n)=>total+n,0);}sum(1,2,3,4);// 10sum();// 0

剩余参数类型必须是数组类型。

4. 函数重载（Function Overloading）

TypeScript 支持函数重载：同一个函数名，根据不同参数类型/数量提供不同实现。

functionformat(value:string):string;functionformat(value:number,digits:number):string;functionformat(value:any,digits?:any):string{if(typeofvalue==="string"){returnvalue.toUpperCase();}if(typeofvalue==="number"){returnvalue.toFixed(digits??2);}returnString(value);}format("hello");// "HELLO"format(3.14159,2);// "3.14"

规则：

• 先写多个重载签名（只有类型，没有实现）。
• 最后写实际实现函数（兼容所有重载）。

5. this 类型处理

箭头函数会捕获外部this，普通函数在 TS 中可显式声明this参数。

interfaceUser{name:string;}functionshowName(this:User){console.log(this.name);}constuser:User={name:"Alice"};showName.call(user);// "Alice"

6. void、never 与函数返回值

// void：函数无返回值（返回 undefined 也算 void）functionwarn():void{console.log("Warning!");}// never：函数永远不会正常返回（抛错或无限循环）functionerror(msg:string):never{thrownewError(msg);}functioninfiniteLoop():never{while(true){}}

7. 函数类型定义

可以单独定义函数类型，然后赋值。

// 类型别名typeBinaryOperation=(a:number,b:number)=>number;constadd:BinaryOperation=(x,y)=>x+y;constdivide:BinaryOperation=(x,y)=>{if(y===0)thrownewError("除零");returnx/y;};

8. 异步函数（async/await）

asyncfunctionfetchData(url:string):Promise<string>{constresponse=awaitfetch(url);if(!response.ok)thrownewError("网络错误");returnawaitresponse.text();}// 使用fetchData("https://api.example.com").then(data=>console.log(data)).catch(err=>console.error(err));

返回类型通常为Promise<T>。

9. 最佳实践建议

小结：函数声明速查表

如果您想深入某个部分（如泛型函数、函数装饰器、高阶函数、或 React 中的函数组件），或者需要完整示例代码，请告诉我！