typeScript中的函式
阿新 • • 發佈:2020-07-30
typeScript中的函式有一下幾種形式:
1、普通函式
2、可選引數
3、預設引數
4、剩餘引數
5、函式過載
6、箭頭函式
一、普通函式
es5中的普通函式定義:
function run(){ return 'run' }
es5中的匿名函式定義:
var run2 = function(){ return 'run2' }
ts中的普通函式定義:
//ts中的函式宣告 function run():string{ return 'run' } // 錯誤寫法 function run1():string{ return 123; }
ts中的匿名函式定義:
var fun2=function():number{ return 123; }
二、可選引數
es5裡方法的實參和形參可以不一樣,但是ts中必須一樣,如果不一樣就需要配置可選引數
function getInfo(name:string,age:number):string{ if(age){ return `${name} --- ${age}`; }else{ return `${name} --- 年齡保密哦`; } } console.log(getInfo('wen',28))//wen --- 28
console.log(getInfo('wen'))//wen ---年齡保密哦//注意:可選引數必須配置到引數的最後面
function getInfoSele(name:string,age?:number):string{ if(age){ return `${name} --- ${age}`; }else{ return `${name} --- 年齡保密哦`; } }
console.log(getInfoSele('wen',28))//wen --- 28
console.log(getInfoSele('wen'))//wen ---年齡保密哦
三、預設引數
es5中沒發設定預設引數,es6和ts中都可以設定預設引數
function getInfoInit(name:string,age:number=18):string{ if(age){ return `${name} --- ${age}`; }else{ return `${name} --- 年齡保密哦`; } } console.log(getInfoInit('wen'))//wen --- 18console.log(getInfoInit('wen',28))//wen --- 28
四、剩餘引數
function sum(a:number,b:number,c:number,d:number){ return a+b+c+d; } alert(sum(1,2,3,4));//10
// 三點運算子 接受新引數傳過來的值 function sum1(a:number,b:number,...result:number[]):number{ var sum = a+b; for (let i = 0; i < result.length; i++) { sum+=result[i]; } return sum; } alert(sum1(1,2,3,4));
五、ts函式過載
java中方法的過載,過載值得是兩個或者兩個以上同名闡述,但他們的引數不一樣,這是會出現函式過載的情況。
typescript中的過載:通過為同一個函式提供多個函式類定義來實現多種功能目的。
ts為了相容es5以及es6過載的寫法和java中有區別。
//es5中出現同名方法,下面的回替換上面的方法 function css(config){ } function css(config,value){ }
ts中的過載
function getList(name:string):string; function getList(age:number):string; function getList(str:any):any{ if(typeof str === 'string'){ return "我叫:"+str; }else{ return "我的年齡是:"+str; } } alert(getList('wen'));//ok alert(getList(20));//ok alert(getList(true));//error
六、箭頭函式
this指向的問題,箭頭函式裡面的this指向上下文。
setTimeout(()=>{ alert('run'); },1000)