TypeScript 从入门到进阶之基础篇(八)函数篇

系列文章目录

TypeScript 从入门到进阶系列

1. TypeScript 从入门到进阶之基础篇(一) ts基础类型篇
2. TypeScript 从入门到进阶之基础篇(二) ts进阶类型篇
3. TypeScript 从入门到进阶之基础篇(三) 元组类型篇
4. TypeScript 从入门到进阶之基础篇(四) symbol类型篇
5. TypeScript 从入门到进阶之基础篇(五) 枚举类型篇
6. TypeScript 从入门到进阶之基础篇(六) 类型（断言 、推论、别名）| 联合类型 | 交叉类型 篇
7. TypeScript 从入门到进阶之基础篇(七)泛型篇
   持续更新中…

---

---

前言

函数是一种可重复使用的代码块，是构建应用的一块基石。在本章我们将学习TypeScript 中如何定义函数。
在JavaScript中，函数可以被定义、调用和传递给其他函数作为参数。函数可以用来组织代码，使其更加模块化和可读性，同时也提供了代码的重用性和灵活性。

---

一、函数类型的使用

1、直接定义函数

在TypeScript 使用函数的方法是直接定义函数所需参数的类型，也是最基本的用法

function myFunctionType (data1:string,data2:string):string {
	return data1+data2;
}
//箭头函数写法
const myFunctionType = (data1:string,data2:string ):string =>{
	return data1+data2;
}

需要注意的是 但我们的函数没有返回值时 ,就不能定义这个函数的返回值类型 （void除外）

//正确写法
function myFunctionType (data:string) {
	console.log (data) 
}
//正确写法2
function myFunctionType (data:string) :void {
	console.log (data) 
}
//错误写法 没有返回值的时后不要写 或者写void
function myFunctionType (data:string) :number{
	console.log (data) 
}

2、使用接口定义函数

上面是直接定义函数 ，同时 接口也可以用来定义函数 具体用法如下

//使用接口定义函数
interface MyFunctionType {
  (x: string, y: string): string;
}
const myFunction:MyFunctionType=(x,y)=>{
}

3、类型别名定义函数

类型别名的方式来定义函数会更加明显

type MyFunctionType = (a: number, b: number) => number;

const sum: MyFunctionType = (a, b) => {
  return a + b;
};

4、函数中可选参数定义

在函数的使用中，可能会遇到 传参时有些参数非必传的，具体用法如下

function myFunctionType (data1:string,data2?:string):string {
	return data1+data2?data2:'';
}

const myFunctionType = (data1:string,data2?:string ):string =>{
	return data1+data2?data2:'';
}

interface MyFunctionType {
  (data1: string, data2?: string): string;
}

const myFunction:MyFunctionType=(data1,data2)=>{
	return data1+data2?data2:'';
}

5、函数中默认参数定义

在 TypeScript 函数中，可以通过在参数的后面使用 = 来定义默认参数。

function greet(name: string, greeting: string = "Hello") {
  console.log(`${greeting}, ${name}!`);
}

greet("Alice"); // 输出：Hello, Alice!
greet("Bob", "Hi"); // 输出：Hi, Bob!

在上面的例子中，greeting 参数被定义为默认参数，它的默认值为 "Hello"。当我们调用 greet 函数时，如果不提供 greeting 参数的值，那么它将使用默认值 "Hello"。如果提供了 greeting 参数的值，则使用提供的值。

5、函数中剩余参数定义

剩余参数的定义是指在函数的参数列表中，使用三个点（…）来表示，可以接收任意数量的传入参数，并将这些参数存储为一个数组。剩余参数在函数内部以数组的形式进行操作。

function sum(...numbers: number[]): number {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3)); // 输出 6
console.log(sum(10, 20, 30, 40)); // 输出 100

在上述例子中，函数 sum 使用剩余参数 ...numbers 来接收传入的任意数量的数字参数，并将这些参数存储为一个数组 numbers。函数的实现中，我们使用 reduce 方法对数组中的所有元素进行求和，并返回求和结果。在调用函数时，我们可以传入任意数量的参数，它们会被作为一个数组传递给剩余参数。

6、函数中函数重载定义

在TypeScript中，函数重载是指为同一个名称的函数提供多个不同的函数类型定义。通过函数重载，可以根据参数的类型和个数的不同来决定函数的行为。

函数重载的定义方式如下：

function 函数名(参数1: 类型1): 返回值类型;
function 函数名(参数1: 类型1, 参数2: 类型2): 返回值类型;
function 函数名(参数1: 类型1, 参数2: 类型2, 参数3: 类型3): 返回值类型;
// ...

其中，函数名必须相同，但参数的类型和个数可以不同。每个函数定义都要指定参数的类型和返回值的类型。

TypeScript在编译时会根据参数的类型和个数来选择正确的函数定义。如果没有找到匹配的函数定义，会报错。

下面是一个简单的示例：

function foo(x: number): string;
function foo(x: string): number;
function foo(x: any): any {
  if (typeof x === 'number') {
    return x.toString();
  } else if (typeof x === 'string') {
    return parseInt(x);
  }
}

console.log(foo(123)); // 输出 "123"
console.log(foo('456')); // 输出 456

在这个例子中，foo函数有两个重载：一个接受number类型的参数并返回string类型，另一个接受string类型的参数并返回number类型。根据传入的参数类型，TypeScript会自动选择正确的函数定义。

函数使用总结

1. 定义函数：
   使用function关键字定义函数，可以指定参数类型和返回值类型。
   使用箭头函数（=>）定义函数，也可以指定参数类型和返回值类型。

2. 函数参数：
   可以指定参数的类型，可以是基本类型（如string、number等）或自定义类型。
   参数可以设置默认值，使用?来指定可选参数。
   可以使用剩余参数（rest parameters）来接收不定数量的参数。

3. 函数返回值：
   可以指定函数的返回值类型，可以是基本类型或自定义类型。
   可以使用void表示函数没有返回值。
   可以使用泛型（Generics）来指定函数的返回值类型。

4. 函数重载：
   TS支持函数重载，即在函数定义时可以为同一个函数定义多个函数类型的签名。
   函数重载的目的是为了增加函数的灵活性，可以根据不同的参数类型和个数调用不同的函数实现。

5. 函数类型：
   可以使用类型别名（type alias）或接口（interface）来定义函数类型。
   可以将函数类型作为参数类型或返回值类型。