(1)函数的定义

函数声明法

  1. // function run():string{
  2. // return 'run';
  3. // }
  4. //错误写法,返回类型错误
  5. // function run():string{
  6. // return 123;
  7. // }

匿名函数

  1. // var fun2=function():number{
  2. // return 123;
  3. // }
  4. // alert(fun2()); /*调用方法*/

ts中定义方法传参

  1. /*
  2. function getInfo(name:string,age:number):string{
  3. return `${name} --- ${age}`;
  4. }
  5. alert(getInfo('zhangsan',20));
  6. */
  7. //匿名方法
  8. var getInfo=function(name:string,age:number):string{
  9. return `${name} --- ${age}`;
  10. }
  11. alert(getInfo('zhangsan',40));
  12. //没有返回值的方法
  13. function run():void{
  14. console.log('run')
  15. }
  16. run();

(2)方法可选参数

es5里面方法的实参和行参可以不一样,但是ts中必须一样,如果不一样就需要配置可选参数

  1. function getInfo(name:string,age?:number):string{
  2. if(age){
  3. return `${name} --- ${age}`;
  4. }else{
  5. return `${name} ---年龄保密`;
  6. }
  7. }
  8. alert(getInfo('zhangsan'))
  9. alert(getInfo('zhangsan',123))

(3)默认参数 可选参数

es5里面没法设置默认参数,es6和ts中都可以设置默认参数

  1. function getInfo(name:string,age:number=20):string{
  2. if(age){
  3. return `${name} --- ${age}`;
  4. }else{
  5. return `${name} ---年龄保密`;
  6. }
  7. }

(4)剩余参数,三点运算符

  1. /*
  2. function sum(...result:number[]):number{
  3. var sum=0;
  4. for(var i=0;i<result.length;i++){
  5. sum+=result[i];
  6. }
  7. return sum;
  8. }
  9. alert(sum(1,2,3,4,5,6)) ;
  10. */
  11. //剩余参数(三点运算符)必须在最后
  12. function sum(a:number,b:number,...result:number[]):number{
  13. var sum=a+b;
  14. for(var i=0;i<result.length;i++){
  15. sum+=result[i];
  16. }
  17. return sum;
  18. }
  19. alert(sum(1,2,3,4,5,6)) ;

(5)函数重载

  • java中方法的重载:重载指的是两个或者两个以上同名函数,但它们的参数不一样,这时会出现函数重载的情况。
  • typescript中的重载:通过为同一个函数提供多个函数类型定义来试下多种功能的目的。

ts为了兼容es5 以及 es6 重载的写法和java中有区别。

  1. //es5中出现同名方法,下面的会替换上面的方法
  2. /*
  3. function css(config){
  4. }
  5. function css(config,value){
  6. }
  7. */

es5出现同名方法会覆盖前面,下面看ts中的重载

示例1:

  1. function getInfo(name:string):string;
  2. function getInfo(age:number):string;
  3. function getInfo(str:any):any{
  4. if(typeof str==='string'){
  5. return '我叫:'+str;
  6. }else{
  7. return '我的年龄是'+str;
  8. }
  9. }
  10. alert(getInfo('张三')); //正确
  11. alert(getInfo(20)); //正确
  12. alert(getInfo(true)); //错误写法

示例2:

  1. function getInfo(name:string):string;
  2. function getInfo(name:string,age:number):string;
  3. function getInfo(name:any,age?:any):any{
  4. if(age){
  5. return '我叫:'+name+'我的年龄是'+age;
  6. }else{
  7. return '我叫:'+name;
  8. }
  9. }
  10. // alert(getInfo('zhangsan')); /*正确*/
  11. // alert(getInfo(123)); 错误
  12. // alert(getInfo('zhangsan',20));

(6)箭头函数

注意:this指向的问题 箭头函数里面的this指向上下文

  1. //es5
  2. // setTimeout(function(){
  3. // alert('run')
  4. // },1000)
  5. setTimeout(()=>{
  6. alert('run')
  7. },1000)

typescript - 3.函数的更多相关文章

  1. TypeScript 中函数的理解?与 JavaScript 函数的区别?

    一.是什么 函数是JavaScript 应用程序的基础,帮助我们实现抽象层.模拟类.信息隐藏和模块 在TypeScript 里,虽然已经支持类.命名空间和模块,但函数仍然是主要定义行为的方式,Type ...

  2. TypeScript Function(函数)

    在JavaScript中,函数是构成任何应用程序的基础块.通过函数,你得以实现建立抽象层.模仿类.信息隐藏和模块化.在TypeScript中,虽然已经存在类和模块化,但是函数依旧在如何去"处 ...

  3. TypeScript入门-函数

    ▓▓▓▓▓▓ 大致介绍 TypeScript为JavaScript函数添加了额外的功能,让我们可以更容易地使用.TypeScript中的函数也包括JavaScript中最常见的两种函数 functio ...

  4. TypeScript 之 函数

    https://m.runoob.com/manual/gitbook/TypeScript/_book/doc/handbook/Functions.html 为函数定义类型 为函数添加类型: fu ...

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

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

  6. TypeScript 素描 - 函数

    /* 函数和javaScript并没有太大差别,只是增加了额外的功能,使函数有 更为强大的功能而且更易用使用 */ //现在支持函数的参数指定类型,在前面的博文中大家应该已经看到 //还可以指定函数的 ...

  7. typescript的函数

    1:默认参数(传入值会覆盖默认参数,不传值也行) function getinfo(name:string,age:number=20):string{ return `${name}---${age ...

  8. TypeScript之函数

    1.函数声明 与javascript一样,ts的函数声明也分为两种:函数声明,函数表达式 1)函数声明: function fn(age:number):string{ return `age is ...

  9. TypeScript中将函数中的局部变量“导出”的方法

    首先是在模块a.js中声明一个可导出(export)的数据结构,例如: export class ModelInfo{ id: string; name:string; } 其次是在模块b中声明可导出 ...

随机推荐

  1. WinServer-the security database on the server does not have a computer account for

    用了本地的administrator登陆

  2. 爬虫之scrapy框架应用selenium

    一.利用selenium 爬取 网易军事新闻 使用流程: ''' 在scrapy中使用selenium的编码流程: 1.在spider的构造方法中创建一个浏览器对象(作为当前spider的一个属性) ...

  3. 【转】移植vsftpd到arm linux

    vsftpd即very secure FTP daemon(非常安全的FTP进程),是一个基于GPL发布的类UNIX类操作系统上运行的服务器的名字(是一种守护进程),可以运行在诸如Linux.BSD. ...

  4. GCC编译流程浅析

    GCC-GCC编译流程浅析 序言 对于大多数程序员而言,大家都知道gcc是什么,但是如果不接触到linux平台下的开发,鲜有人真正了解gcc的编译流程,因为windows+IDE的开发模式简直是一条龙 ...

  5. KMP算法的时间复杂度与next数组分析

    一.什么是 KMP 算法 KMP 算法是一种改进的字符串匹配算法,用于判断一个字符串是否是另一个字符串的子串 二.KMP 算法的时间复杂度 O(m+n) 三.Next 数组 - KMP 算法的核心 K ...

  6. Mac Docker安装MySQL5.7

    mkdir mysql 在~目录下创建mysql目录 docker run --restart=always --name mysql5.7 -p 3306:3306 -v ~/mysql:/var/ ...

  7. 使用CefSharp在C#访问网站,支持x86和x64

    早已久仰CefSharp大名,今日才得以实践,我其实想用CefSharp来访问网站页面,然后抓取html源代码进行分析,如果使用自带的WebBrowser控件,可能会出现一些不兼容js的错误. Cef ...

  8. 项目Alpha冲刺--7/10

    项目Alpha冲刺--7/10 作业要求 这个作业属于哪个课程 软件工程1916-W(福州大学) 这个作业要求在哪里 项目Alpha冲刺 团队名称 基于云的胜利冲锋队 项目名称 云评:高校学生成绩综合 ...

  9. formData上传文件

    需要将选中的xml传到后台,通过xslt转换为html html: <form id="uploadForm" enctype="multipart/form-da ...

  10. bfs与dfs小结

    1,bfs适合状态容易存储的题目,如果状态比较难存储,就难以进行记忆化搜索,必然会难以bfs. (比如听说滑雪这个题你用bfs会死得很难看) 2,但是有些题目会很深(比如网格单源最短路),用dfs会跑 ...