TypeScript学习笔记（三） - 方法

待我称王封你为后i 2022-05-27 01:57 245阅读 0赞

> 本篇将介绍在TypeScript里如何定义和使用方法。

### 一、方法标准声明和使用 ###

1 // 方法声明
    2 function func(x: number, y: number): number {
    3     return x + y;
    4 }

在TypeScript里，方法声明可以明确定义每一个参数的类型，和返回值的类型。在编译时，编译器会检查方法体的返回值类型是否符合定义的类型，同时在调用的时候也会检查传入的参数类型是否符合定义的类型，参数个数是否符合定义的个数。

1 let result1 = func(1, 2);                     // 正确的调用方式。
    2 let result2 = func_lambda(1, 2, 3);           // 错误的调用方式。参数个数多余定义。
    3 let result3 = func_lambda(1);                 // 错误的调用方式。参数个数少于定义。
    4 let result4 = func_lambda('1', '2');          // 错误的调用方式。参数类型不符合定义。

另外，方法声明也支持使用Lambda表达式。

1 // lambda表达式声明
    2 let func_lambda: (x: number, y: number) => number = function (x, y) { return x + y };

### 二、缺省参数声明 ###

在某些情况下，方法调用只需要传入部分参数。TypeScript也支持缺省参数的声明方式。

![复制代码][copycode.gif]

1 // 缺省参数定义
     2 let showName = function (firstName: string, lastName?: string): string {
     3     if (lastName) {
     4         return firstName + ' ' + lastName;
     5     } else {
     6         return firstName;
     7     }
     8 };
     9 
    10 let wholeName1 = showName('星辰', 'Lee');
    11 let wholeName2 = showName('星辰');

![复制代码][copycode.gif]

通过在参数名称后面加上?，标识该参数是缺省的，调用时如果对应参数位置不传入，对应参数位置则为undefined。

### 三、默认值参数声明 ###

在某些情况下，方法调用时某些参数在不传入时，默认使用方法定义的值。TypeScript同样支持默认值参数的声明方式。

1 // 默认值参数定义
    2 let showName2 = function (firstName: string, lastName = 'Lee'): string {
    3     return firstName + ' ' + lastName;
    4 };
    5 
    6 let wholeName3 = showName2('星辰');

通过在参数名称后加上=号并赋值，标识该参数具有默认值。调用时如果对应参数位置不传入或者传入undefined，则取默认值，否则取对应位置传入的值。

### 四、多参数声明 ###

像其他强类型语言一样，TypeScript在定义方法的时候，也支持不明数量的多参数传入。

1 // 多参数定义
    2 let restParamsFunc = function (param1: string, ...restParams: string[]): string {
    3     return param1 + ' ' + restParams.join(' ');
    4 };
    5 
    6 let resParamsFuncResult = restParamsFunc('a', 'b', 'c');

通过在参入名称前加上...(三个小数点)，标识对应位置的参数可以传入多个。因为参数类型已明确定义，所以传入的多个参数的类型必须与定义保持一致，否则编译时将提示错误。

### 五、其他类型参数声明 ###

对象类型：

![复制代码][copycode.gif]

1 // 对象类型参数
     2 let jsonParamFunc = function (x: { p1: string }): string {
     3     return x.p1;
     4 };
     5 
     6 let jsonParamFuncResult1 = jsonParamFunc({ p1: 'a' });              // 赋值类型正确
     7 let jsonParamFuncResult2 = jsonParamFunc({ p1: 'a', p2: 'b' });     // 赋值类型错误，参数属性比定义的多。
     8 let jsonParamFuncResult3 = jsonParamFunc({ p3: 'c' });              // 复制类型错误，参数属性名不匹配。
     9 let params = { p1: 'a', p2: 'b' };
    10 let jsonParamFuncResult4 = jsonParamFunc(params);                   // 用变量代替直接复制，编译器检查通过。

![复制代码][copycode.gif]

上面的例子里，参数类型被定义为一个拥有属性“p1”的json对象。在方法调用时，传入的参数将严格符合参数类型的定义，参数对象的属性多余或者少于定义将提示错误，属性名称与定义不一致也将提示错误。

但是，如果传入的是一个变量，变量的属性只要能满足定义的类型属性即可。

方法类型：

![复制代码][copycode.gif]

1 // 方法类型参数
    2 let funcParamFunc = function (func: (x: string, y: string) => string): string {
    3     let _x = 'a';
    4     let _y = 'b';
    5     return func(_x, _y);
    6 };
    7 
    8 let funParamFuncResult = funcParamFunc(function (x, y) { return x + y });

![复制代码][copycode.gif]

方法参数类型可定义为一个固定结构的方法，该方法就成为了一个回调方法。

### 六、方法重载 ###

TypeScript也支持方法重载。

![复制代码][copycode.gif]

1 // 方法重载
     2 function overloadFunc(x: { p1: string }): string;
     3 function overloadFunc(x: number): number;
     4 function overloadFunc(x): any {
     5     if (typeof x == 'object') {
     6         return x.p1;
     7     }
     8 
     9     if (typeof x == 'number') {
    10         return x;
    11     }
    12 }
    13 
    14 let overloadFuncResult1 = overloadFunc({ p1: 'a' });
    15 let overloadFuncResult2 = overloadFunc(1);

![复制代码][copycode.gif]

在上面的例子里，连续声明了拥有同一个名称的三个方法：

前两个方法只有方法定义，没有方法体。它们定义了重载方法的个数和表现形式。

最后一个方法的参数没有定义类型，返回值定义为any，同时有方法体。它定义了重载方法的具体实现。

最后，将以上代码编译过后的JavaScript代码展示出来，可以进行对比。

![复制代码][copycode.gif]

1 // 方法声明
     2 function func(x, y) {
     3     return x + y;
     4 }
     5 var result1 = func(1, 2); // 正确的调用方式。
     6 var result2 = func_lambda(1, 2, 3); // 错误的调用方式。参数个数多余定义。
     7 var result3 = func_lambda(1); // 错误的调用方式。参数个数少于定义。
     8 var result4 = func_lambda('1', '2'); // 错误的调用方式。参数类型不符合定义。
     9 // lambda表达式声明
    10 var func_lambda = function (x, y) { return x + y; };
    11 // 缺省参数定义
    12 var showName = function (firstName, lastName) {
    13     if (lastName) {
    14         return firstName + ' ' + lastName;
    15     }
    16     else {
    17         return firstName;
    18     }
    19 };
    20 var wholeName1 = showName('星辰', 'Lee');
    21 var wholeName2 = showName('星辰');
    22 // 默认值参数定义
    23 var showName2 = function (firstName, lastName) {
    24     if (lastName === void 0) { lastName = 'Lee'; }
    25     return firstName + ' ' + lastName;
    26 };
    27 var wholeName3 = showName2('星辰');
    28 // 多参数定义
    29 var restParamsFunc = function (param1) {
    30     var restParams = [];
    31     for (var _i = 1; _i < arguments.length; _i++) {
    32         restParams[_i - 1] = arguments[_i];
    33     }
    34     return param1 + ' ' + restParams.join(' ');
    35 };
    36 var resParamsFuncResult = restParamsFunc('a', 'b', 'c');
    37 // 对象类型参数
    38 var jsonParamFunc = function (x) {
    39     return x.p1;
    40 };
    41 var jsonParamFuncResult1 = jsonParamFunc({ p1: 'a' }); // 赋值类型正确
    42 var jsonParamFuncResult2 = jsonParamFunc({ p1: 'a', p2: 'b' }); // 赋值类型错误，参数属性比定义的多。
    43 var jsonParamFuncResult3 = jsonParamFunc({ p3: 'c' }); // 复制类型错误，参数属性名不匹配。
    44 var params = { p1: 'a', p2: 'b' };
    45 var jsonParamFuncResult4 = jsonParamFunc(params); // 用变量代替直接复制，编译器检查通过。
    46 // 方法类型参数
    47 var funcParamFunc = function (func) {
    48     var _x = 'a';
    49     var _y = 'b';
    50     return func(_x, _y);
    51 };
    52 var funParamFuncResult = funcParamFunc(function (x, y) { return x + y; });
    53 function overloadFunc(x) {
    54     if (typeof x == 'object') {
    55         return x.p1;
    56     }
    57     if (typeof x == 'number') {
    58         return x;
    59     }
    60 }
    61 var overloadFuncResult1 = overloadFunc({ p1: 'a' });
    62 var overloadFuncResult2 = overloadFunc(1);

![复制代码][copycode.gif]

###### 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出作者名和原文连接，否则保留追究法律责任的权利。 ######

[copycode.gif]: /images/20220527/9530447cd3bc4194859db03d894f7985.png