(1)函数的定义

函数声明法

// function run():string{
// return 'run';
// } //错误写法,返回类型错误
// function run():string{
// return 123;
// }

匿名函数

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

ts中定义方法传参

    /*
function getInfo(name:string,age:number):string{ return `${name} --- ${age}`;
} alert(getInfo('zhangsan',20)); */ //匿名方法
var getInfo=function(name:string,age:number):string{
return `${name} --- ${age}`;
} alert(getInfo('zhangsan',40)); //没有返回值的方法
function run():void{
console.log('run')
}
run();

(2)方法可选参数

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

function getInfo(name:string,age?:number):string{
if(age){
return `${name} --- ${age}`;
}else{
return `${name} ---年龄保密`;
}
} alert(getInfo('zhangsan'))
alert(getInfo('zhangsan',123))

(3)默认参数 可选参数

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

 function getInfo(name:string,age:number=20):string{
if(age){
return `${name} --- ${age}`;
}else{
return `${name} ---年龄保密`;
}
}

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

/*
function sum(...result:number[]):number{
var sum=0; for(var i=0;i<result.length;i++){ sum+=result[i];
} return sum; }
alert(sum(1,2,3,4,5,6)) ;
*/
//剩余参数(三点运算符)必须在最后
function sum(a:number,b:number,...result:number[]):number{
var sum=a+b; for(var i=0;i<result.length;i++){
sum+=result[i];
}
return sum;
} alert(sum(1,2,3,4,5,6)) ;

(5)函数重载

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

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

//es5中出现同名方法,下面的会替换上面的方法
/*
function css(config){ } function css(config,value){ }
*/

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

示例1:

function getInfo(name:string):string;
function getInfo(age:number):string;
function getInfo(str:any):any{ if(typeof str==='string'){ return '我叫:'+str;
}else{ return '我的年龄是'+str;
} } alert(getInfo('张三')); //正确 alert(getInfo(20)); //正确 alert(getInfo(true)); //错误写法

示例2:

               function getInfo(name:string):string;
function getInfo(name:string,age:number):string;
function getInfo(name:any,age?:any):any{
if(age){ return '我叫:'+name+'我的年龄是'+age;
}else{ return '我叫:'+name;
}
} // alert(getInfo('zhangsan')); /*正确*/ // alert(getInfo(123)); 错误 // alert(getInfo('zhangsan',20));

(6)箭头函数

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

//es5
// setTimeout(function(){
// alert('run')
// },1000) setTimeout(()=>{
alert('run')
},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. Altium Designer常用快捷键总结

    一.PCB中常用快捷键 ● R+L 输出PCB中所有网络的布线长度 ● Ctrl+左键点击 对正在布的线完成自动布线连接 ● M+G 可更改铜的形状; ● 按P+T在布线状态下,按Shift+A可直接 ...

  2. gcc的__builtin_函数(注意前面是两个下划线)

    说明: GCC provides a large number of built-in functions other than the ones mentioned above. Some of t ...

  3. 小程序之程序构造器App()

    onLaunch / onShow / onHide 三个回调是App实例的生命周期函数 “小程序”指的是产品层面的程序,而“程序”指的是代码层面的程序实例,为了避免误解,下文采用App来代替代码层面 ...

  4. Python通过xpath查找元素通过selenium读取元素信息

    #coding:utf-8 from selenium import webdriver import time url ='http://www.baidu.com' driver = webdri ...

  5. 项目Alpha冲刺——集合

    作业描述 课程: 软件工程1916|W(福州大学) 作业要求: 项目Alpha冲刺(团队) 团队名称: 火鸡堂 作业目标: 完成项目Alpha冲刺 团队信息 队名:火鸡堂 队员学号 队员姓名 博客地址 ...

  6. PHP CGI 进程占用CPU过高导致CPU使用达到100%的另类原因

    由于使用的华为云的CDN加速,结果发现我的阿里云服务器突然卡顿,网页打开极慢.登陆华为云CDN管理后台发现最高带宽占用30M,流量短时间内达到10GB以上,这么大的流量我的服务器肯定扛不住啊.于是还跟 ...

  7. react编写规范之组件组件的内容编写顺序

    static 开头的类属性,如 defaultProps.propTypes. 构造函数,constructor. getter/setter(还不了解的同学可以暂时忽略). 组件生命周期. _ 开头 ...

  8. 微信小程序——选择某个区间的数字

    很久没有更新文章啦~~记录下今天弄的一个小功能. 先上图: 需求很简单: 第1列改变的时候,第2列也随着改变,并且比第1列大1k. 这里用到了微信的picker 组件,对于不太熟练这个组件的小伙伴可以 ...

  9. 使用merge-graphql-schemas 进行graphql schema 以及resovler 合并

    merge-graphql-schemas 是一个方便的工具,可以进行schema 以及resovler 的合并处理 一个schema 合并参考demo schema 定义 // ./graphql/ ...

  10. PDO和MySQLi区别和数度;到底用哪个?

    当用PHP访问数据库时,除了PHP自带的数据库驱动,我们一般还有两种比较好的选择:PDO和MySQLi.在实际开发过程中要决定选择哪一种首先要对二者有一个比较全面的了解.本文就针对他们的不同点进行分析 ...