门户网站建设创新网页设计首页子页

门户网站建设创新,网页设计首页子页,网站logo设计创意,统一门户网站TypeScript 函数详解 TypeScript 的函数语法与 JavaScript 基本一致#xff0c;但增加了强大的类型支持#xff0c;包括参数类型、返回值类型、可选参数、默认参数、剩余参数、重载等。这些特性让函数更安全、更易维护。 1. 基本函数声明与表达式 // 函数声明#xff08;…TypeScript 函数详解TypeScript 的函数语法与 JavaScript 基本一致但增加了强大的类型支持包括参数类型、返回值类型、可选参数、默认参数、剩余参数、重载等。这些特性让函数更安全、更易维护。1. 基本函数声明与表达式// 函数声明Function Declarationfunctionadd(a:number,b:number):number{returnab;}// 函数表达式Function Expressionconstsubtract:(x:number,y:number)number(x,y)x-y;// 箭头函数Arrow Function——推荐用于简短函数constmultiply(a:number,b:number):numbera*b;TS 优势参数和返回值必须指定类型或通过推断。编译时检查类型匹配避免运行时错误。add(10,20);// 编译错误参数类型不匹配2. 可选参数与默认参数// 可选参数用 ? 表示必须放在必选参数后面functiongreet(name:string,greeting?:string):string{return${greeting??Hi}${name};}greet(Alice);// Hi Alicegreet(Bob,Hello);// Hello Bob// 默认参数ES6 支持functionlog(message:stringInfo):void{console.log(message);}log();// Infolog(Error);// Error3. 剩余参数Rest Parametersfunctionsum(...numbers:number[]):number{returnnumbers.reduce((total,n)totaln,0);}sum(1,2,3,4);// 10sum();// 0剩余参数类型必须是数组类型。4. 函数重载Function OverloadingTypeScript 支持函数重载同一个函数名根据不同参数类型/数量提供不同实现。functionformat(value:string):string;functionformat(value:number,digits:number):string;functionformat(value:any,digits?:any):string{if(typeofvaluestring){returnvalue.toUpperCase();}if(typeofvaluenumber){returnvalue.toFixed(digits??2);}returnString(value);}format(hello);// HELLOformat(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);// Alice6. void、never 与函数返回值// void函数无返回值返回 undefined 也算 voidfunctionwarn():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)xy;constdivide:BinaryOperation(x,y){if(y0)thrownewError(除零);returnx/y;};8. 异步函数async/awaitasyncfunctionfetchData(url:string):Promisestring{constresponseawaitfetch(url);if(!response.ok)thrownewError(网络错误);returnawaitresponse.text();}// 使用fetchData(https://api.example.com).then(dataconsole.log(data)).catch(errconsole.error(err));返回类型通常为PromiseT。9. 最佳实践建议建议示例说明始终标注返回值类型: string而非省略提升可读性参数尽量避免any用具体类型或泛型替代使用箭头函数作为回调避免 this 指向问题复杂函数优先使用重载提供更好的类型提示开启noImplicitAny强制显式类型避免隐式 any短函数用箭头长函数用声明可读性更好小结函数声明速查表类型语法示例适用场景普通函数声明function fn(a: number): string {}复杂逻辑箭头函数const fn (a: number) string简短、回调可选/默认参数function fn(name: string, age?: number 18)灵活调用剩余参数function fn(...args: string[])不定参数函数重载多签名 一个实现多态行为async 函数async function fn(): PromiseT异步操作如果您想深入某个部分如泛型函数、函数装饰器、高阶函数、或 React 中的函数组件或者需要完整示例代码请告诉我