typeScript函數篇

typeScript的函數是在es6的函數特性的基礎上加了一些后端的概念：泛型、參數類型聲明、返回值類型聲明、重載、裝飾器等。其他的一些特性：箭頭函數、生成器、async-await、promise等都是es6的加的特性。

函數類型

JavaScript的函數參數是可以任何類型的，typeScript中加了對參數提添加類型，函數本身添加返回值類型。

function greetNane(name: string): string {
  return `hello ${name}`
}

還有一種函數聲明的方式：

let greetNane: (name: string) => string = function (name: string): string {
    return `hello ${name}`
}

typeScript中函數調用時傳的參數類型和數量和函數聲明時候不匹配會報錯。

可選參數和默認參數

可選參數：typeScript中設置函數中一個參數可傳也可不傳的。

let greetNane: (name: string, age?: number) => string = function (name: string, age?: number): string {
    return `hello ${name}`
}

默認參數：和es6的默認參數寫一樣，也可以在參數后面加類型。

let greetNane: (name: string, age: number = 0) => string = function (name: string, age: number = 0): string {
    return `hello ${name} ${age}`
}

let greetNane: (name: string, age = 0) => string = function (name: string, age = 0): string {
    return `hello ${name} ${age}`
}

剩余參數

typeScript剩余參數和es6的寫法差不多，也是后面加個參數的類型。

let greetNane: (name: string, ...arrs: string[]) => string = function (name: string, ...arrs: string[]): string {
    return `hello ${name} ${age}`
}

...的用法和es6的一樣。

注：因為現在主流瀏覽器都沒有完全支持es6，所有在實際項目中es6和typescript都是最后轉換成es5的寫法。剩余參數的轉換成es5是遍歷arguments參數將參數放到arrs數組中。

    var arrs=[];
    for (var _i = 0, coumt = arguments.length; i < coumt; i++) {
      arrs[_i]=arguments[_i];
    }

如果你認為這個可能對應用程序帶來性能問題,應考慮不使用剩余參數只使用數組作為參數。

重載

函數重載或方法重載是名稱相同並且參數數量類型不同創建多個方法的能力。
typeScript中通過聲明函數標簽，最后在一個標簽實現函數的。

function greetNane(name:string) :string;
function greetNane(name:number) :number;
function greetNane(name:boolean) :boolean;
function greetNane(name:(string|number|boolean)):any{
    return name;
}

泛型

作用域，this，箭頭函數就不說了，直接說泛型，泛型來創建可重用的組件，一個組件可以支持多種類型的數據。

function greetNane<T>(name:T):T{
    return name
}

greetNane<string>('name')
greetNane('name')

函數根據參數的類型來返回對應類型的值。

---

參考書籍文檔：

• 《Learning TypeScript》
• TypeScript中文網