目录
基本使用介绍
构造函数
函数的重载
参数类型不同：
参数数量不同：
参数类型顺序不同：
函数的基本使用
1、匿名函数
2、有名函数|命名函数|普通函数
3、箭头函数
4、接口函数：
代码
基本使用 介绍
函数是JavaScript应用程序的基础，他帮你实现抽象层，模拟类，信息隐藏和模块。在TypeScript里，虽然已经支持类，命名空间和模块，但函数仍然是主要的定义，行为的地方。TypeScript为JavaScript函数添加了额外的功能，让我们可以更容易地使用。
函数分为匿名函数，命名函数(有名函数、普通函数)，箭头函数，接口函数（函数起别名）
函数定义的方式
//匿名函数 两个number类型参数 返回值为number类型
const fun = function(a:number,b:number):number{
return a+b
}
//调用
console.log(fun(10,20))
//有名函数 fu1就是函数名 括号后不限定则默认any
function fu1(name:string,age:number){
return name
}
//调用
console.log(fu1("张三",20))
//箭头函数 不使用function关键字 void类型表示不可设置返回值
//推荐多使用箭头函数
const fu2 = (time:number):void=>{
console.log(time)
}
fu2(2022)
为什么需要编译ts：因为浏览器不解析ts文件，所以需要编译为js文件
函数参数的处理 可选参数：
在TypeScript函数里，如果我们定义了参数，则我们必须传入这些参数，除非将这些参数设置为可选，问号 ？标识符
可选参数在严格模式下进行运算时会报错
默认参数：
我们也可以设置参数的默认值，如果不传入该参数的值，则使用默认参数，语法格式为z:number = 100
剩余参数：
有一种情况，当不知道像函数传多少参数时，这时候可以使用剩余参数来定义
剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。...args:any[]
//可选参数 类型 定义函数
const fun1:(a:number,b:number)=>number = (x:number,y?:number)=>{
return x
}
//调用函数 都不会报错
fun1(10,20)
//默认参数 z:number = 100 100为z的默认值 当不传z的值时使用，
const fun2 = function(x:number,y:number,z:number = 100){
return x+y+z;
}
//调用函数 都不会报错
fun2(100,200)
fun2(100,200,300)
//剩余参数
const fun3 = function(x:number,y:string,...args:any[]){
console.log(x);
console.log(y)
console.log(args)
}
//调用函数
fun3(122,"张三",123,321,"李四")
构造函数
TypeScript也支持使用JavaScript内置的构造函数Function()来定义函数
在实例化时调用构造函数直接传值
//语法格式
var myFunction = new Function("a","b","return a * b")
//实际运用
let myFun = new Function("a","b","return a * b");
//实例化
let res = myFun(10,20);
console.log(res) //200
函数的重载
重载是方法名字相同的，而参数不同，返回类型也可以想用或不相同
每个重载的方法（或者构造函数）都必须有一个独一无二的参数类型列表
参数类型不同：
function fu1(string):void;
function fu1(number):void;
参数数量不同：
function fu2(n1:number):void;
function fu2(n1:number,n2:number):void;
参数类型顺序不同：
function fu2(n1:number,n2:string):void;
function fu2(n1:string,n2:number):void;
如果参数不同：则将参数类型设置为any
参数数量不同：将不同的参数设置为可选
//函数重载语法格式
export default {};
// 创建一个重载函数
function chong(num1: any, num2: any) {
return num1 + num2;
}
console.log(chong("12312", 123)); //12312123
console.log(chong(12312, 123)); //12435
函数的基本使用
1、匿名函数
const aa = function (salary: number, amount: number): number {
return salary + amount;
}
let res1 = aa(100, 100);
console.log(res1);
2、有名函数|命名函数|普通函数
function bb(hous: string, sleep: string,) {
return hous
}
let res2 = bb('爱上对方过后就哭了', '阿斯顿法国红酒看');
console.log(res2);
3、箭头函数
const cc = (time: number): void => {
console.log(`我每天学习${time}个小时`);
}
cc(12);
4、接口函数：
//函数的约束
type dd = (a: number, b: number) => number
//函数具体实现
const dd = (a: number, b: number) => console.log(a*b);
dd(12,34);
代码
export default {}
//定义函数重载
function add(a: number, b: number): number
function add(a: string, b: string): string
function add(a: string, b: number): number
function add(a: number, b: string): number
// 使用函数重载
function add(a: any, b: any): any {
return a + b;
}
add(12, 34);
add('熊大', '熊二');
add('熊大', 23);
add(45, '熊二');
console.log(add(12, 34));
console.log(add('熊大', '熊二'));
console.log(add('熊大', 23));
console.log(add(45, '熊二'));
//函数参数不同
function star(a: string): void
function star(b: number, a: string): void;
function star(x:any, y?:any): void{
console.log(x);
console.log(y);
}
star('熊大');
star('熊二');
参考阅读
发表评论