1. 程式人生 > 實用技巧 >TypeScript學習筆記--函式function

TypeScript學習筆記--函式function

函式 function
在ts中,函式是主要的定義 行為的地方。 TypeScript為JavaScript函式添加了額外的功能,讓我們可以更容易地使用。

宣告方式

在 JavaScript 中,有兩種常見的定義函式的方式——函式宣告和函式表示式

函式宣告

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

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

函式表示式

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

這兩者是等價的,上面的程式碼只對等號右側的匿名函式進行了型別定義,而等號左邊的 mySum,是通過賦值操作進行型別推論而推斷出來的

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

注意:

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

可選引數

與介面中的可選屬性類似,我們用 ? 表示可選的引數。需要注意的是,可選引數必須接在必需引數後面。換句話說,可選引數後面不允許再出現必需引數了

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);

剩餘引數本身就是個陣列,也需要進行型別宣告。

函式過載

什麼是函式過載:兩個以上的函式,具有相同的函式名,但是形參的個數或者型別不同,編譯器根據實參和形參的型別及個數的最佳匹配,自動確定呼叫哪一個函式,這就是函式的過載。

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 中文手冊