写点什么

一文带你了解 TypeScript 函数

作者:Aion
  • 2023-11-14
    上海
  • 本文字数:2266 字

    阅读完需:约 7 分钟

一文带你了解TypeScript 函数

指定类型参数

TypeScript 通常可以在泛型调用中推断预期的类型参数,但有时候,就会出现 BUG。


function groupArr<Type>(arr1:Type[], arr2: Type[]): Type[]{    return arr1.concat(arr2);}groupArr([1,2,3],["测试"])
复制代码


这样写就会报错,因为 TypeScript 识别到了第一个参数,为 Number 类型, 第二个参数 String 类型,类型不一,就会报错了,这时,我们可以告诉它 为哪些类型,这样就不会报错了。



正确写法:


console.log(groupArr<String | Number>([1,2,3],["测试"]))// [ 1, 2, 3, '测试' ]
复制代码


我们通过指定泛型 类型为 联合类型 ,这样,Type 既可以是 String, 也可以 Number, 这样就不活报错了。

泛型参数法则

类型参数用于 关联多个值的类型 。如果类型参数在函数签名中只使用一次,则它不会关联任何内容。






规则:如果类型参数只出现在一个位置,请强烈重新考虑是否确实需要它

函数可选参数

通过在 参数后 加 ? 号 表示该参数为可选类型。


function getDatas(num:Number,str ?: String){    console.log(`${num}----------${str}`)}
getDatas(123,"测试")getDatas(123)// 123----------测试// 123----------undefined
复制代码


当没有传递可选类型属性值时,它会返回 undefined, 因为可选类型本身具有联合类型(它本身的类型 和 undefined。

函数参数指定默认值

直接在函数参数后赋值即可,当调用函数没有传递参数时,就会输出参数的默认值


// 指定函数参数默认值
function getDefaultData(str:String = "我是默认值") { console.log(str)}
getDefaultData("TypeScript 真好玩 hhhh ")getDefaultData()// TypeScript 真好玩 hhhh // 我是默认值
复制代码

函数重载

函数重载指相同的函数名,不同的参数,在调用函数时,它会根据你所传递的参数进入对应的重载函数执行业务逻辑。


函数重载由 重载签名 + 实现签名组成 。


使用场景: 通过一种方式然后兼容的处理然会数据集


function makeData(k :String):String;function makeData(k: any[], d?: any[]): Array<any>function makeData(k : String | any[], d?: any[] ):String | Array<any>{    if(typeof k == 'string') {       k =  k.toLocaleLowerCase()    }    if(k instanceof Array) {        if(d != undefined) {            k = k.concat(d)        } else {            k = k.filter(i => i > 10)        }      }    return k}

console.log(makeData('asdasdJJJJHASDA')) //asdasdjjjjhasdaconsole.log(makeData([1,33,44,2,56,9,7,5])) //[ 33, 44, 56 ]console.log(makeData([1,33,44,2,56,9,7,5],["test","HaiJun"])) //[ 1, 33, 44, 2, 56, 9, 7, 5, 'test', 'HaiJun' ]
复制代码


上面代码中,创建两个重载签名函数 makdData不同的参数 , 一个实现签名 (它兼容的处理了前面两个重载签名的逻辑处理)

写好重载技巧

两个重载具有相同的参数计数和相同的返回类型

可以使用联合类型,改造成函数的非重载版本


function getLen(data : String | any[]):Number{    if(typeof data == 'string'){        console.log("执行data- String 类型 的逻辑")    }    if(data instanceof Array){        console.log("执行data - Arraty 类型 的逻辑")    }    return data.length}


console.log(getLen("123123"))

console.log(getLen(['test',222]))
复制代码

参考

函数中 声明 this

有两种声明方法:

1.函数中 声明 this

如果在函数中声明 this,需要配置 tsconfig.json 的配置


"compilerOptions": {   ...   "noImplicitThis": true}
复制代码


默认情况下,如果 ts 没有 this 对象类型声明,this 是自动隐式定义。


如果 noImplicitThis 设置为 true,此时不允许 this 上下文隐式定义,如果使用了没有声明过的 this 对象就会报错.


⚠️注意:


默认情况下可以理解成 typescript 将函数中的 this as any,而 oImplicitThis:true 的情况下,必须去声明 this 的类型,才能在函数或者对象中使用 this.


function queryStundentInfo(this: Users){    const {id,name,status} = this    console.log(id,name,status)}
queryStundentInfo.call({id:1,name:"测试",status:false}) //1 测试 false
复制代码


⚠️ 函数中声明 this 注意


  1. this 必须声明在函数参数声明中的第一个

  2. this 在函数参数中的声明,不作为形参和实参


2.函数回调中声明 this

this 注意事项

  • 箭头函数中的 this,指向定义该函数时的那个对象。



参考

函数返回值类型

函数剩余参数

有时,你想同时操作多个参数,或者你并不知道会有多少参数传递进来。


在 JavaScript 里,你可以使用 arguments 来访问所有传入的参数。


在 TypeScript 中,可以把所有参数集中在一个变量中,前面加上 ... 表示 剩余参数。


⚠️注意:


  • 直接通过变量访问

  • 也可以通过索引访问

  • 只能定义一个剩余参数,且位置在 默认参数和可选参数后面


function getInfoData(content:String, ...data:any) {    console.log(content)    console.log(data)    console.log(data[0])    }getInfoData("测试剩余参数",{status:false},11,"测试")// [ { status: false }, 11, '测试' ]// { status: false }
复制代码

函数参数类型解构

// 函数参数类型结构
type Params = { id: Number, title: String, author: String,}

function getInfos({id,title,author}: Params) { console.log(id,title,author)}getInfos({id:1,title:"前端已死 😄",author: 'ai'})// 1 前端已死 😄 ai
复制代码


发布于: 刚刚阅读数: 6
用户头像

Aion

关注

还未添加个人签名 2021-12-03 加入

还未添加个人简介

评论

发布
暂无评论
一文带你了解TypeScript 函数_typescript_Aion_InfoQ写作社区