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

发布时间:2024年01月07日

在这里插入图片描述

系列文章目录

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)来定义函数类型。
    可以将函数类型作为参数类型或返回值类型。

文章来源:https://blog.csdn.net/weixin_49014702/article/details/135438314
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。