跳到主要内容

2.2-函数类型

Create by fall on 2021-11-14 Recently revised in 2022-02-22

函数类型

函数类型的声明

// 对传入参数的朱姐,对返回值的注解
function sum(x:number,y:number):number{
return x+y
}
let sum2 = (x:number,y:number):number=>0
// 参数可选:最后一个可选参数之后,不能出现必填参数
function sum(x:number,y?:number):number{
return x+(y||1)
}
// 参数默认值
function fullName(firstName:string ,secondName:string = '林枫'){
return firstName + ' '+ secondName
}

定义接口类型

接口定义函数类型

interface SumFun {
(num1:number,num2:number):number
}
// 使用函数类型
const add:SumFun = function(a,b){
return a + b
}
add(12,23)

类型声明定义函数

type Inter = {
(a:number):number
}
const inter:Inter = (number)=>number+'ICU'
inter(996)

剩余参数

// 剩余参数存放在 ... 后面即可捕获剩余参数
function createArr(a:number,...items:number[]){
let result:number[] = []
items.forEach(item=>{
result.push(item)
})
return result
}
const arr = createArr(888,666,999,1314)
console.log(arr)

实例化

// 实例化只需要在前面添加 new 关键字即可
interface CallMeWithNewToGetString {
new (): string;
}

// 使用
declare const Foo: CallMeWithNewToGetString;
const bar = new Foo(); // bar 被推断为 string 类型

函数重载

函数重载(方法重载)是使用相同名称和不同参数数量或类型创建多个方法的一种能力。 方法就是为同一个函数提供多个函数类型定义来进行函数重载,编译器会根据这个列表去处理函数的调用。

比如说,以下方法,使用时会出现问题。

// result.split 会报错,表明类型 number上不能使用 split
type Combinable = string | number;
function add(a: Combinable, b: Combinable) {
if (typeof a === 'string' || typeof b === 'string') {
return a.toString() + b.toString();
}
return a + b;
}
const result = add('Semlinker', ' Kakuqo');
result.split(' ');

可以使用函数重载去解决这个问题

type Combinable = string | number;
function add(x:number,y:number);
function add(x:string,y:string)
function add(a: Combinable, b: Combinable) {
if (typeof a === 'string' || typeof b === 'string') {
return a.toString() + b.toString();
}
return a + b;
}
const result = add('Semlinker', ' Kakuqo');
result.split(' ');

函数

函数的基本使用方法

// js的函数书写方法
function add(x, y) {
return x + y
}
let sum = function (x, y) {
return x + y
}
let plus = (x: string, y) => {
return x + y
}
// ts 的函数的书写方法
let keke = (y: string): string => {
console.log('咳咳' + y)
return ''
}
keke('fake')

函数的泛型

泛型详情可见 3.2-泛型

泛型意思是,可以等到需要传入值的时候,这时候再限定参数将所需要的类型传入,达到限制类型的目的

function random<T>(arg:T):T{
return arg
}
// 首先是 <T> 在调用函数时使用,T 将会被传入的类型取代。
random<string>('22')
random<number>(333)
// 就像传入参数一样,传入类型,然后调用类型

一般来讲会有几个约定俗成的名称

  • K:顾名思义,对象中的键
  • V:顾名思义,对象中的值
  • T:一般的类型 Type
  • E:元素类型 Element

可以进行省略类型的填写

funtion random<T,U>(key:T,value:U):U{
console.log(key)
return value
}
random(13,'哇塞')