1. 程式人生 > 實用技巧 >typeScript中的函式

typeScript中的函式

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 --- 18 
console.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)