TypeScript 函数类型 (二)

函数类型

函数有两种方式定义

  • function 关键字来定义函数
function a(){}
  • 表达式定义(箭头函数的形式)
const a=()=>{}

函数需要定义类型的有三个地方 入参返回值 以及 函数本身 的类型, 函数本身的类型常用于表达式定义的函数

function sum(a:string,b:string):string{
    return a+b
}
let sum1 = (a:string,b:string): string => {
    return a+b
}

type sum1Type = (a:string,b:string)=> string
let sum2: sum1Type = (a:string,b:string): string => {
    return a+b
}

类型推导

根据返回值类型推导

function f(a:string,b:string) {
    return a+b
}

在这里插入图片描述

根据上下文推导,根据位置来进行推导,也就是 x 对应入参 a 的类型,y对应b的类型,

type ISum = (x:string,y:string)=> string;
let sum3:ISum = (a,b) => {
    return a+b
}

在这里插入图片描述
入参数量可以比类型中的数量少,更具位置一一对应,但是不能多

函数返回类型

函数返回类型可以为void,意思为不校验返回值,在某些时候函数有没有返回值是没有意义的。

type ICallback = (a:string,b:number)=> void
function fn(callback:ICallback) {}
fn((a,b) => {
    return '1'
})

在这里插入图片描述

函数可选参数

在入参后面增加?,可以将这个入参变为可选,但是只能用在入参最后。

let sum4 = (a:string,b:string,c?:string):string => {
    return a+b
}
sum4('3','7')

在这里插入图片描述

函数剩余参数

剩余运算符 ...,可以传入不指定数量的参数

let total = (a:string,b:string,...rest:string[]): string => {
    return a+b+rest.join('')
}
total('1','2','3','4','5')

在这里插入图片描述

获取类型的内置方法

  • typeof 获取变量类型
let person = {
    name: '123',
    age: 123
}
type PersonType = typeof person

在这里插入图片描述

  • keyof 获取索引类型只能查询类型
type PersonKeyType = keyof typeof person

在这里插入图片描述

ts中this需要手动指定。默认是函数的第一个参数

let person = {
    name: '123',
    age: 123
}
type PersonType = typeof person
type PersonKeyType = keyof typeof person
function getV(this: PersonType, key: PersonKeyType ) {
    return this[key]
}
let r = getV.call(person, "name")

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

函数重载

重载 根据不同的参数类型做不同处理,一般这个参数类型是有限的。ts中的重载是伪重载,只是类型重载,不是逻辑重载

function toArray(value: string | number){
    if (typeof value ==='string') {
        return value.split('')
    }
    if (typeof value === 'number') {
        return value.toString().split('')
    }
}
let arr = toArray('123')

在这里插入图片描述

相关推荐

  1. TypeScript-数组、函数类型

    2024-07-17 05:04:06       25 阅读
  2. 11. TypeScript 函数类型

    2024-07-17 05:04:06       31 阅读
  3. Typescript基础知识:函数类型和箭头函数

    2024-07-17 05:04:06       42 阅读
  4. TypeScript系列」TypeScript 基础类型

    2024-07-17 05:04:06       29 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-17 05:04:06       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-17 05:04:06       71 阅读
  3. 在Django里面运行非项目文件

    2024-07-17 05:04:06       58 阅读
  4. Python语言-面向对象

    2024-07-17 05:04:06       69 阅读

热门阅读

  1. Redis端口开启防火墙报错

    2024-07-17 05:04:06       22 阅读
  2. KITTI 3D 数据可视化

    2024-07-17 05:04:06       29 阅读
  3. 口令爆破基础学习

    2024-07-17 05:04:06       25 阅读
  4. 基于单片机的直流电机控制

    2024-07-17 05:04:06       25 阅读
  5. 【前端】Web控件与数据感应之模板循环输出

    2024-07-17 05:04:06       28 阅读
  6. 十四、(正点原子)Linux MISC驱动

    2024-07-17 05:04:06       26 阅读