Vue + TypeScript + 过滤器

在 Vue 输出的时间时显示的是默认的如 "2018-04-17T02:24:20.957Z" 这样的字符串。下面将通过实现一个自定义的过滤器来修改时间的显示。
要实现的效果是：

1. 这样使用 {{todo.created | friendlyDateTime}}
2. 要实现的效果是类似于微信中消息时间的显示。

Vue 过滤器

Vue 提供了一个 Vue.filter( id, [definition] ) 函数用来自定义过滤器。
其中 id 就是过滤器名称。因为我们的过滤器的函数的声明如下：

Vue.filter("friendlyDateTime", function(value:Date): string{
    return ""
})

实现如下：

Vue.filter("friendlyDateTime", function(value:Date): string{
    if(!value){
        return ""
    }
    const elapsedSeconds = (Date.now() - value.getTime()) / 1000
    if(elapsedSeconds < 60){ return "刚刚" }
    if(elapsedSeconds < 300) {
         const minutes = elapsedSeconds / 60;
          return `${minutes} 分钟前`
    }
    if(value.isToday()){
        return value.toLocaleTimeString()
    }
    if(value.isYesterDay()){
        return "昨天 " +  value.toLocaleTimeString()
    }

    return value.toLocaleString()
})

这里值得说明的是。
1） 怎么样给 JS 内置类型 Date 添加方法。 将添加的声明和实现放在同一样文件中。如下：

export {}
declare global{
    interface Date{
        isToday():Boolean
        isYesterDay():Boolean
        isSameDate(date:Date):Boolean
    }
}

Date.prototype.isSameDate = function(date:Date):Boolean{
    return date && date.getFullYear() == this.getFullYear()
    && date.getMonth() == this.getMonth() && date.getDate() == date.getDate()
}

Date.prototype.isToday = function():Boolean{
    return this.isSameDate(new Date())
}

Date.prototype.isYesterDay = function():Boolean{
    const endDate = new Date(this.getTime())
    endDate.setHours(23,59,59,999)

    const todayStartDate = new Date()
    todayStartDate.setHours(0, 0, 0, 0)
 
    const millis = todayStartDate.getTime() - endDate.getTime()
    return (millis > 0 && millis < (24 * 60 * 60 * 1000))

}

2. 纯粹的导入一个模块。直接使用 import 指令即可。
   例如上面我们将 Vue.filter 声明在 filters.ts 文件中导入。
   在 app.ts 中可以将下面这样导入。
   import "./filters"

完整项目代码见： feat 添加 friendlyDateTime 过滤器