本文献给已掌握 TypeScript 基础类型系统原始类型、数组、元组、枚举、联合类型、交叉类型、类型断言等的开发者。本文将系统讲解函数中参数与返回值的类型注解规则包括可选参数、默认参数、剩余参数及函数类型表达式。你将学到函数参数与返回值的基本注解语法可选参数?的定义与限制默认参数的类型推断与显式注解剩余参数...的数组类型注解函数类型表达式箭头函数形式的写法目录一、函数参数注解1.1 基本参数注解1.2 可选参数Optional Parameters1.3 默认参数Default Parameters1.4 剩余参数Rest Parameters二、函数返回值注解2.1 基本返回值注解2.2 返回值类型推断2.3 返回 never 类型的函数2.4 返回对象或复杂类型三、函数类型表达式3.1 基本写法3.2 作为参数类型3.3 作为返回值类型3.4 参数为函数时的类型推断四、常见错误与注意事项4.1 可选参数后出现必需参数4.2 默认参数与可选参数混用4.3 返回值类型为 void 但实际返回了值4.4 函数类型表达式中的参数名不影响类型4.5 缺少返回值注解导致意外联合类型五、综合示例六、小结一、函数参数注解1.1 基本参数注解每个参数在声明时必须标注类型除非有默认值见 1.3。functiongreet(name:string,age:number):string{return${name}is${age}years old;}// 调用时参数数量与类型必须匹配greet(Alice,25);// OKgreet(25,Alice);// ❌ 类型不匹配greet(Alice);// ❌ 缺少第二个参数1.2 可选参数Optional Parameters用?标记参数为可选可选参数必须放在必需参数之后。functionbuildName(first:string,last?:string):string{returnlast?${first}${last}:first;}buildName(Alice);// OKbuildName(Alice,Lee);// OKbuildName(Alice,Lee,Jr);// ❌ 参数过多可选参数的类型实际上是T | undefined。调用时传undefined也会被当作未传递buildName(Alice,undefined);// OK等价于不传1.3 默认参数Default Parameters为参数提供默认值后该参数变为可选且类型可以从默认值推断。functionmultiply(a:number,b:number1):number{returna*b;}multiply(5);// OKb 取 1multiply(5,3);// OKb 取 3即使参数有默认值也可以显式注解类型通常不必要functiongreet(name:string,greeting:stringHello):string{return${greeting},${name};}注意带默认值的参数不需要放在最后但放在前面会影响调用时的可读性TypeScript 允许functionlog(level:stringinfo,message:string):void{console.log([${level}]${message});}log(error,Something wrong);// OKlog(undefined,Default level);// 必须显式传 undefined 来使用默认值通常仍建议默认参数放在末尾。1.4 剩余参数Rest Parameters剩余参数用于接收不定数量的参数用...表示类型注解为数组类型。functionsum(base:number,...numbers:number[]):number{returnbasenumbers.reduce((acc,n)accn,0);}sum(10,1,2,3);// 16sum(10);// 10numbers 为空数组剩余参数必须是最后一个参数且只能有一个。如果剩余参数的元素类型不同可以使用元组类型functionlogAll(...args:[string,number,boolean]):void{console.log(args);}logAll(a,1,true);// OKlogAll(a,1);// ❌ 缺少第三个更常见的是用数组类型...args: string[]。二、函数返回值注解2.1 基本返回值注解在参数列表后加: 类型标注返回值类型。functiongetRandom():number{returnMath.random();}functionlogMessage(msg:string):void{console.log(msg);}如果函数没有返回值或只返回undefined用void。明确返回undefined也可以标注为void或undefined但void更常用。2.2 返回值类型推断TypeScript 能自动推断返回值类型但显式注解可以防止实现出错。// 推断返回 stringfunctiongetGreeting(name:string){returnHello,${name};}// 显式注解如果误返回其他类型会报错functiongetGreeting2(name:string):string{// return 123; // ❌ 不能将 number 赋给 stringreturnHello,${name};}2.3 返回 never 类型的函数某些函数永远不会正常返回抛出异常或无限循环返回值类型应为never。functionthrowError(message:string):never{thrownewError(message);}functioninfiniteLoop():never{while(true){}}2.4 返回对象或复杂类型返回值可以是对象字面量类型、类型别名或接口。typePoint{x:number;y:number};functioncreatePoint(x:number,y:number):Point{return{x,y};}三、函数类型表达式函数类型表达式用于描述函数的形状参数类型和返回值类型语法类似箭头函数。3.1 基本写法typeMathOperation(a:number,b:number)number;constadd:MathOperation(x,y)xy;constsubtract:MathOperation(x,y)x-y;参数名称可以省略类型检查只关心类型位置但保留可读性更好。3.2 作为参数类型functionprocess(value:number,callback:(result:number)void):void{constoutputvalue*2;callback(output);}process(5,(res)console.log(res));// 103.3 作为返回值类型functioncreateMultiplier(factor:number):(n:number)number{return(n)n*factor;}constdoublecreateMultiplier(2);console.log(double(5));// 103.4 参数为函数时的类型推断回调函数参数的类型可以自动推断不必显式注解constitems[1,2,3];items.forEach((item){console.log(item.toFixed(2));// item 被推断为 number});四、常见错误与注意事项4.1 可选参数后出现必需参数functionfn(a?:string,b:number){}// ❌ 可选参数后不能跟必需参数4.2 默认参数与可选参数混用functionfn(a:stringdefault,b?:number){}// OK但 b 可选通常只选一种风格默认参数或?避免混淆。4.3 返回值类型为 void 但实际返回了值functionlog(msg:string):void{returnsomething;// ❌ 不能返回 string}但返回undefined或null非严格模式下是允许的functiontest():void{returnundefined;// OK}4.4 函数类型表达式中的参数名不影响类型typeFn(x:number)string;// 以下赋值合法参数名可以不同constf:Fn(y)y.toString();4.5 缺少返回值注解导致意外联合类型functiongetValue(flag:boolean){if(flag){returnyes;}return0;// 推断为 string | number可能不是预期}显式注解可避免。五、综合示例// 定义用户处理函数typeUser{id:number;name:string;email?:string;};// 基本参数与返回值注解functioncreateUser(id:number,name:string,email?:string):User{constuser:User{id,name};if(email){user.emailemail;}returnuser;}// 默认参数functionformatUser(user:User,prefix:stringUser: ):string{return${prefix}${user.name}(ID:${user.id});}// 剩余参数批量创建用户functioncreateUsers(...userData:[number,string][]):User[]{returnuserData.map(([id,name])createUser(id,name));}// 函数类型表达式作为参数functionprocessUsers(users:User[],processor:(u:User)string):string[]{returnusers.map(processor);}// 使用constuserscreateUsers([1,Alice],[2,Bob]);constdescriptionsprocessUsers(users,(user){return${user.name}${user.email?(${user.email}):};});console.log(descriptions);// [Alice, Bob]六、小结概念语法示例说明参数注解function f(p: string) {}每个参数必须标注类型可选参数function f(p?: string) {}用?必须在必需参数之后默认参数function f(p: string default) {}类型可推断通常放末尾剩余参数function f(...nums: number[]) {}数组类型必须是最后一个返回值注解function f(): number {}推荐显式注解函数类型表达式type F (a: number) string用于描述函数形状觉得文章有帮助别忘了 点赞 – 给我一点鼓励⭐ 收藏 ⭐– 方便以后查看 关注 – 获取更新通知标签#TypeScript#函数类型#参数注解#返回值注解#前端开发