TypeScript中的函数怎么定义与使用
创始人
2024-12-16 13:02:11
0次

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);

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...