TypeScript中的函數怎么定義與使用

這篇文章主要講解了“TypeScript中的函數怎么定義與使用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“TypeScript中的函數怎么定義與使用”吧！

TypeScript中函數的定義和使用

１. 聲明一個函數約束其傳參類型，以及返回值類型

	傳入兩個參數，沒有返回值
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中的函數怎么定義與使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！