3、TypeScript 函数

目录

1. 函数的基本使用

2. 函数参数的处理

3. 构造函数

4. 函数重载

参数类型不同：

参数类型不同：

---

1. 函数的基本使用

• 介绍

  函数是JavaScript应用程序的基础。它帮助你实现抽象层，模拟类，信息隐藏和模块。TypeScript里，虽然已经支持类，命名空间和模块，但函数仍然是主要的定义行为的地方。TypeScript为JavaScript函数添加了额外的功能，让我们可以更容易地使用

• 函数定义的方式

export default {}

// 匿名函数
const makeMoney=function(salary:number,reward:number):number {
    return salary+reward
}

let res=makeMoney(1000,500)

console.log(res)

// 有名函数 | 命名函数 | 普通函数
function writeCode(hour:number,sleep:number):number {
    return hour
}

let res1=writeCode(8,1)
console.log(`我今天写代码${res1}小时`)

// 箭头函数
// const watchTv=(time:number):void=>{
//     console.log(`我今天看${time}小时电视`)   
// }

const watchTv=(time:number):void=> console.log(`我今天看${time}小时电视`)   

watchTv(3)

// 接口函数
type myFunc=(a:number, b:number) =>number

const a:myFunc=(x:number ,y:number) =>{
    return x + y
}
let b=a(50,30)
console.log(b)

2. 函数参数的处理

• 可选参数:

  在TypeScript函数里,如果我们定义了参数,则我们必须传入这些参数，除非将这些参数设置为可选,可选参数使用问号标识

• 默认参数:

  我们也可以设置参数的默认值,这样在调用函数的时候，如果不传入该参数的值,则使用默认参数,语法格式为 ` `

function function_name(param1[:type],param2[:type] = default_value) {}

• 剩余参数: 有一种情况，我们不知道要向函数传入多少个参数，这时候我们就可以使用剩余参数来定义。

  剩余参数语法允许我们将个不确定数 量的参数作为一个数组传入。...args :any[]

export default {}

// 可选参数
// const fun1:(a:number,b:number)=>number=(x:number,y:number)=>{
//     return x
// }

// const fun2=function(a:number,b?:number):number{
//     return a
// }

// fun2(10)
// fun2(10,20)
// fun2(10,undefined)


// 参数的默认值
const fun3=function(x:number=100,y:number=200,z:number=300){
    return x+y+z
}

fun3()  //600
let res=fun3(200,300,400)
console.log(res)    //900
console.log(fun3(1,2))  //303


//函数的剩余参数
const func4=function(...args:any[]){
    console.log(args);
}

func4(1,2,3,4,5,"李易峰");  //[ 1, 2, 3, 4, 5, '李易峰' ]

const func5=function(a:number,b:string,...args:any[])
{
console.log(a); //100
console.log(b); //杨幂
console.log(args)   //[ '唐媛', '胡歌', '刘诗诗' ]
}

func5(100,"杨幂","唐媛","胡歌","刘诗诗");

3. 构造函数

TypeScript也支持使用JavaScript内置的构造函数Function0来定义函数:

语法格式如下:

var res = new Function ([arg1[，arg2[，...argN]],] functionBody)

参数说明:

• arg1, arg2, ...argN: 参数列表

• functionBody: -个含有包括函数定义的JavaScript语句的字符串。

export default {}

// 构造函数

var myFunc = new Function("a","b","return a*b")
var res = myFunc(10,20)
console.log(res)    //200

4. 函数重载

重载是方法名字相同，而参数不同，返回类型可以相同也可以不同。

每个重载的方法(或者构造函数)都必须有一个独一 无二的参数类型列表。

参数类型不同：

function disp(string):void;

function disp (number):void;

参数类型不同：

function disp(n1: number):void;

function disp(x:number , y:number):void;

参数类型顺序不同：

function disp(n1:number ,s1:string):void;

function disp(s:string ,n:number):void;

如果参数类型不同，则参数类型应设置为 any。

参数数量不同你可以将不同的参数设置为可选。

export default {}

// //不使用函数重载的问题
// function add(a: number, b: number){
//     return a + b;
// }

// add(10, 20);

// function add2(a: string, b: string){
//     return a + b;
// }

// add2("我的女神是: ","邱淑贞");



// function add3(a:string | number, b:string | number){
//     // return a + b;
//     if( typeof a=="number" && typeof b=="number"){
//         return a + b;
//     }
//     if( typeof a=="string" && typeof b=="string"){
//         return a + b;
//     }
//     if( typeof a=="string" && typeof b=="number"){
//         return a + b;
//     }
//     if( typeof a=="number" && typeof b=="string"){
//         return a + b;
//     }
// }
// add3("我的女神是: ","邱淑贞");
// add3(10,20);
// add3("邱淑贞",20);


// 使用函数重载
function addFunc(a:number,b:number):number
function addFunc(a:number,b:string):string
function addFunc(a:string,b:string):string
function addFunc(a:string,b:number):string

function addFunc(a:any,b:any):any{
    return a+b
}

addFunc(10,20)
addFunc(10,"张三")
addFunc("张三","李四")
addFunc("张三",10)


// 定义参数类型与参数数量不同
function star(s1:string):string
function star(s1:string,n1:number):void

function star(s1:any,n1?:any):any {
    console.log(s1)
    console.log(n1)
    // return s1+n1
}

star("王五")
star("王五",20)


function test(s1:any,n1?:any):any {
    return s1+n1
}

let arr = test("老七",30)
console.log(arr)