【OpenHarmony】TypeScript 语法 ④ ( 函数 | TypeScript 具名函数和匿名函数 | 可选参数 | 剩余参数

【OpenHarmony】TypeScript 语法 ④ ( 函数 | TypeScript 具名函数和匿名函数 | 可选参数 | 剩余参数 | 箭头参数 )

文章目录

一、TypeScript 函数
- 1、TypeScript 具名函数和匿名函数
- 2、TypeScript 函数与 JavaScript 函数对比
- 3、TypeScript 函数可选参数
- 4、TypeScript 函数剩余参数
- 5、TypeScript 箭头函数

在这里插入图片描述

参考文档 : <HarmonyOS第一课>ArkTS开发语言介绍

一、TypeScript 函数

1、TypeScript 具名函数和匿名函数

TypeScript 语言中的函数语法与 JavaScript 类似 , 但是在 JavaScript 函数基础上增加了类型注解 , 函数代码的可读性和健壮性增加了 ;

JavaScript 中的函数不需要声明形参和返回值类型 , 但是在 TypeScript 中 , 必须声明形参和返回值类型 ;

TypeScript 函数与 Kotlin 函数极其相似 ;

TypeScript 函数使用 function 关键字定义 , 在 JavaScript 函数基础上 , 增加了形参类型和返回值类型声明 , 如下所示 :

function add(a: number, b: number): number {return a + b;
}

也可以使用匿名函数形式 , 将函数赋值给一个变量 , 通过变量调用函数 ;

let funAdd = function (a: number, b: number): number {return a + b;
}

在 https://ts.nodejs.cn/play 中运行 TypeScript 代码 :

function add(a: number, b: number): number {return a + b;
}let funAdd = function (a: number, b: number): number {return a + b;
}console.log(add(1, 2))
console.log(funAdd(3, 4))

执行结果 :

[LOG]: 3 
[LOG]: 7

在这里插入图片描述

2、TypeScript 函数与 JavaScript 函数对比

TypeScript 函数与 JavaScript 函数对比 : 唯一区别就是 JavaScript 函数中 , 不允许声明函数形参和返回值的类型 ;

TypeScript 函数 : 函数形参和返回值必须声明类型 ;

function add(a: number, b: number): number {return a + b;
}let funAdd = function (a: number, b: number): number {return a + b;
}

JavaScript 函数 : 函数形参和返回值必须不能声明类型 ;

        function add(a, b) {return a + b;}let funAdd = function(a, b) {return a + b;}

在 JavaScript 中 , 是不能为函数的形参和返回值设置类型的 , 将上述代码拷贝到 Visual Studio Code 的 HTML 代码中 , 会报如下错误 :

Type annotations can only be used in TypeScript files.javascript

在这里插入图片描述

可见 TypeScript 比 JavaScript 增加的就是 Type 类型声明 , 变量类型 , 函数形参 / 返回值类型 ;

将上述函数的形参和返回值类型删除 , 就是 JavaScript 代码 ,

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- 设置 meta 视口标签 --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>JavaScript</title><style></style><script>function add(a, b) {return a + b;}let funAdd = function(a, b) {return a + b;}console.log(add(1, 2))console.log(funAdd(3, 4))</script>
</head><body>
</body></html>

代码运行结果 :
在这里插入图片描述

3、TypeScript 函数可选参数

在 TypeScript 函数的形参中 , 形参名称后面使用 ? 符号 , 可以将该形参声明为函数的可选参数 , 也就是调用函数时 , 可以为该形参传入实参 , 也可以不传入实参 ;

代码示例 :

// 声明第二个参数 b 是可选参数
function add(a: number, b?: number): number {return a;
}// 传入可选参数
console.log(add(2, 4))
// 不传入可选参数
console.log(add(8))

在 https://ts.nodejs.cn/play 中运行 TypeScript 代码 :

[LOG]: 2 
[LOG]: 8

在这里插入图片描述

4、TypeScript 函数剩余参数

在 TypeScript 函数函数形参中 , 还可以使用 " 剩余参数 " , 剩余参数可以理解为个数不限的可选参数 , 参数个数可以是 0 到 n 个 , 使用 ... 三个点符号声明剩余参数 , 剩余参数必须是数组类型 ;

代码示例 : 在下面的代码中 , 想要传入 0 ~ n 个 number 类型的参数 , 就把该参数声明为剩余参数 , 剩余参数类型必须是传入类型的数组类型 , 在参数名前使用 ... 符号 ;

// 声明第二个参数 b 是 剩余参数
function add(a: number, ...b: number[]): number {console.log("传入的剩余参数 : " + b);return a;
}// 传入 剩余参数
console.log(add(2, 4, 6, 8))
// 传入 剩余参数
console.log(add(1, 2))
// 不传入 剩余参数
console.log(add(8))

在 https://ts.nodejs.cn/play 中运行 TypeScript 代码 :

[LOG]: "传入的剩余参数 : 4,6,8" 
[LOG]: 2 
[LOG]: "传入的剩余参数 : 2" 
[LOG]: 1 
[LOG]: "传入的剩余参数 : " 
[LOG]: 8

在这里插入图片描述

5、TypeScript 箭头函数

在 ES6 版本的 TypeScript 语言中 , 可以定义 " 箭头函数 " , 箭头函数有如下特点 :

省略 function 关键字 ;
使用 => 箭头符号定义函数 ;

将下面的正常函数 , 转为箭头函数 ,

function add(a: number, b: number): number {return a + b;
}

对应的箭头函数如下 : 将箭头函数赋值给变量 add ;

// 声明箭头函数
let add = (a: number, b: number): number => {return a + b;
}

在 https://ts.nodejs.cn/play 中运行 TypeScript 代码 :

// 声明箭头函数
let add = (a: number, b: number): number => {return a + b;
}console.log(add(1, 2));

运行结果 :

[LOG]: 3

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/338642.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！