先上效果圖：

GIF 2020-1-6 15-58-38.gif

一、首先安裝TypeScript，在node上執(zhí)行npm install -g typescript命令。
二、ts文件需要我們每次編寫完成以后都要執(zhí)行一下命令去編譯它，才會(huì)生成一個(gè)js文件
因此我們執(zhí)行tsc -init命令，在項(xiàng)目中生成一個(gè)json文件，并對json文件進(jìn)行修改。

image.png

image.png

四、編寫ts文件，并進(jìn)行編譯。我們執(zhí)行tsc -w命令就會(huì)自動(dòng)對我們保存的ts代碼進(jìn)行編譯，并根據(jù)json文件中的配置進(jìn)行打包分配。
五、展示TypeScript代碼

/*方法說明
*@method fmoney 保留兩位小數(shù)
*@for 所屬類名
*@param {Number} s  需要保留的數(shù)據(jù)
*@param {Number} n  保留幾位小數(shù)，0-20之間
*@return {string} 返回?cái)?shù)據(jù)
*/
function fmoney(s:(number|string), n:number=2):string {
    s = s||0
    n = n > 0 && n <= 20 ? n : 2;
    s = parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(n) + '';
    var l = s.split('.') [0].split('').reverse(),
    r = s.split('.') [1];
    var  t = '';
    for (var i = 0; i < l.length; i++)  {
        t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? ',' : '');
    }
    return t.split('').reverse().join('') + '.' + r;
};
//接口 關(guān)于numberAnimation 函數(shù)中第一個(gè)變量的聲明
interface optionObject { 
    time: number,
    finalNum: number,
    stepTime: number,
    digits:number
}
/*方法說明
*@method numberAnimation 數(shù)字自動(dòng)變化
*@for 所屬類名
*@param {Object} option 配置項(xiàng)
option:{
    time:總時(shí)間
    finalNum:數(shù)字
    stepTime:調(diào)速器
    digits:默認(rèn)開始數(shù)據(jù)幾位數(shù)
}
*@return {string} 返回?cái)?shù)據(jù)
*/

function numberAnimation(option:optionObject,target:string):any{
    option=option||{};
    let $this=document.getElementById(target);
    if (!$this) { 
        alert("未找到該結(jié)構(gòu)！");
        return
    }
    let time=option.time||0;//總耗時(shí)
    let finalNum=option.finalNum||0;//最終的數(shù)據(jù)
    let stepTime=option.stepTime||100;//調(diào)速器，改變stepTime，可以改變數(shù)字改變的速率
    let digits=option.digits||2;//默認(rèn)開始數(shù)據(jù)幾位數(shù)
    let temp=String(Math.pow(10,digits)).replace("1",'');
    let l=temp.split("").reverse();
    var  t = '';
    for (var i = 0; i < l.length; i++)  {
        t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? ',' : '');
    }
    $this.innerHTML=t.split('').reverse().join('') + '.00' ;
    let step=finalNum/(time/stepTime);
    let count=0;//計(jì)時(shí)器
    let timer=setInterval(()=>{
        count=Number(count)+step;
        if(count>=finalNum){
            clearInterval(timer);
            count=finalNum;
        }
        if ($this) { 
            $this.innerHTML=fmoney(count);
        }
    },30)
}
let btn = document.querySelector("button");
if (btn) { 
    btn.addEventListener("click",()=>{
        numberAnimation({time:1500,finalNum:382671.89,stepTime:50,digits:5},'time');        
    })
}

最后編譯生成的js文件展示如下

"use strict";
/*方法說明
*@method fmoney 保留兩位小數(shù)
*@for 所屬類名
*@param {Number} s  需要保留的數(shù)據(jù)
*@param {Number} n  保留幾位小數(shù)，0-20之間
*@return {string} 返回?cái)?shù)據(jù)
*/
function fmoney(s, n) {
    if (n === void 0) { n = 2; }
    s = s || 0;
    n = n > 0 && n <= 20 ? n : 2;
    s = parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(n) + '';
    var l = s.split('.')[0].split('').reverse(), r = s.split('.')[1];
    var t = '';
    for (var i = 0; i < l.length; i++) {
        t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? ',' : '');
    }
    return t.split('').reverse().join('') + '.' + r;
}
;
function numberAnimation(option, target) {
    option = option || {};
    var $this = document.getElementById(target);
    if (!$this) {
        alert("未找到該結(jié)構(gòu)！");
        return;
    }
    var time = option.time || 0; //總耗時(shí)
    var finalNum = option.finalNum || 0; //最終的數(shù)據(jù)
    var stepTime = option.stepTime || 100; //調(diào)速器，改變stepTime，可以改變數(shù)字改變的速率
    var digits = option.digits || 2; //默認(rèn)開始數(shù)據(jù)幾位數(shù)
    var temp = String(Math.pow(10, digits)).replace("1", '');
    var l = temp.split("").reverse();
    var t = '';
    for (var i = 0; i < l.length; i++) {
        t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? ',' : '');
    }
    $this.innerHTML = t.split('').reverse().join('') + '.00';
    var step = finalNum / (time / stepTime);
    var count = 0; //計(jì)時(shí)器
    var timer = setInterval(function () {
        count = Number(count) + step;
        if (count >= finalNum) {
            clearInterval(timer);
            count = finalNum;
        }
        if ($this) {
            $this.innerHTML = fmoney(count);
        }
    }, 30);
}
var btn = document.querySelector("button");
if (btn) {
    btn.addEventListener("click", function () {
        numberAnimation({ time: 1500, finalNum: 382671.89, stepTime: 50, digits: 5 }, 'time');
    });
}