TypeScript學習筆記--函數function

函數 function
在ts中,函數是主要的定義 行爲的地方。 TypeScript爲JavaScript函數添加了額外的功能,讓咱們能夠更容易地使用。css

聲明方式

在 JavaScript 中,有兩種常見的定義函數的方式——函數聲明和函數表達式git

函數聲明

一個函數有輸入和輸出,要在 TypeScript 中對其進行約束,須要把輸入和輸出都考慮到。github

function sum(x:number,y:number):number{
  return x+y
}

函數表達式

let mySum = function (x: number, y: number): number {
    return x + y;
};

這二者是等價的,上面的代碼只對等號右側的匿名函數進行了類型定義,而等號左邊的 mySum,是經過賦值操做進行類型推論而推斷出來的typescript

let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};

注意:數組

  • 輸入多餘的(或者少於要求的)參數,是不被容許的,會報錯
  • 在 TypeScript 的類型定義中,=> 用來表示函數的定義,左邊是輸入類型,須要用括號括起來,右邊是輸出類型。

可選參數

與接口中的可選屬性相似,咱們用 ? 表示可選的參數。須要注意的是,可選參數必須接在必需參數後面。換句話說,可選參數後面不容許再出現必需參數了tomcat

let myName :(firstName:string,lastName?:string)=>void = function(firstName:string,lastName?:string):void{
  if (lastName) {
    console.log(firstName + ' ' + lastName);
  } else {
    console.log(firstName);
  }
}

默認參數

能夠按照日常的js給參數添加默認值,TypeScript 會將添加了默認值的參數識別爲可選參數,同時這樣也不受‘可選參數必須接在必需參數後面’的限制了。編輯器

function buildName(firstName: string = 'Tom', lastName: string) {
  return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let cat = buildName(undefined, 'Cat');

剩餘參數

在js中,arguments能夠表明函數的全部的參數,能夠在函數內獲取全部參數。ES6 中,可使用 ...rest 的方式獲取函數中的剩餘參數(rest 參數)。一樣的,ts也是支持...rest的方式。函數

function push(array: any[], ...items: any[]) {
  items.forEach(function(item) {
      array.push(item);
  });
}

let a_function:number[] = [1,2,3];
push(a_function, 1, 2, 3);

剩餘參數自己就是個數組,也須要進行類型聲明。ui

函數重載

什麼是函數重載:兩個以上的函數,具備相同的函數名,可是形參的個數或者類型不一樣,編譯器根據實參和形參的類型及個數的最佳匹配,自動肯定調用哪個函數,這就是函數的重載。this

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: any): any{
  if (typeof x === 'number') {
      return Number(x.toString().split('').reverse().join(''));
  } else if (typeof x === 'string') {
      return x.split('').reverse().join('');
  }
}

上例中,咱們重複定義了屢次函數 reverse,前幾回都是函數定義,最後一次是函數實現。在編輯器的代碼提示中,能夠正確的看到前兩個提示。
注意,TypeScript 會優先從最前面的函數定義開始匹配,因此多個函數定義若是有包含關係,須要優先把精確的定義寫在前面。

this

在js中this能夠經過上下文得知this的指向,在ts中,若不代表類型則容易報錯。

  • 在普通的函數裏,能夠在參數列表裏最前面添加this:any,指定假的參數,不影響
  • 在class中,能夠在參數列表中this能夠指定當前的class類

總結

emmm,開頭的一句話:TypeScript爲JavaScript函數添加了額外的功能,讓咱們能夠更容易地使用,還有規範
我把筆記和例子放到GitHub裏了,如須要能夠去看看,有什麼不對的地方,歡迎指正,你們一塊兒進步加油。

參考文獻

TypeScript 入門教程
TypeScript 中文手冊

相關文章
相關標籤/搜索