TypeScript 函数

简介:

TS的函数和AS3.0里面的函数写法有一些相似之处,比如传统的写法:

1
2
3
4
5
6
7
8
9
10
function  add( a : number , b : number ):number{
     return  a + b;
}
//也可以这样写
let  myAdd : Function =  function ( a : number , b : number ) : number{
     return  a + b;
};
 
let sum : number = add(2,2);
console.log( `2+2 = ${sum}` );

我是用Node命令得到结果如下:

wKiom1mMEFTw_R9KAAAfh19hQ7E163.png-wh_50

好 , 补充一句 : TS的作者其实是C#的作者 , 所以TS中函数的变形写法很像lambda


下面使用此方案 , 实现类似的函数( add_change_01函数 ):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function  add( a : number , b : number ):number{
     return  a + b;
}
//也可以这样写
let  myAdd : Function =  function ( a : number , b : number ) : number{
     return  a + b;
};
 
 
//类似Lamdba表达式 ( x : number , y : number )为参数列表 对应 ( a : number , b : number)
//=> number 表示返回值
let add_change_01 :( x : number , y : number ) => number =  function ( a : number , b : number) : number{  return  a + b; };
 
let sum : number = add_change_01(2,3);
console.log( `2+3 = ${sum}` );

可以查看生成的Js代码基本是一样的( add_change_01函数 )

1
2
3
4
5
6
7
8
9
10
11
12
function  add(a, b) {
     return  a + b;
}
//д
var  myAdd =  function  (a, b) {
     return  a + b;
};
//Lamdba ( x : number , y : number )б  ( a : number , b : number)
//=> number 
var  add_change_01 =  function  (a, b) {  return  a + b; };
var  sum = add_change_01(2, 3);
console.log( "2+3 = "  + sum);

解释:

//类似Lamdba表达式 ( x : number , y : number )为参数列表 对应 ( a : number , b : number)

//=> number 表示返回值


再次简化这种函数的编写方式如下:(add_change_02)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function  add( a : number , b : number ):number{
     return  a + b;
}
//也可以这样写
let  myAdd : Function =  function ( a : number , b : number ) : number{
     return  a + b;
};
 
 
//类似Lamdba表达式 ( x : number , y : number )为参数列表 对应 ( a : number , b : number)
//=> number 表示返回值
let add_change_01 :( x : number , y : number ) => number =  function ( a : number , b : number) : number{  return  a + b; };
 
//因为知道参数列表的对应关系 所以 a 和 b 可以不写类型
//因为知道返回类型所以( a , b)后面没有必要加:number
let add_change_02 :( x : number , y : number ) => number =  function ( a , b){  return  a + b };
 
let sum : number = add_change_02(2,3);
console.log( `2+3 = ${sum}` );

编译下一 , 得到的Js是一样的(add_change_02)

wKiom1mMGCiwVGjlAABrdc4WoQ8934.png-wh_50

解释:

//因为知道参数列表的对象关系 所以 a 和 b 可以不写类型

//因为知道返回类型所以( a , b)后面没有必要加:number

做一个测试如下 :

wKiom1mMGWzDoPcOAAA78fOay9w242.png-wh_50

我们编译一下(报类型不匹配):

wKiom1mMGcrBYAFpAABihr9ApM0280.png-wh_50




可选参数 -> 可穿参数也可不传参数

1
2
3
4
5
6
7
8
9
10
11
12
13
//b? : 在参数b的后面加一个问号表示可选参数
let myAdd_change : Function =  function ( a : number , b? : number) : number{
     if ( b ){
         return  a + b;
     } else {
         return  a;
     }
}
let sum : number = myAdd_change(2,3); //传了第二个参数
console.log( `2+3 = ${sum}` );
 
let num : number = myAdd_change( 2 ); //没有穿第二个参数
console.log( `2 = ${num}` );

结果:

wKiom1mMHHawZTSRAAAokmQFoq4014.png-wh_50



剩余参数(多变参数)

1
2
3
4
5
6
7
8
9
10
let myAdd_change_02 : Function =  function ( a : number , ... oters : number[] ) : number{
     if ( oters && oters.length > 0 ){
         for ( let i : number = 0 , j : number = oters.length ; i < j ; i ++){
             a += oters[i];
         }
     }
     return  a;
}
let num : number = myAdd_change_02( 2 , 3 , 4 );
console.log( `2 + 3 + 4 = ${num}` );

结果:

wKiom1mMHtzAQUTGAAAifSeKEyM647.png-wh_50




回调函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
class Listener{
     public  info : string;
     public onExe : Function = (type:string) => {
         this .info = type
         console.log( `exe callback ${ this .info}` );
     };
}
 
class Dispose{
     public _listen : Listener =  null ;
     private _callBack : Function =  null ;
     constructor(){
         this ._listen =  new  Listener();
         this ._callBack =  this ._listen.onExe; //注入回调函数
     }
     public testCallBack : Function = ()=>{
         if this ._callBack !=  null  ){
             this ._callBack(  "good callback!"  ); //回调成功
         } else {
             console.log( "unregister callback" ); //回调失败
         }
     };
}
 
let dispose : Dispose =  new  Dispose();
dispose.testCallBack();

结果:

wKiom1mMKnaAt0kfAAAfHHSSkJw584.png-wh_50


回调还可以用下面的方案:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
class Listener{
     public  info : string;
     public onExe : Function = (type:string) => {
         this .info = type;
         console.log( `exe callback ${ this .info}` );
     };
     
     //可以使用此方法
     public onExe_Change:(type:string)=>void= function (a){
         this .info = a;
         console.log(`exe callback ${ this .info}`);
     };
}
 
class Dispose{
     public _listen : Listener =  null ;
     private _callBack : Function =  null ;
     constructor(){
         this ._listen =  new  Listener();
         //this._callBack = this._listen.onExe;//注入回调函数
         this ._callBack =  this ._listen.onExe_Change; //注入回调函数
     }
     public testCallBack : Function = ()=>{
         if this ._callBack !=  null  ){
             this ._callBack(  "good callback!"  ); //回调成功
         } else {
             console.log( "unregister callback" ); //回调失败
         }
     };
}
 
let dispose : Dispose =  new  Dispose();
dispose.testCallBack();
















本文转自Aonaufly51CTO博客,原文链接:http://blog.51cto.com/aonaufly/1955204  ,如需转载请自行联系原作者




相关文章
|
6月前
|
JavaScript 前端开发 编译器
TypeScript 函数第一章
TypeScript 函数第一章
73 4
|
6月前
|
JavaScript 前端开发 测试技术
[小笔记]TypeScript/JavaScript模拟Python中的Range函数
[小笔记]TypeScript/JavaScript模拟Python中的Range函数
67 0
|
6月前
|
JavaScript 编译器
TypeScript中泛型在函数和类中的应用
【4月更文挑战第23天】TypeScript的泛型在函数和类中提供了灵活性,允许处理多种数据类型。了解泛型是掌握TypeScript类型系统的关键。
|
2月前
|
JavaScript
typeScript基础(3)_ts函数默认值和可选参数
本文介绍了在TypeScript中如何使用函数的默认值和可选参数。展示了如何为函数参数指定默认值,使得在调用函数时可以省略某些参数,以及如何定义可选参数。
154 2
|
1月前
|
移动开发 JavaScript 前端开发
TypeScript:数组类型&函数使用&内置对象
本文介绍了 TypeScript 中的数组类型、对象数组、二维数组、函数、函数重载、内置对象等概念,并通过代码示例详细展示了它们的使用方法。还提供了一个使用 HTML5 Canvas 实现的下雨效果的小案例。
|
2月前
|
JavaScript
typeScript基础(7)_函数的类型
本文介绍了TypeScript中函数的类型,包括函数声明与函数表达式的类型注解,如何定义函数的参数类型、返回类型,以及可选参数和参数默认值。还探讨了函数的剩余参数、如何使用接口定义函数的形状,以及函数重载的概念和实践。
29 0
|
4月前
|
JavaScript 前端开发 程序员
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
79 0
|
4月前
|
JavaScript
TypeScript(六)函数
TypeScript(六)函数
26 0
|
5月前
|
JavaScript 前端开发 API
TypeScript 函数
TypeScript 函数
|
5月前
|
JavaScript 前端开发
typescript 函数类型
typescript 函数类型