TypeScript学习笔记2---ts的函数定义详解

前言：

TS中函数定义和JS是一模一样的，可以是普通函数申明，也可以函数表达式

但是在TS中针对函数做了很多的约束、函数的参数进行约束、函数的返回值进行了约束

一、函数的参数

在函数形参进行了约束，在传递值的时候，就必须按照指定的参数类型传递

• 参数个数必须满足要求
• 每个位置参数，数据类型一定要匹配

1、参数是数字和字符串时：

// 普通函数定义
function show(params:number,params2:string){
    console.log(params);
    console.log(params2);  
}
show(1,"xiaowang")

2、参数是对象/数组时：

const play = (user: { id: number }) => {
    console.log(user.id);
}
play({ id: 1 })

const play2 = (stus:string[]) => {
    console.log(stus); 
}
play2(["1","2"])

3、参数是可变参数时：

const play3 = (params:number,...params2:number[]) => {
    console.log(params);  // 1
    console.log(params2); // [2,3,4,5,6,7,8]
}

// 表示可变参数：参数的个数可以动态变化
play3(1,2,3,4,5,6,7,8)

 二、函数的返回值

• 你在TS中定义每个函数都应该有返回结果。
• 就算函数不需要返回，我们也应该告诉调用者，当前函数没有返回结果

// void代表当前函数没有返回结果，不写默认编辑器添加
function eat(num1:number):void{
    console.log(num1);
    return;
}
eat(10)

function eat2(num1:number,num2:number):string{
    const result:string = num1 + num2 + "";
    return result
}
const total2:string = eat2(20,30)

ps：写到这里可能用习惯了js的人会觉得很繁琐 ，俺第一次用的时候也很痛苦。

代码量看起来多了，写的时候也变慢了。。。但是其实是因为我们把思考的过程从报错的时候转移到了写代码的时候，用了ts之后，我们在浏览器f12控制台排bug的时间就减少了！