一文带你了解 TypeScript 函数

2023-11-14 22:39:57 浏览数 (1)

指定类型参数

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

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

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

正确写法：

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

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

泛型参数法则

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

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

函数可选参数

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

代码语言：txt复制
function getDatas(num:Number,str ?: String){
    console.log(`${num}----------${str}`)
}

getDatas(123,"测试")
getDatas(123)
// 123----------测试
// 123----------undefined

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

函数参数指定默认值

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

代码语言：txt复制
// 指定函数参数默认值

function getDefaultData(str:String = "我是默认值") {
    console.log(str)
}

getDefaultData("TypeScript 真好玩 hhhh ")
getDefaultData()
// TypeScript 真好玩 hhhh 
// 我是默认值

函数重载

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

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

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

代码语言：txt复制
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'))  //asdasdjjjjhasda
console.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不同的参数 ， 一个实现签名 （它兼容的处理了前面两个重载签名的逻辑处理）

写好重载技巧

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

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

代码语言：txt复制
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的配置

代码语言：txt复制
"compilerOptions": {
   ...
   "noImplicitThis": true
}

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

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

⚠️注意：

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

代码语言：txt复制
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 中，可以把所有参数集中在一个变量中，前面加上 ... 表示 剩余参数。

⚠️注意:

  • 直接通过变量访问
  • 也可以通过索引访问
  • 只能定义一个剩余参数，且位置在 默认参数和可选参数后面
代码语言：txt复制
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 }

函数参数类型解构

代码语言：txt复制
// 函数参数类型结构

type Params = {
    id: Number,
    title: String,
    author: String,
}


function getInfos({id,title,author}: Params) {
    console.log(id,title,author)
}
getInfos({id:1,title:"前端已死 


	


typescript 2023腾讯·技术创作特训营第三期typescirpt 




	






	

 0 人点赞