TypeScript中的函數(shù)怎么定義與使用

這篇文章主要講解了“TypeScript中的函數(shù)怎么定義與使用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“TypeScript中的函數(shù)怎么定義與使用”吧！

TypeScript中函數(shù)的定義和使用

１. 聲明一個(gè)函數(shù)約束其傳參類型，以及返回值類型

	傳入兩個(gè)參數(shù)，沒(méi)有返回值
const fun1 = (key: string, value: number): void => {
		console.log(key, value);//"Typescript"，100
};
fun1("Typescript", 100);

2.TypeScript中的函數(shù)配置可選參數(shù)，在ES5或者ES6中函數(shù)中的實(shí)參可以不傳遞進(jìn)去，但是在TS中必須傳遞進(jìn)去，如果需要設(shè)置非必傳參數(shù)，就必須設(shè)置可選參數(shù)具體如下

const fun2 = (a: string, b?: number) => {
//形參后面加個(gè)?代表可以傳遞參數(shù)也可以不傳遞參數(shù)
	console.log(a);//typescript
}
fun2("typescript");
注意：配置可選參數(shù)必須配置到最后一個(gè)參數(shù)，
否則ts會(huì)有報(bào)錯(cuò)提示(雖然編譯可以通過(guò)但不建議這么使用)

3.TypeScript的函數(shù)設(shè)置默認(rèn)值

//設(shè)置了默認(rèn)值，并傳入實(shí)參，默認(rèn)實(shí)參會(huì)代替默認(rèn)值,這一點(diǎn)和ES6一致
const fun3 = (a: number, b: string = "ECMAScript"): void => {
	console.log(a);//20
	console.log(b);//typescript
};
fun3(20, "typescript");
/設(shè)置了默認(rèn)值，沒(méi)有傳遞實(shí)參，默認(rèn)B的值就是true
	const fun4 = (a: number, b: boolean = true): void => {
	    console.log(a);//60
	    console.log(b);//true
};
fun4(60);

4.TypeScript函數(shù)的剩余參數(shù)

//接收多個(gè)參數(shù)，并放到一個(gè)容器里面，與ES6中的rest...三點(diǎn)運(yùn)算符一樣
const fun5 = (...result: number[]): void => {
//用變量result接收實(shí)參，并指明數(shù)據(jù)類型
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);
//注意接收多個(gè)實(shí)參的變量必須放在最后一個(gè)，否則會(huì)報(bào)錯(cuò)
	
//接收參數(shù)，與變量名一一對(duì)應(yīng)
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中的函數(shù)重載

// java中方法的重載：重載指的是兩個(gè)或者兩個(gè)以上同名函數(shù)，
但它們的參數(shù)不一樣，這時(shí)會(huì)出現(xiàn)函數(shù)重載的情況。
// typescript中的重載：
通過(guò)為同一個(gè)函數(shù)提供多個(gè)函數(shù)類型定義來(lái)試下多種功能的目的。
//TS中函數(shù)重載  TS為了兼容ES5和ES6 不能寫(xiě)大括號(hào)
//對(duì)實(shí)參類型進(jìn)行約束
	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 {
//對(duì)傳入的實(shí)參類型進(jìn)行判斷 如果符合某個(gè)函數(shù)就執(zhí)行其函數(shù)體
	if(typeof (a) === "string") {
		    console.log("This is 字符串")
	};
	if (typeof (a) === "number" && typeof (b) === "number") {
		     console.log("this is 數(shù)字");
	};
	if (typeof (a) === "number") {
		     console.log(a, b);//20,typescript
		 } else {
		    }
	}
	dataFn(10, 20);
	dataFn(20, "typescript");

6.TypeScript中的箭頭函數(shù)

基本形式：
    let func = num:number => num; //只有一個(gè)形參可以‘="后面寫(xiě)形參名,并約束其類型
	let func = () => num;//如果有多個(gè)形參，在‘="后面寫(xiě)‘（）"把形參寫(xiě)在（）里面并約束其類型
	let sum = (num1, num2) :number=> num1 + num2;//如果只有1條執(zhí)行語(yǔ)句，
	//直接在‘=>"后面寫(xiě)執(zhí)行語(yǔ)句即可，還要指定其返回類型
	如果有多條語(yǔ)句必須寫(xiě){},將代碼寫(xiě)在{}里面，重新指定返回值,以及類型
注意事項(xiàng)：
	函數(shù)體內(nèi)的this對(duì)象，就是定義時(shí)所在的上下文，如果箭頭函數(shù)是全局里面的話，
	還是指向window，建議在箭頭函數(shù)外部再嵌套一層函數(shù)以便于控制里面的this
	不可以當(dāng)作構(gòu)造函數(shù)，也就是說(shuō)，不可以使用new命令，否則會(huì)拋出一個(gè)錯(cuò)誤。
	不可以使用arguments對(duì)象，該對(duì)象在函數(shù)體內(nèi)不存在。
	如果要用，可以用 rest 參數(shù)代替。
	const fun8 = (a: number, b: number): void => {
		console.log(a, b)
	}
	fun8(10, 20);

感謝各位的閱讀，以上就是“TypeScript中的函數(shù)怎么定義與使用”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)TypeScript中的函數(shù)怎么定義與使用這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！