Typescript 基礎（二）之函數

yeyan1996 發布于2019-08-23 10:22 / 3275人閱讀

摘要：調用者容易迷惑，當傳入函數的參數類型為時返回值的類型究竟是還是。前面兩個是函數聲明，最后一個是函數實現，有參數類型和返回值類型隨意搭配的意思。

Typescript 中的函數

Javascrip 中函數是一等公民
一、Javascript 中的兩種常見的定義函數的方式
1、函數聲明

function myFunc(x,y){
    return x+y
}

2、函數表達式

let addFunc = function(x,y){
    return x-y
}

二、Typescript 中定義函數可同時定義函數接收的參數類型和函數的返回值類型

function myFuncTs (x:number,y:number):number {
    return x+y
}
let result = myFuncTs(12,13)

當函數的返回值類型沒有指定時，typescript 會自動根據函數返回值推斷返回類型

可以使用接口來定義一個函數需要符合的形狀，如：

interface addFuncInteface{
    (x:number,y:number):number
}
let addF : addFuncInteface = (left:number,right:number)=>{ return left + right }

三、可選參數
JavaScript里，函數的每個參數都是可選的，可傳可不傳。沒傳參的時候，它的值就是undefined。在Typescript 中可以用？定義函數的可選參數,需要注意的是，可選參數必須在必須參數之后，否則報錯。
下面的例子中，name 參數是可選參數，可傳可不傳。

interface callbackInterface{
    (result:any):void
}
function canChoiceParames(width:number,height:number,callback:callbackInterface,name?:string):object {
    let tempObj = {
        w:width,
        h:height,
    }
    callback(tempObj)
    return tempObj
}
 let res = canChoiceParames(100,200,function(res){
    
},"myName")

四、默認參數
與可選參數不同的是，帶默認值的參數不需要放在必須參數的后面
下面的例子中 height 參數默認100

function defaultParams(width:number,height:number = 100){
}

五、剩余參數
必要參數和默認參數有一個共同點：他們都只表示某一個參數。但是有時候會有同時操作多個參數的需求，或者你并不知道會有多少個參數會傳進來。在JavaScript里，你可以使用 arguments來訪問所有傳入的參數。在Typescript 中可以把所有參數、或者某部分參數收集到一個變量里。注意剩余參數只能是最后一個參數。

function buildName(firstName: string, ...restOfName: string[]) {
  return firstName + " " + restOfName.join(" ");
}

let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

上面的例子中restOfName參數為一個包含了剩余參數的數組，該數組為["Samuel", "Lucas", "MacKinzie"]
六、函數重載
當函數入參使用聯合類型同時返回值也有有多種類型時，函數重載允許對函數接受不同參數的數量和類型時作出不同的處理。
比如實現一個反轉函數，輸入為數字類型123時輸出321，輸入字符串類型 abc 時輸出 cba
利用聯合類型，該需求實現如下

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

這樣雖然能實現需求，但是函數參數與返回值的說明不夠直觀。調用者容易迷惑，當傳入函數的參數類型為number 時返回值的類型究竟是 number 還是string。
函數重載可以解答這樣的疑惑，使函數的類型定義表達更加直觀。

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

前面兩個reverse 是函數聲明，最后一個reverse 是函數實現，有參數類型和返回值類型隨意搭配的意思。前面兩個 reverse 對函數進行了聲明，第一個reverse聲明的內容為，當傳入函數的參數類型為number 時，函數返回值類型為number 類型；第二個 reverse 聲明的內容為，當傳入函數的參數類型為string 時，函數返回值類型為string。
下面是另一個例子，動手試一下吧。
同樣的，前面幾個testOverload為函數聲明，最后一個testOverload為函數實現：

function testOverload(x:string,y:boolean):number;
function testOverload(x:string,y:number):string;
function testOverload(x:number,y:number):string;
function testOverload(x:number,y:boolean):number;
function testOverload(x:string | number, y:number|boolean) :string | number  {
    return x
}
let o1 = testOverload("string",false); // 此時 o1 類型為numer,鼠標移動到 o1 變量上可看到類型
let o2 = testOverload("string",10);// 此時 o2 類型為string,鼠標移動到 o2 變量上可看到類型
let o3 = testOverload(12,10);// 此時 o2 類型為string,鼠標移動到 o2 變量上可看到類型
let o4 = testOverload(13,true);// 此時 o2 number,鼠標移動到 o2 變量上可看到類型

GPU云服務器云服務器之基礎篇黑客基礎之DOS 零基礎課程之c語言基礎函數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96285.html

Typescript 基礎（一）之類型

摘要：基本數據類型包括數值字符串布爾值以及新增的。數值類型中的二進制表示法或者開頭中的八進制表示法或者開頭字符串類型普通字符串模板字符串模板字符串布爾值和類型在中使用和來定義這兩個數據類型。一、基本數據類型 Javascript 的類型分為兩種：原始數據類型和對象類型，TypeScript 支持與JavaScript幾乎相同的數據類型，此外還提供了枚舉、元組等實用的類型。基本數據類型包括：...

GitCafe 2019-08-26 12:08 評論0 收藏0
SegmentFault 技術周刊 Vol.40 - 2018，來學習一門新的編程語言吧！

摘要：入門，第一個這是一門很新的語言，年前后正式公布，算起來是比較年輕的編程語言了，更重要的是它是面向程序員的函數式編程語言，它的代碼運行在之上。它通過編輯類工具，帶來了先進的編輯體驗，增強了語言服務。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經到來了，總結過去的 2017，相信小伙們一定有很多收獲...

caspar 2019-08-15 13:33 評論0 收藏0
SegmentFault 技術周刊 Vol.40 - 2018，來學習一門新的編程語言吧！

摘要：入門，第一個這是一門很新的語言，年前后正式公布，算起來是比較年輕的編程語言了，更重要的是它是面向程序員的函數式編程語言，它的代碼運行在之上。它通過編輯類工具，帶來了先進的編輯體驗，增強了語言服務。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經到來了，總結過去的 2017，相信小伙們一定有很多收獲...

nihao 2019-08-21 18:39 評論0 收藏0
SegmentFault 技術周刊 Vol.40 - 2018，來學習一門新的編程語言吧！

摘要：入門，第一個這是一門很新的語言，年前后正式公布，算起來是比較年輕的編程語言了，更重要的是它是面向程序員的函數式編程語言，它的代碼運行在之上。它通過編輯類工具，帶來了先進的編輯體驗，增強了語言服務。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經到來了，總結過去的 2017，相信小伙們一定有很多收獲...

Drummor 2019-06-28 14:38 評論0 收藏0
前端每周清單第 45 期: Safari 支持 Service Worker, Parcel 完整教

摘要：的另一個核心特性，蘋果表示也正在開發中，按開發進度可能幾個月后就能與我們見面。是基于的本地化數據庫，支持以及瀏覽器環境。前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID: frontshow），及時獲取前端每周清單。本期是 2017 年的最后一...

趙春朋 2019-08-21 18:24 評論0 收藏0