TypeScript学习——函数的类型

TS中的函数声明

在TS中,需要对函数的输入和输出进行约束,需要把输入和输出都考虑到,其中函数声明的类型定义比较简单:

function sum(x: number, y: number): number{
  return x + y;
}

输入的参数多于或少于要求的参数是不被允许的。

TS中的函数表达式

按照上面的写法,我们可能会这样写函数表达式:

let sum = function(x: number, y: number): number {
  return x + y;
}

上面的例子是可以通过编译的,但是上面的代码只对等号右侧的匿名函数进行了类型定义,而等号左边的sum,是通过赋值操作进行类型推断而推断出来的。
如果我们要手动给sum添加类型,则应该是这样:

let sum: (x: number, y: number) => number = function(x: number, y: number) {
  return x + y;
}

TS中的=>与ES6中的=>不相同
在TS的类型定义中,=>用来表示函数的定义,左边是输入类型,用括号括起来,右边是输出类型。
在ES6中,=>表示箭头函数,可参考ES6中的箭头函数

用接口定义函数的形状

我们也可以用接口的方式来定义一个函数需要符合的形状:

interface Fn{
  (x: number, y: number): boolean;
  //左边表示函数的输入类型,右边表示输出类型
}

let fn: Fn;
fn = function(x: number, y: number){
  return x > y
}

可选参数

既然接口能定义可选参数,那么函数同样也能定义可选参数,并且方式与接口定义可选参数的方式相同。

function fn(firstName: string, lastName?: string){
  if(lastName){
    return firstName + '  ' + lastName;
  }else{
    return firstName;
  }
}

let zinkwu = fn('zink', 'wu') ;
let zink = fn('zink');

注意点:在定义可选参数时,必须将其定义在必须参数后面。

参数默认值

在ES6中,我们能给函数的参数添加默认值,在TS中,会将添加了默认值的参数识别为可选参数(这也是定义可选参数的第二种方式)。

function fn(firstName: string = 'zink', lastName: string){
  return fitstName + ' ' + lastName
}

let zinkwu = fn(undefined, 'wu')

使用默认参数之后,也就不受[可选参数必须在必须参数之后]的限制了。

剩余参数

ES6 中,可以使用 ...rest 的方式获取函数中的剩余参数(rest 参数):

function push(array: number[], ...items: number[]){
    items.forEach( item => {
        array.push(item)
    })
}

let a = [];
push(a, 1, 2, 3);

使用了剩余参数后,items实际上是一个数组,所以我们将它定义为数组类型。
ES6规定:rest 参数只能是最后一个参数

重载

重载也是面向对象语言中一个重要的概念,允许一个函数接受不同数量或类型的参数,并作出不同的处理。

例如,我们需要实现一个reverse函数,输入数字123的时候,输出反转的数字321,输入hello的时候,输出反转的字符串olleh
我们可以利用联合类型来实现:

function reverse(x: number | string): number | string{
  if(typeof x === 'number'){
    return Number(x.toString().split('').reverse().join(''));
  }else if(typeof x === 'string'){
    return x.split('').reverse().join('');
  }
}

但是这样做有一个缺点,就是表达不够精确,输入数字的时候输出也应该是数字,输入字符串的时候,输出也应该是字符串。
此时,我们可以使用重载定义多个reverse的函数类型:

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string{
  if(typeof x === 'number'){
    return Number(x.toString().split('').reverse().join(''));
  }else if(typeof x === 'string'){
    return x.split('').reverse().join('');
  }
}

上例中,我们重复定义了多次函数 reverse,前几次都是函数定义,最后一次是函数实现。
注意,TypeScript 会优先从最前面的函数定义开始匹配,所以多个函数定义如果有包含关系,需要优先把精确的定义写在前面。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容