TypeScript 函数详解

2023-04-24
上海
本文字数：2287 字
阅读完需：约 8 分钟

指定类型参数

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，这样就不活报错了。

泛型参数法则

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

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

函数可选参数

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

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 // 我是默认值

复制代码

函数重载

函数重载指相同的函数名，不同的参数，在调用函数时，它会根据你所传递的参数进入对应的重载函数执行业务逻辑。:::warning 函数重载由重载签名 + 实现签名组成。使用场景：通过一种方式然后兼容的处理然会数据集:::

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 注意

this 必须声明在函数参数声明中的第一个
this 在函数参数中的声明，不作为形参和实参

2.函数回调中声明 this

this 注意事项

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

参考

https://juejin.cn/post/6859914549341093896

函数返回值类型

函数剩余参数

:::success 有时，你想同时操作多个参数，或者你并不知道会有多少参数传递进来。在 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

复制代码

发布于: 2023-04-24阅读数: 20

原文链接:【http://xie.infoq.cn/article/1e4928f4a09b5492f852127d8】。文章转载请联系作者。

程序员海军

关注

🏆微信公众号：【前端自学社区】 2020-04-02 加入

🏅目前从事物流，铁路相关的前端全栈开发工作. 🏆 InfoQ 首批签约作者 🏆荣获2021/2022年度社区共建奖 😊个人微信： daxin261

发布

暂无评论

创作场景

TypeScript 函数 详解

指定类型参数

泛型参数法则

函数可选参数

函数参数指定默认值

函数重载

写好重载技巧

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

参考

函数中 声明 this

有两种声明方法：

1.函数中 声明 this

2.函数回调中声明 this

this 注意事项

参考

函数返回值类型

函数剩余参数

函数参数类型解构

程序员海军

评论

TypeScript 函数详解

函数中声明 this

1.函数中声明 this