TypeScript的函数定义与使用案例教程

 更新时间:2021年07月23日 10:40:09   作者:ZhandsomeZ  
这篇文章主要介绍了TypeScript的函数定义与使用案例教程,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下

在这里插入图片描述

TypeScript中函数的定义和使用

1. 声明一个函数约束其传参类型,以及返回值类型

	传入两个参数,没有返回值
const fun1 = (key: string, value: number): void => {
		console.log(key, value);//"Typescript",100
};
fun1("Typescript", 100);

2.TypeScript中的函数配置可选参数,在ES5或者ES6中函数中的实参可以不传递进去,但是在TS中必须传递进去,如果需要设置非必传参数,就必须设置可选参数具体如下

const fun2 = (a: string, b?: number) => {
//形参后面加个?代表可以传递参数也可以不传递参数
	console.log(a);//typescript
}
fun2('typescript');
注意:配置可选参数必须配置到最后一个参数,
否则ts会有报错提示(虽然编译可以通过但不建议这么使用)

3.TypeScript的函数设置默认值

//设置了默认值,并传入实参,默认实参会代替默认值,这一点和ES6一致
const fun3 = (a: number, b: string = 'ECMAScript'): void => {
	console.log(a);//20
	console.log(b);//typescript
};
fun3(20, 'typescript');
/设置了默认值,没有传递实参,默认B的值就是true
	const fun4 = (a: number, b: boolean = true): void => {
	    console.log(a);//60
	    console.log(b);//true
};
fun4(60);

4.TypeScript函数的剩余参数

//接收多个参数,并放到一个容器里面,与ES6中的rest...三点运算符一样
const fun5 = (...result: number[]): void => {
//用变量result接收实参,并指明数据类型
let sum: number = 0;
	for (let index = 0; index < result.length; index++) {
	     sum += result[index];
};
    console.log(sum);//150
};
fun5(10, 20, 30, 40, 50);
//注意接收多个实参的变量必须放在最后一个,否则会报错
	
//接收参数,与变量名一一对应
const fun6 = (first: string, ...result: string[]): void => {
	console.log(first);//string
	console.log(result);//[ 'number', 'boolean', 'function', 'true' ]
}
fun6('string', 'number', 'boolean', 'function', 'true');

5.TypeScript中的函数重载

// java中方法的重载:重载指的是两个或者两个以上同名函数,
但它们的参数不一样,这时会出现函数重载的情况。
// typescript中的重载:
通过为同一个函数提供多个函数类型定义来试下多种功能的目的。
//TS中函数重载  TS为了兼容ES5和ES6 不能写大括号
//对实参类型进行约束
	function dataFn(a: string, b: number): void
	function dataFn(a: number, b: string): void
	function dataFn(a: number, b: number): void
	function dataFn(a: any, b: any): void {
//对传入的实参类型进行判断 如果符合某个函数就执行其函数体
	if(typeof (a) === "string") {
		    console.log('This is 字符串')
	};
	if (typeof (a) === "number" && typeof (b) === "number") {
		     console.log('this is 数字');
	};
	if (typeof (a) === 'number') {
		     console.log(a, b);//20,typescript
		 } else {
		    }
	}
	dataFn(10, 20);
	dataFn(20, 'typescript');

6.TypeScript中的箭头函数

基本形式:
    let func = num:number => num; //只有一个形参可以‘='后面写形参名,并约束其类型
	let func = () => num;//如果有多个形参,在‘='后面写‘()'把形参写在()里面并约束其类型
	let sum = (num1, num2) :number=> num1 + num2;//如果只有1条执行语句,
	//直接在‘=>'后面写执行语句即可,还要指定其返回类型
	如果有多条语句必须写{},将代码写在{}里面,重新指定返回值,以及类型
注意事项:
	函数体内的this对象,就是定义时所在的上下文,如果箭头函数是全局里面的话,
	还是指向window,建议在箭头函数外部再嵌套一层函数以便于控制里面的this
	不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
	不可以使用arguments对象,该对象在函数体内不存在。
	如果要用,可以用 rest 参数代替。
	const fun8 = (a: number, b: number): void => {
		console.log(a, b)
	}
	fun8(10, 20);

到此这篇关于TypeScript的函数定义与使用案例教程的文章就介绍到这了,更多相关TypeScript的函数定义与使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • C/C++ QT实现自定义对话框的示例代码

    C/C++ QT实现自定义对话框的示例代码

    对话框分为多种,常见的有通用对话框,自定义对话框,模态对话框,非模态对话框等,本文主要介绍了QT自定义对话框,感兴趣的可以了解一下
    2021-11-11
  • 基于堆的基本操作的介绍

    基于堆的基本操作的介绍

    本篇文章对堆的基本操作进行了详细的分析介绍。需要的朋友参考下
    2013-05-05
  • C++对象的浅复制和深复制详解及简单实例

    C++对象的浅复制和深复制详解及简单实例

    这篇文章主要介绍了C++对象的浅复制和深复制详解及简单实例的相关资料,需要的朋友可以参考下
    2017-04-04
  • C++哈希应用的位图和布隆过滤器

    C++哈希应用的位图和布隆过滤器

    这篇文章主要介绍了C++哈希应用的位图和布隆过滤器的相关资料,文章内容多以列举试题的方式讲解,感兴趣的朋友可以参考下面文章内容
    2021-09-09
  • C++ Boost命令行解析库的应用详解

    C++ Boost命令行解析库的应用详解

    命令行解析库是一种用于简化处理命令行参数的工具,它可以帮助开发者更方便地解析命令行参数并提供适当的帮助信息,本文主要介绍了不同的命令行解析库和它们在C++项目中的应用,希望对大家有所帮助
    2023-11-11
  • C语言实现单链表的基本操作分享

    C语言实现单链表的基本操作分享

    单链表是一种链式存取的数据结构,用一组地址任意的存储单元存放线性表中的数据元素。本文将为大家介绍C语言中单链表的基本操作,需要的可以参考一下
    2022-10-10
  • OpenCV实现图像细化算法

    OpenCV实现图像细化算法

    本文主要介绍了OpenCV实现图像细化算法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • 使用用C++做一颗会跳动的爱心实例代码

    使用用C++做一颗会跳动的爱心实例代码

    大家好,本篇文章主要讲的是使用用C++做一颗会跳动的爱心实例代码,感兴趣的同学赶快来看一看吧,欢迎借鉴学习C++做一颗会跳动的爱心实例代码
    2021-12-12
  • C++回文数及素数问题计算方法

    C++回文数及素数问题计算方法

    这篇文章主要介绍了C++回文数及素数问题计算方法,可实现一定范围内的素数与回文数运算功能,涉及C++字符串遍历与数字数学运算的相关技巧,需要的朋友可以参考下
    2016-05-05
  • 如何通过wrap malloc定位C/C++的内存泄漏问题

    如何通过wrap malloc定位C/C++的内存泄漏问题

    用C/C++开发的程序执行效率很高,但却经常受到内存泄漏的困扰。本文提供一种通过wrap malloc查找memory leak的思路。
    2021-05-05

最新评论