TS语法（二）函数类型

peacemelon
84 阅读2分钟

前面的数据都有自己的类型，那作为JS中的一等公民函数自然也有自己的类型。用函数类型的表达式来表达函数类型。

函数类型

type fn = (num1:number,num2:number) => void
接收两个参数的函数，参数都是number,并且这个函数没有返回值

type CalFn = (num1:number,num2:number) => void

// calc函数的参数fn是一个函数，fn的类型是CalFn，表达式CalFn就是函数类型
function calc(fn:CalFn){
    console.log(fn(10,20))
}

function sum1(num1:number,num2:number){
    return num1 + num2
}

function multiple(num1:number,num2:number){
    return num1 * num2
}

calc(sum1)
calc(multiple)

export {}

运行结果截图 image.png

参数

可选类型
funtion foo(x:number,y:number,z?:number){
  console.log(x,y,z)
}

z就是可选参数，z的类型是 number|undefined
其次可选类型的参数需要在必选参数的后面

默认参数

函数的参数可以有默认值

function foo(x: number, y = 100) {
  console.log(y + 10)
}

foo(10)
foo(10, undefined)
foo(10, 10)

输出：
110
110
20

y就是默认参数，有默认值的情况下，参数的类型注解可以省略。
有默认值时，也可以接收undefined，此时使用的仍然是默认值。

剩余参数

将不定数量的参数放到一个数组中

function foo(...args: (string | number)[]) {

}

foo(11,22,33)
foo('aa','bb','cc')

函数中的this类型

我们先来看看一段代码

const obj = {
  name: 'hh',
  age: 18,
  foo: function(){
    console.log(this,'studying')
  }
}

obj.foo()

输出：

image.png

这里的this是obj

但是添加上这段代码后再次运行就会报错

function bar(){
  console.log(this)
}

bar()

image.png

报错的意思是说this被推断出是any类型，没有指定this的类型，所以报错。

这个时候我们运行一下tsc --init,生成tsconfig.json，找到 noImplicitThis 这个属性，将值改为 fasle 再次运行就不会报错了

image.png

在 tsconfig.json 文件中有描述，当this是any类型时就会报错

  "noImplicitThis": true,   /* Enable error reporting when 'this' is given the type 'any'. */

当然，这样用TS的话就失去了TS的作用了，我们可以指定this的类型。在函数调用的时候就可以指定this,函数的第一个参数用于声明this，其他参数放在后面。this参数会在编译后被抹除

function bar(this:{name:string}){
  console.log(this)
}

bar.call({name:'hh'})

image.png

TS提供了一些工具类型来辅助进行常见的类型转换，这些类型全局可用,比如ThisParameterType、OmitThisParameter，大家可以去TS官网详细了解下。

avatar
文章
阅读
粉丝