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

本文介绍: 函数是一种可重复使用的代码块，是构建应用的一块基石。在本章我们将学习TypeScript 中如何定义函数。在JavaScript中，函数可以被定义、调用和传递给其他函数作为参数。函数可以用来组织代码，使其更加模块化和可读性，同时也提供了代码的重用性和灵活性。在TypeScript 使用函数的方法是直接定义函数所需参数的类型，也是最基本的用法//箭头函数写法需要注意的是但我们的函数没有返回值时 ,就不能定义这个函数的返回值类型（void除外）//正确写法//正确写法2。

在这里插入图片描述

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) 
}

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

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

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

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:'';
}

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 参数的值，则使用提供的值。

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 方法对数组中的所有元素进行求和，并返回求和结果。在调用函数时，我们可以传入任意数量的参数，它们会被作为一个数组传递给剩余参数。

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

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

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

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