Typescript中的擴展方法(Extension Method)


這個問題的起因:review公司項目的時候,發現很多如下的代碼(mock)
先是一個工具類Util.ts

class NumberUtil {
    static ToInt(num?: Number): number {
        num = num || 0;
        return Math.floor(num);
    }
}

在需要使用的地方調用工具類

var intNumber = NumberUtil.ToInt(12.34);

這種方式當然可以應付業務,但總覺得low了點。我們做過C#的都知道有擴展方法一說,而JS有prototype可以擴展。 那么TypeScript是怎么支持的呢?

且看下面的步驟:
1:新建一個測試項目 create-react-app XXX --template typescript
2:在src -> @types下新建global.d.ts,內容如下(代碼網上隨便抄的)

declare global {  
    interface Number {  
        thousandsSeperator(): String;  
    }  
}  
export {}; 

3:src下新建extension.ts

Number.prototype.thousandsSeperator = function(): string {  
    return Number(this).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');  
}  
export {}; 

4:最后在需要引用的代碼中加入

import "../extension";

const num=111111;
console.log(num.thousandsSeperator() );

上述是一種比較麻煩的驗證方式。 如果你用的是ts-node命令行,可以參考如下:
tsconfig.json中加入

    "ts-node": {
        "files": true
      },
      "files": [
        "extension.ts",
        "sample.ts",
        "@types/global.d.ts"
      ],

如下圖:

sample.ts

import "./extension";
const num=111111;
console.log(num.thousandsSeperator() );

如下圖

最后執行ts-node sample.ts


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM