网站推广教学,城乡建设部网站首页上海,电商商城网站建设,做搜狗手机网站优化软系列文章目录
TypeScript 从入门到进阶系列
TypeScript 从入门到进阶之基础篇(一) ts基础类型篇TypeScript 从入门到进阶之基础篇(二) ts进阶类型篇TypeScript 从入门到进阶之基础篇(三) 元组类型篇TypeScript 从入门到进阶之基础篇(四) symbol类型篇TypeScript 从入门到进阶…
系列文章目录
TypeScript 从入门到进阶系列
TypeScript 从入门到进阶之基础篇(一) ts基础类型篇TypeScript 从入门到进阶之基础篇(二) ts进阶类型篇TypeScript 从入门到进阶之基础篇(三) 元组类型篇TypeScript 从入门到进阶之基础篇(四) symbol类型篇TypeScript 从入门到进阶之基础篇(五) 枚举类型篇TypeScript 从入门到进阶之基础篇(六) 类型断言 、推论、别名| 联合类型 | 交叉类型 篇TypeScript 从入门到进阶之基础篇(七)泛型篇 持续更新中… 文章目录 系列文章目录TypeScript 从入门到进阶系列前言一、函数类型的使用1、直接定义函数2、使用接口定义函数3、类型别名定义函数4、函数中可选参数定义5、函数中默认参数定义5、函数中剩余参数定义6、函数中函数重载定义 函数使用总结 前言 函数是一种可重复使用的代码块是构建应用的一块基石。在本章我们将学习TypeScript 中如何定义函数。 在JavaScript中函数可以被定义、调用和传递给其他函数作为参数。函数可以用来组织代码使其更加模块化和可读性同时也提供了代码的重用性和灵活性。 一、函数类型的使用
1、直接定义函数 在TypeScript 使用函数的方法是直接定义函数所需参数的类型也是最基本的用法 function myFunctionType (data1:string,data2:string):string {return data1data2;
}
//箭头函数写法
const myFunctionType (data1:string,data2:string ):string {return data1data2;
}
需要注意的是 但我们的函数没有返回值时 ,就不能定义这个函数的返回值类型 void除外
//正确写法
function myFunctionType (data:string) {console.log (data)
}
//正确写法2
function myFunctionType (data:string) :void {console.log (data)
}
//错误写法 没有返回值的时后不要写 或者写void
function myFunctionType (data:string) :number{console.log (data)
}2、使用接口定义函数 上面是直接定义函数 同时 接口也可以用来定义函数 具体用法如下 //使用接口定义函数
interface MyFunctionType {(x: string, y: string): string;
}
const myFunction:MyFunctionType(x,y){
}3、类型别名定义函数 类型别名的方式来定义函数会更加明显 type MyFunctionType (a: number, b: number) number;const sum: MyFunctionType (a, b) {return a b;
};4、函数中可选参数定义 在函数的使用中可能会遇到 传参时有些参数非必传的具体用法如下 function myFunctionType (data1:string,data2?:string):string {return data1data2?data2:;
}const myFunctionType (data1:string,data2?:string ):string {return data1data2?data2:;
}interface MyFunctionType {(data1: string, data2?: string): string;
}const myFunction:MyFunctionType(data1,data2){return data1data2?data2:;
}
5、函数中默认参数定义 在 TypeScript 函数中可以通过在参数的后面使用 来定义默认参数。 function greet(name: string, greeting: string Hello) {console.log(${greeting}, ${name}!);
}greet(Alice); // 输出Hello, Alice!
greet(Bob, Hi); // 输出Hi, Bob!在上面的例子中greeting 参数被定义为默认参数它的默认值为 Hello。当我们调用 greet 函数时如果不提供 greeting 参数的值那么它将使用默认值 Hello。如果提供了 greeting 参数的值则使用提供的值。
5、函数中剩余参数定义 剩余参数的定义是指在函数的参数列表中使用三个点…来表示可以接收任意数量的传入参数并将这些参数存储为一个数组。剩余参数在函数内部以数组的形式进行操作。 function sum(...numbers: number[]): number {return numbers.reduce((total, num) total num, 0);
}console.log(sum(1, 2, 3)); // 输出 6
console.log(sum(10, 20, 30, 40)); // 输出 100在上述例子中函数 sum 使用剩余参数 ...numbers 来接收传入的任意数量的数字参数并将这些参数存储为一个数组 numbers。函数的实现中我们使用 reduce 方法对数组中的所有元素进行求和并返回求和结果。在调用函数时我们可以传入任意数量的参数它们会被作为一个数组传递给剩余参数。
6、函数中函数重载定义
在TypeScript中函数重载是指为同一个名称的函数提供多个不同的函数类型定义。通过函数重载可以根据参数的类型和个数的不同来决定函数的行为。
函数重载的定义方式如下
function 函数名(参数1: 类型1): 返回值类型;
function 函数名(参数1: 类型1, 参数2: 类型2): 返回值类型;
function 函数名(参数1: 类型1, 参数2: 类型2, 参数3: 类型3): 返回值类型;
// ...其中函数名必须相同但参数的类型和个数可以不同。每个函数定义都要指定参数的类型和返回值的类型。
TypeScript在编译时会根据参数的类型和个数来选择正确的函数定义。如果没有找到匹配的函数定义会报错。
下面是一个简单的示例
function foo(x: number): string;
function foo(x: string): number;
function foo(x: any): any {if (typeof x number) {return x.toString();} else if (typeof x string) {return parseInt(x);}
}console.log(foo(123)); // 输出 123
console.log(foo(456)); // 输出 456在这个例子中foo函数有两个重载一个接受number类型的参数并返回string类型另一个接受string类型的参数并返回number类型。根据传入的参数类型TypeScript会自动选择正确的函数定义。
函数使用总结 定义函数 使用function关键字定义函数可以指定参数类型和返回值类型。 使用箭头函数定义函数也可以指定参数类型和返回值类型。 函数参数 可以指定参数的类型可以是基本类型如string、number等或自定义类型。 参数可以设置默认值使用?来指定可选参数。 可以使用剩余参数rest parameters来接收不定数量的参数。 函数返回值 可以指定函数的返回值类型可以是基本类型或自定义类型。 可以使用void表示函数没有返回值。 可以使用泛型Generics来指定函数的返回值类型。 函数重载 TS支持函数重载即在函数定义时可以为同一个函数定义多个函数类型的签名。 函数重载的目的是为了增加函数的灵活性可以根据不同的参数类型和个数调用不同的函数实现。 函数类型 可以使用类型别名type alias或接口interface来定义函数类型。 可以将函数类型作为参数类型或返回值类型。
