❤ TS函数

ts函数跟js差不多，只不过我们可以给参数和函数的返回值定义上类型

函数类型

🌟普通函数

👉普通函数（命名函数）
平时正常我们使用普通函数是这样子的

function greet(name){
    return `Hello, ${name}`;
}

👉类型注解

function greet(name: string){
    return `Hello, ${name}`;
}

👉添加函数返回约束类型

function greet(name: string): string {
    return `Hello, ${name}`;
}

👉 多个参数使用

const handleTs = (numA:number,numB:number) => {
console.log(numA,numB,'numA,numB');
return numA+numB;
}

👉加个返回值的约束类型：

const handleTs = (numA:number,numB:number) : number => {
    console.log(numA,numB,'numA,numB');
    return numA+numB;
  }
 let total=handleTs(1,2);
 console.log(total,'total');

👉抽离类型别名type

type TsTotal = (numA:number,numB:number) => number
const handleTs:TsTotal =(numA,numB) =>{
console.log(numA,numB,'numA,numB');
return numA+numB;
}
let total=handleTs(1,2);
console.log(total,'total');

🌟 函数表达式

const greet = function(name: string) {
    return `Hello, ${name}`;
};

👉添加函数返回类型

const greet = function(name: string): string {
    return `Hello, ${name}`;
};

🌟箭头函数

const greet = (name: string): string => {
    return `Hello, ${name}`;
};

🌟函数类型

let greet: (name: string) => string;
greet = function(name) {
    return `Hello, ${name}`;
};

🌟可选参数

有时候我们函数之中的参数不一定都是必传的,这个时候就用到了可选参数

可选参数：在传递的参数名称后面添加 ?（问号）

function greet(name: string, age?: number): string {
    if (age) {
        return `Hello, ${name}. You are ${age}.`;
    } else {
        return `Hello, ${name}.`;
    }
}

比如之前我们上面的函数可以更改为：

// 函数可选参数
const handleTs =(numA?:number,numB?:string):string =>{
  console.log(numA,numB,'numA,numB');
  return numB?numA+numB:numA+'';
}
let total=handleTs(1,'2');
console.log(total,'total');

需要注意的是：可选参数只能出现在参数最后，也就是说可选参数后面不能再出现必选参数

👉非空类型断言（Non-null assertion）

可选参数会给我们带来一个问题，就是参数为 undefined

假如我们调用 fn() 肯定都传了参数且有值，这时候就可以使用非空类型断言 !，让 ts 在编译阶段跳过对它的检测

function getMoond(day?: string) {
  console.log(day!.length)
}
getMoond('hello')

👉可选链

但是我们不确定参数是否传了，这时候就可以使用可选链

function getMoond(day?: string) {
  console.log(day?.length)
}
getMoond('hello')

如果是赋值操作，可选链就不能用了，可以使用非空断言，或者是类型缩小（Type narrowing）

function getMoond(day?: string) {
  let len = day?.length
  console.log(len)
}
getMoond('hello')

👉类型缩小（Type narrowing）

通过 typeof 进行类型缩小

function getLength(value: string | number) {
    if (typeof value === "string") {
        return value.length;  // TypeScript 知道此时 value 是 string 类型
    } else {
        return value.toFixed(2);  // TypeScript 知道此时 value 是 number 类型
    }
}

🌟默认参数

👉和js 里写法一样，在参数后用=号定义默认值

function greet(name: string, age: number = 30): string {
    return `Hello, ${name}. You are ${age}.`;
}

👉默认参数不一定要放在最后,也就是下面这种也是可以的

function greet(age: number = 30, name: string): string {
    return `Hello, ${name}. You are ${age}.`;
}

在调用参数时，必须传递第二个参数，第一个传 undefined代表使用默认值

greet(undefined, 'taibai');

参考一下写法还是建议把默认的写后面

写法顺序建议：普通参数 -> 有默认值的参数 -> 可选参数

函数返回值

函数的返回值也可以不写，ts 会根据 return 的值进行类型推导

一些回调函数的定义，参数可以根据上下文推导出类型（contextual typing），可以不明确写出（例如下面的item可以根据list推导必为string可以不写）

const list = ['Jay', 'taibai']
list.forEach(item => console.log(item))

函数完整举例

// 函数指定函数参数和返回值类型
let add: (a: number, b: number) => number = (a, b) => a + b;

下面这个也非常有参考意义

const fn: (data: string) => string = function(data: string): string {
  return '今天是' + data
}
console.log(fn('周五')) // 今天是周五

ts中data这个形参必须写
直接写 (string) => string，ts会认为函数接收了一个类型为 any 的参数，参数名string

🌟void空（函数无返回值）

上面就是我们函数有返回值时候的写法

那么没有返回值呢？ 这个时候就需要用到

void: 表示函数没有返回值，通常用于没有返回值的函数。
function greet(): void {
  console.log("Hello!");
}

void 0;// undefined

function hello(): void {
    console.log('hello typescript');
}

const handleTs  =(numA:number): void =>{
  console.log(numA,'numA');
}
let total=handleTs(1);
console.log(total,'total');

当然了，void和不写时候也是一样的。

也就是说下面的两种写法其实都是一样的

//什么都不写，返回值类型为： void
const handleTs = () => {}

// 指定函数返回值类型为 void
const handleTs = (): void => {}

🌟返回值undefined

指定返回值类型为 undefined的情况

// 指定返回值类型为 undefined，函数体中必须显示的 return undefined 才可以
 const handleTs = (): undefined => {
        // 此处，返回的 undefined 是 JS 中的一个值
        return undefined
}
let data = handleTs();
console.log(data, 'data');

// 输出
undefined 'data'

👉never

never: 表示一个永远不会正常结束的函数（比如抛出异常或无限循环）。
function throwError(): never {
  throw new Error("An error occurred");
}

function error(message: string): never {
     throw new Error(message);
}

剩余参数

剩余参数与 ES6 中基本一致,ts之中补充添加了类型

function sum(...args: number[]): number {
  return args.reduce((prev, curr) => prev + curr, 0);
}

函数的部分比较多，不断更新…