typeScript的函数是在es6的函数特性的基础上加了一些后端的概念:泛型、参数类型声明、返回值类型声明、重载、装饰器等。其他的一些特性:箭头函数、生成器、async-await、promise等都是es6的加的特性。

函数类型

JavaScript的函数参数是可以任何类型的,typeScript中加了对参数提添加类型,函数本身添加返回值类型。

function greetNane(name: string): string {
return `hello ${name}`
}

还有一种函数声明的方式:

let greetNane: (name: string) => string = function (name: string): string {
return `hello ${name}`
}

typeScript中函数调用时传的参数类型和数量和函数声明时候不匹配会报错。

可选参数和默认参数

可选参数:typeScript中设置函数中一个参数可传也可不传的。

let greetNane: (name: string, age?: number) => string = function (name: string, age?: number): string {
return `hello ${name}`
}

默认参数:和es6的默认参数写一样,也可以在参数后面加类型。

let greetNane: (name: string, age: number = 0) => string = function (name: string, age: number = 0): string {
return `hello ${name} ${age}`
}
let greetNane: (name: string, age = 0) => string = function (name: string, age = 0): string {
return `hello ${name} ${age}`
}

剩余参数

typeScript剩余参数和es6的写法差不多,也是后面加个参数的类型。

let greetNane: (name: string, ...arrs: string[]) => string = function (name: string, ...arrs: string[]): string {
return `hello ${name} ${age}`
}

...的用法和es6的一样。

注:因为现在主流浏览器都没有完全支持es6,所有在实际项目中es6和typescript都是最后转换成es5的写法。剩余参数的转换成es5是遍历arguments参数将参数放到arrs数组中。

    var arrs=[];
for (var _i = 0, coumt = arguments.length; i < coumt; i++) {
arrs[_i]=arguments[_i];
}

如果你认为这个可能对应用程序带来性能问题,应考虑不使用剩余参数只使用数组作为参数。

重载

函数重载或方法重载是名称相同并且参数数量类型不同创建多个方法的能力。

typeScript中通过声明函数标签,最后在一个标签实现函数的。

function greetNane(name:string) :string;
function greetNane(name:number) :number;
function greetNane(name:boolean) :boolean;
function greetNane(name:(string|number|boolean)):any{
return name;
}

泛型

作用域,this,箭头函数就不说了,直接说泛型,泛型来创建可重用的组件,一个组件可以支持多种类型的数据。

function greetNane<T>(name:T):T{
return name
} greetNane<string>('name')
greetNane('name')

函数根据参数的类型来返回对应类型的值。


参考书籍文档:

typeScript函数篇的更多相关文章

  1. 《前端之路》- TypeScript(二) 函数篇

    目录 一.定义函数方法 二.定义函数传参 三.可选传参 四.默认传参 五.传递剩余参数 六.函数重载 七.箭头函数 八.总结 一.定义函数方法 在 es5 中定时函数的方法有 命名函数和函数表达式(匿 ...

  2. TypeScript入门三:TypeScript函数类型

    TypeScript函数类型 TypeScript函数的参数 TypeScript函数的this与箭头函数 TypeScript函数重载 一.TypeScript函数类型 在上一篇博客中已经对声明Ty ...

  3. PHP函数篇详解十进制、二进制、八进制和十六进制转换函数说明

    PHP函数篇详解十进制.二进制.八进制和十六进制转换函数说明 作者: 字体:[增加 减小] 类型:转载   中文字符编码研究系列第一期,PHP函数篇详解十进制.二进制.八进制和十六进制互相转换函数说明 ...

  4. Python函数篇(5)-装饰器及实例讲解

    1.装饰器的概念   装饰器本质上就是一个函数,主要是为其他的函数添加附加的功能,装饰器的原则有以下两个: 装饰器不能修改被修饰函数的源代码 装饰器不能修改被修改函数的调用方式   装饰器可以简单的理 ...

  5. Python函数篇(7)-正则表达式

    1.正则表达式   正则表达式为高级的文本模式匹配,抽取,与/或文本形式的搜索和替换功能提供了基础,简单的来说,正则表达式是由一些字符和特殊符号组成的字符串.Python通过标准库中的re模块来支持正 ...

  6. Scala进阶之路-Scala函数篇详解

    Scala进阶之路-Scala函数篇详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.传值调用和传名调用 /* @author :yinzhengjie Blog:http: ...

  7. TypeScript 函数 (五)

    传递给一个函数的参数个数必须与函数期望的参数个数一致. 参数类别: 必须参数 可选参数 :可选参数必须在参数后面. 默认参数 :当用户没有传递这个参数或传递的值是undefined时. 它们叫做有默认 ...

  8. C语言函数篇(二)函数参数基础设计

    形参实现一种数据传入的接口 ,由 实参 拷贝给 形参. 拷贝!!!!!!!!!!! 例1: void func(int tmp){ //意图是实现传进来的参数 +1 tmp++; } int mian ...

  9. 30s源码刨析系列之函数篇

    前言 由浅入深.逐个击破 30SecondsOfCode 中函数系列所有源码片段,带你领略源码之美. 本系列是对名库 30SecondsOfCode 的深入刨析. 本篇是其中的函数篇,可以在极短的时间 ...

随机推荐

  1. 大前端的自动化工厂(2)—— SB Family

    原文链接:https://bbs.huaweicloud.com/blogs/53c0c3509b7a11e89fc57ca23e93a89f 我坦白我是标题党,SB只是SCSS-Bourbon的简写 ...

  2. C#工具:利用HttpClient调用WebApi

    可以利用HttpClient来进行Web Api的调用.由于WebA Api的调用本质上就是一次普通的发送请求与接收响应的过程, 所有HttpClient其实可以作为一般意义上发送HTTP请求的工具. ...

  3. 【Linux】Linux上安装Nginx

    本文介绍Linux环境安装Nginx,这里用的Linux系统是CentOS 7.2. 1. 从Nginx官网下载Nginx.这里用的版本为:1.13.6. 2. 将下载下来的Nginx上传到Linux ...

  4. Linux命令行对文件某(些)行的提取

    [一]从第3000行开始,显示1000行.即显示3000~3999行 cat filename | tail -n +3000 | head -n 1000 [二]显示1000行到3000行 cat ...

  5. .NET平台下使用MongoDB入门教程

    适合人群:完全没有接触MongoDB或对MongoDB有一点了解的C#开发人员.因为本文是一篇入门级的文章. 一.了解MongoDB  MongoDB是一个基于分布式文件存储的数据库.由C++语言编写 ...

  6. 程序员50题(JS版本)(一)

    程序1:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? for(var i=1,sum=0;i<=4;i++){ for(var j=1;j<=4;j++){ ...

  7. HTML5跳转页面并传值以及localStorage的用法

    1.首先,你得在那个页面把数据存入localStorage中吧.这个是必须的! localStorage.setItem("user",JSON.stringify(data.al ...

  8. 01-css的引入方式

    [转]01-css的引入方式 引入css方式(重点掌握) 行内样式 内接样式 外接样式 3.1 链接式 3.1 导入式 css介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述 ...

  9. Dynamics 365支持的语言(中文语言名/英文语言名)列表

    本人微信和易信公众号:微软动态CRM专家罗勇 ,回复277或者20180803可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong.me ...

  10. 为你揭秘知乎是如何搞AI的——窥大厂 | 数智方法论第1期

    文章发布于公号[数智物语] (ID:decision_engine),关注公号不错过每一篇干货. 数智物语(公众号ID:decision_engine)出品 策划.编写:卷毛雅各布 「我们相信,在垃圾 ...