国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Typescript 基礎(chǔ)（二）之函數(shù)

yeyan1996 / 3272人閱讀

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

Typescript 中的函數(shù)

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

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

2、函數(shù)表達式

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

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

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

當(dāng)函數(shù)的返回值類型沒有指定時，typescript 會自動根據(jù)函數(shù)返回值推斷返回類型

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

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

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

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

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

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

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

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

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

上面的例子中restOfName參數(shù)為一個包含了剩余參數(shù)的數(shù)組，該數(shù)組為["Samuel", "Lucas", "MacKinzie"]
六、函數(shù)重載
當(dāng)函數(shù)入?yún)⑹褂寐?lián)合類型同時返回值也有有多種類型時，函數(shù)重載允許對函數(shù)接受不同參數(shù)的數(shù)量和類型時作出不同的處理。
比如實現(xiàn)一個反轉(zhuǎn)函數(shù)，輸入為數(shù)字類型123時輸出321，輸入字符串類型 abc 時輸出 cba
利用聯(lián)合類型，該需求實現(xiàn)如下

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
    }
}

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

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 是函數(shù)聲明，最后一個reverse 是函數(shù)實現(xiàn)，有參數(shù)類型和返回值類型隨意搭配的意思。前面兩個 reverse 對函數(shù)進行了聲明，第一個reverse聲明的內(nèi)容為，當(dāng)傳入函數(shù)的參數(shù)類型為number 時，函數(shù)返回值類型為number 類型；第二個 reverse 聲明的內(nèi)容為，當(dāng)傳入函數(shù)的參數(shù)類型為string 時，函數(shù)返回值類型為string。
下面是另一個例子，動手試一下吧。
同樣的，前面幾個testOverload為函數(shù)聲明，最后一個testOverload為函數(shù)實現(xiàn)：

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,鼠標(biāo)移動到 o1 變量上可看到類型
let o2 = testOverload("string",10);// 此時 o2 類型為string,鼠標(biāo)移動到 o2 變量上可看到類型
let o3 = testOverload(12,10);// 此時 o2 類型為string,鼠標(biāo)移動到 o2 變量上可看到類型
let o4 = testOverload(13,true);// 此時 o2 number,鼠標(biāo)移動到 o2 變量上可看到類型

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/96285.html

相關(guān)文章

  • Typescript 基礎(chǔ)（一）之類型

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

    GitCafe 評論0 收藏0

  • SegmentFault 技術(shù)周刊 Vol.40 - 2018，來學(xué)習(xí)一門新的編程語言吧！

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

    caspar 評論0 收藏0

  • SegmentFault 技術(shù)周刊 Vol.40 - 2018，來學(xué)習(xí)一門新的編程語言吧！

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

    nihao 評論0 收藏0

  • SegmentFault 技術(shù)周刊 Vol.40 - 2018，來學(xué)習(xí)一門新的編程語言吧！

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

    Drummor 評論0 收藏0

  • 前端每周清單第 45 期: Safari 支持 Service Worker, Parcel 完整教

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

    趙春朋 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<