TypeScrip默认参数、构造函数、匿名函数、箭头函数、接口函数.

目录

基本使用介绍

构造函数

函数的重载

参数类型不同：

参数数量不同：

参数类型顺序不同：

函数的基本使用

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('熊二');