資訊專欄INFORMATION COLUMN
摘要：調(diào)用者容易迷惑，當(dāng)傳入函數(shù)的參數(shù)類型為時(shí)返回值的類型究竟是還是。前面兩個(gè)是函數(shù)聲明，最后一個(gè)是函數(shù)實(shí)現(xiàn)，有參數(shù)類型和返回值類型隨意搭配的意思。
Typescript 中的函數(shù)
Javascrip 中函數(shù)是一等公民
一、Javascript 中的兩種常見的定義函數(shù)的方式
1、函數(shù)聲明
function myFunc(x,y){
return x+y
}
2、函數(shù)表達(dá)式
let addFunc = function(x,y){
return x-y
}
二、Typescript 中定義函數(shù)可同時(shí)定義函數(shù)接收的參數(shù)類型和函數(shù)的返回值類型
function myFuncTs (x:number,y:number):number {
return x+y
}
let result = myFuncTs(12,13)
當(dāng)函數(shù)的返回值類型沒有指定時(shí)，typescript 會(huì)自動(dòng)根據(jù)函數(shù)返回值推斷返回類型
可以使用接口來定義一個(gè)函數(shù)需要符合的形狀，如：
interface addFuncInteface{
(x:number,y:number):number
}
let addF : addFuncInteface = (left:number,right:number)=>{ return left + right }
三、可選參數(shù)
JavaScript里，函數(shù)的每個(gè)參數(shù)都是可選的，可傳可不傳。 沒傳參的時(shí)候，它的值就是undefined。在Typescript 中可以用 ？ 定義函數(shù)的可選參數(shù),需要注意的是，可選參數(shù)必須在必須參數(shù)之后，否則報(bào)錯(cuò)。
下面的例子中，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ù)有一個(gè)共同點(diǎn)：他們都只表示某一個(gè)參數(shù)。但是有時(shí)候會(huì)有同時(shí)操作多個(gè)參數(shù)的需求，或者你并不知道會(huì)有多少個(gè)參數(shù)會(huì)傳進(jìn)來。在JavaScript里，你可以使用 arguments來訪問所有傳入的參數(shù)。在Typescript 中可以把所有參數(shù)、或者某部分參數(shù)收集到一個(gè)變量里。注意剩余參數(shù)只能是最后一個(gè)參數(shù)。
function buildName(firstName: string, ...restOfName: string[]) {
return firstName + " " + restOfName.join(" ");
}
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
上面的例子中restOfName參數(shù)為一個(gè)包含了剩余參數(shù)的數(shù)組，該數(shù)組為["Samuel", "Lucas", "MacKinzie"]
六、函數(shù)重載
當(dāng)函數(shù)入?yún)⑹褂寐?lián)合類型同時(shí)返回值也有有多種類型時(shí)，函數(shù)重載允許對(duì)函數(shù)接受不同參數(shù)的數(shù)量和類型時(shí)作出不同的處理。
比如實(shí)現(xiàn)一個(gè)反轉(zhuǎn)函數(shù)，輸入為數(shù)字類型123時(shí)輸出321，輸入字符串類型 abc 時(shí)輸出 cba
利用聯(lián)合類型，該需求實(shí)現(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
}
}
這樣雖然能實(shí)現(xiàn)需求，但是函數(shù)參數(shù)與返回值的說明不夠直觀。調(diào)用者容易迷惑，當(dāng)傳入函數(shù)的參數(shù)類型為number 時(shí)返回值的類型究竟是 number 還是string。
函數(shù)重載可以解答這樣的疑惑，使函數(shù)的類型定義表達(dá)更加直觀。
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
}
}
前面兩個(gè)reverse 是函數(shù)聲明，最后一個(gè)reverse 是函數(shù)實(shí)現(xiàn)，有參數(shù)類型和返回值類型隨意搭配的意思。前面兩個(gè) reverse 對(duì)函數(shù)進(jìn)行了聲明，第一個(gè)reverse聲明的內(nèi)容為，當(dāng)傳入函數(shù)的參數(shù)類型為number 時(shí)，函數(shù)返回值類型為number 類型；第二個(gè) reverse 聲明的內(nèi)容為，當(dāng)傳入函數(shù)的參數(shù)類型為string 時(shí)，函數(shù)返回值類型為string。
下面是另一個(gè)例子，動(dòng)手試一下吧。
同樣的，前面幾個(gè)testOverload為函數(shù)聲明，最后一個(gè)testOverload為函數(shù)實(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); // 此時(shí) o1 類型為numer,鼠標(biāo)移動(dòng)到 o1 變量上可看到類型
let o2 = testOverload("string",10);// 此時(shí) o2 類型為string,鼠標(biāo)移動(dòng)到 o2 變量上可看到類型
let o3 = testOverload(12,10);// 此時(shí) o2 類型為string,鼠標(biāo)移動(dòng)到 o2 變量上可看到類型
let o4 = testOverload(13,true);// 此時(shí) o2 number,鼠標(biāo)移動(dòng)到 o2 變量上可看到類型
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96285.html
摘要：基本數(shù)據(jù)類型包括數(shù)值字符串布爾值以及新增的。數(shù)值類型中的二進(jìn)制表示法或者開頭中的八進(jìn)制表示法或者開頭字符串類型普通字符串模板字符串模板字符串布爾值和類型在中使用和來定義這兩個(gè)數(shù)據(jù)類型。 一、基本數(shù)據(jù)類型 Javascript 的類型分為兩種：原始數(shù)據(jù)類型和對(duì)象類型，TypeScript 支持與JavaScript幾乎相同的數(shù)據(jù)類型，此外還提供了枚舉、元組等實(shí)用的類型?；緮?shù)據(jù)類型包括：...
摘要：入門，第一個(gè)這是一門很新的語言，年前后正式公布，算起來是比較年輕的編程語言了，更重要的是它是面向程序員的函數(shù)式編程語言，它的代碼運(yùn)行在之上。它通過編輯類工具，帶來了先進(jìn)的編輯體驗(yàn)，增強(qiáng)了語言服務(wù)。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經(jīng)到來了，總結(jié)過去的 2017，相信小伙們一定有很多收獲...
摘要：入門，第一個(gè)這是一門很新的語言，年前后正式公布，算起來是比較年輕的編程語言了，更重要的是它是面向程序員的函數(shù)式編程語言，它的代碼運(yùn)行在之上。它通過編輯類工具，帶來了先進(jìn)的編輯體驗(yàn)，增強(qiáng)了語言服務(wù)。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經(jīng)到來了，總結(jié)過去的 2017，相信小伙們一定有很多收獲...
摘要：入門，第一個(gè)這是一門很新的語言，年前后正式公布，算起來是比較年輕的編程語言了，更重要的是它是面向程序員的函數(shù)式編程語言，它的代碼運(yùn)行在之上。它通過編輯類工具，帶來了先進(jìn)的編輯體驗(yàn)，增強(qiáng)了語言服務(wù)。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經(jīng)到來了，總結(jié)過去的 2017，相信小伙們一定有很多收獲...
摘要：的另一個(gè)核心特性，蘋果表示也正在開發(fā)中，按開發(fā)進(jìn)度可能幾個(gè)月后就能與我們見面。是基于的本地化數(shù)據(jù)庫，支持以及瀏覽器環(huán)境。 前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開發(fā)教程、工程實(shí)踐、深度閱讀、開源項(xiàng)目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號(hào)（ID: frontshow），及時(shí)獲取前端每周清單。 本期是 2017 年的最后一...
閱讀 1343·2021-11-11 10:57
閱讀 3757·2021-09-07 10:10
閱讀 3466·2021-08-03 14:03
閱讀 3097·2019-08-30 13:45
閱讀 712·2019-08-29 11:19
閱讀 1066·2019-08-28 18:07
閱讀 3131·2019-08-26 13:55
閱讀 842·2019-08-26 12:17
