Shuo的博客

TS基础语法(二)

本文主要介绍TS基础语法。
 TypeScript  597  2 分钟

TS基础语法(二)

前言：书接上篇。

一、什么是TS？

4. 函数类型

TS 定义函数类型需要定义输入参数类型和输出类型。输出类型也可以忽略，因为 TS 能够根据返回语句自动推断出返回值类型。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

function add(x:number, y:number):number {
  return x + y
}
console.log(add(1,2)); // 3
// 函数表达式
let add2 = (x: number, y: number) => {
    return x + y
}
console.log(add(1,4)); // 5
console.log(add(1,'5')); // 报错 类型“string”的参数不能赋给类型“number”的参数。

4.1 可选参数：

TS 定义函数类型需要定义输入参数类型和输出类型。输出类型也可以忽略，因为 TS 能够根据返回语句自动推断出返回值类型。

1
2
3
4
5
6


function add(x:number, y:number, z?:number):number {
    return x + y
}

console.log(add(1,2,3),add(1,2)); // 3 3

4.2 默认参数:

跟 JS 的写法一样，在入参里定义初始值。和可选参数不同的是，默认参数可以不放在函数入参的最后面，

1
2
3
4
5

function add(x:number = 100, y:number):number {
    return x + y
}
console.log(add(1,4)); //  5
console.log(add(undefined,100)); // 200  当x为undefined会使用默认值

4.3 函数重载：

函数重载是指两个函数名称相同，但是参数个数或参数类型不同，他的好处显而易见，不需要把相似功能的函数拆分成多个函数名称不同的函数。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

function add(x: number[]): number
function add(x: string[]): string
function add(x: number[], y: number[]): number
function add(x: string[], y: string[]): string
function add(x: any[], y?: any[]): any {
  if (Array.isArray(y) && typeof y[0] === 'number') {
      return x.reduce((acc, cur) => acc + cur) + y.reduce((acc, cur) => acc + cur)
  }
  if (Array.isArray(y) && typeof y[0] === 'string') {
      return x.join() + ',' + y.join()
  }
  if (typeof x[0] === 'string') {
    return x.join()
  }
  if (typeof x[0] === 'number') {
      return x.reduce((acc, cur) => acc + cur)
  }
}
console.log(add([1,2,3]))      // 6
console.log(add(['1', '2']))  // '1,2'
console.log(add([1,2,3], [1,2,3])) // 12
console.log(add(['1', '2'], ['3', '4'])) // '1,2,3,4'

注意：在 TS 中，实现函数重载，需要多次声明这个函数，前几次是函数定义，列出所有的情况，最后一次是函数实现，需要比较宽泛的类型

updatedupdated2023-08-302023-08-30

相关文章：