来源：小满TypeScript基础教程全集（完结）

函数的类型

函数中需要被定义类型的地方有两处：接收的参数和返回值

1
2
3
4
5
6
7
8
9
10
11
12
// 参数的类型定义在参数后面
// 函数的返回值类型定义在小括号后面
function add(a:number, b:number): number {
  return a+b
}
console.log(add(114,514))

// 箭头函数也是一样的
const sub = (a:number, b:number): number=> {
  return a-b
}
console.log(sub(114,514))

接口定义函数

1
2
3
4
5
6
7
8
interface Add {
    (a:number, b:number): number
}
 
const add:Add = (a:number, b:number):number => {
    return a + b
}
add(5,5)

默认值参数和可选参数

在调用函数时，这两种参数都是非必传值的参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 给参数指定默认值，没有传对应的参时，则函数体中会使用参数的默认值
function add(a:number=114, b:number=514): number {
  return a+b
}
// 没传值
console.log(add())          // ->628
// 只传了a
console.log(add(1919))      // ->2433
// a和b都传了
console.log(add(810,364))   // ->1174


// 给参数设置可选，该参数可传可不传
function sub(a:number, b?:number): number {
  return a-b
}
// 只传了a
console.log(sub(114514))    // ->NaN
// a和b都传了
console.log(sub(1919,810))  // ->1109


// 1.参数默认值和参数可选不能设置给同一个参数
// 2.默认值参数和可选参数要放在所有普通参数的后面

引用类型参数

定义接口，并将参数的类型指定为该接口即可

1
2
3
4
5
6
7
8
9
10
11
12
13
interface User {
  name: string
  age: number
}

function addAge(user:User):User {
  return {
    name: user.name,
    age: user.age+1
  }
}

console.log(addAge({name:"yajue",age:23}))  // ->{ name: 'yajue', age: 24 }

剩余参数

函数中的剩余参数也可以定义类型（应是某种数组）

1
2
3
4
5
6
7
8
9
// 剩余参数被定义为any[]，即可以传任何剩余参数
// 如果剩余参数被定义为string[]，那么剩余参数只能是字符串
const fn = (array:number[],...items:any[]):any[] => {
  console.log(array,items)
  return items
}
 
let a:number[] = [1,2,3]
fn(a,'4','5','6')

函数this类型

TS可以定义this的类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
interface Obj {
  user:number[]
  add:(this:Obj,num:number)=>void
}

let obj:Obj = {
  user: [1,2,3],
  // 必须在第一个参数定义this的类型
  // 在JS里不能定义this的类型，JS会把this当成普通的参数名
  add(this:Obj,num:number) {
    // 定义this类型后，在函数体内使用this就有代码提示了
    this.user.push(num)
    console.log(this.user)  // ->[ 1, 2, 3, 4 ]
  }
}
// 传参时忽略this
obj.add(4)

函数重载

可以根据参数和返回值类型的不同，让一个函数实现不同的功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
let user:number[] = [1,2,3]

// 声明三个函数重载
// 如果传的是number类型的数组，就做添加
function findNum(add:number[]):number[]
// 如果传的是一个number，就单个查询
function findNum(id:number):number[]
// 如果没有传参，就查询全部
function findNum():number[]

// 实现函数重载
function findNum(ids?:number|number[]):number[] {
  if(typeof ids == "number") {
    // 如果传入的是数字，就单个查询
    return user.filter(v=>v==ids)
  } else if(Array.isArray(ids)) {
    // 如果传的是一个number，就单个查询
    user.push(...ids)
    return user
  } else {
    // 如果没有传参，就查询全部
    return user
  }
}