TypeScript的函數(shù)定義與使用案例教程
更新時間:2021年07月23日 10:40:09 作者:ZhandsomeZ
這篇文章主要介紹了TypeScript的函數(shù)定義與使用案例教程,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下
TypeScript中函數(shù)的定義和使用
1. 聲明一個函數(shù)約束其傳參類型,以及返回值類型
傳入兩個參數(shù),沒有返回值 const fun1 = (key: string, value: number): void => { console.log(key, value);//"Typescript",100 }; fun1("Typescript", 100);
2.TypeScript中的函數(shù)配置可選參數(shù),在ES5或者ES6中函數(shù)中的實參可以不傳遞進去,但是在TS中必須傳遞進去,如果需要設置非必傳參數(shù),就必須設置可選參數(shù)具體如下
const fun2 = (a: string, b?: number) => { //形參后面加個?代表可以傳遞參數(shù)也可以不傳遞參數(shù) console.log(a);//typescript } fun2('typescript'); 注意:配置可選參數(shù)必須配置到最后一個參數(shù), 否則ts會有報錯提示(雖然編譯可以通過但不建議這么使用)
3.TypeScript的函數(shù)設置默認值
//設置了默認值,并傳入實參,默認實參會代替默認值,這一點和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函數(shù)的剩余參數(shù)
//接收多個參數(shù),并放到一個容器里面,與ES6中的rest...三點運算符一樣 const fun5 = (...result: number[]): void => { //用變量result接收實參,并指明數(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); //注意接收多個實參的變量必須放在最后一個,否則會報錯 //接收參數(shù),與變量名一一對應 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中方法的重載:重載指的是兩個或者兩個以上同名函數(shù), 但它們的參數(shù)不一樣,這時會出現(xiàn)函數(shù)重載的情況。 // typescript中的重載: 通過為同一個函數(shù)提供多個函數(shù)類型定義來試下多種功能的目的。 //TS中函數(shù)重載 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 { //對傳入的實參類型進行判斷 如果符合某個函數(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; //只有一個形參可以‘='后面寫形參名,并約束其類型 let func = () => num;//如果有多個形參,在‘='后面寫‘()'把形參寫在()里面并約束其類型 let sum = (num1, num2) :number=> num1 + num2;//如果只有1條執(zhí)行語句, //直接在‘=>'后面寫執(zhí)行語句即可,還要指定其返回類型 如果有多條語句必須寫{},將代碼寫在{}里面,重新指定返回值,以及類型 注意事項: 函數(shù)體內(nèi)的this對象,就是定義時所在的上下文,如果箭頭函數(shù)是全局里面的話, 還是指向window,建議在箭頭函數(shù)外部再嵌套一層函數(shù)以便于控制里面的this 不可以當作構(gòu)造函數(shù),也就是說,不可以使用new命令,否則會拋出一個錯誤。 不可以使用arguments對象,該對象在函數(shù)體內(nèi)不存在。 如果要用,可以用 rest 參數(shù)代替。 const fun8 = (a: number, b: number): void => { console.log(a, b) } fun8(10, 20);
到此這篇關(guān)于TypeScript的函數(shù)定義與使用案例教程的文章就介紹到這了,更多相關(guān)TypeScript的函數(shù)定義與使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
淺談關(guān)于指針作為參數(shù)并改變它的值的問題
這篇文章介紹了關(guān)于指針作為參數(shù)并改變它的值的問題,有需要的朋友可以參考一下2013-10-10c++11?實現(xiàn)枚舉值到枚舉名的轉(zhuǎn)換問題
這篇文章主要介紹了c++11?實現(xiàn)枚舉值到枚舉名的轉(zhuǎn)換,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-03-03C語言實現(xiàn)學生管理系統(tǒng)總結(jié)
這篇文章主要為大家詳細介紹了C語言實現(xiàn)學生管理系統(tǒng),文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07