Vue过滤器应该如何使用typescript绑定？答案

【问题标题】：How should Vue filters be bound using typescript?Vue过滤器应该如何使用typescript绑定？
【发布时间】：2017-11-04 03:36:03
【问题描述】：

Vue过滤器应该如何使用TypeScript绑定？使用纯 js 相当简单，但我在将其转换为 TypeScript 时遇到了问题。

代码及编译错误如下：

app.ts

import * as Vue from 'vue'
...
import * as filters from './util/filters'

// register global utility filters.
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key]);
})

util/filters.ts

export function host (url: string) {
  ...
}

export function timeAgo (time: any) {
  ....
}

编译错误

错误 TS7017：元素隐式具有“任何”类型，因为类型“typeof ...”没有索引签名。

【问题讨论】：

标签： typescript vue.js

【解决方案1】：

我正在使用一个名为 vue-property-decorator 的库，您可以在其中执行以下操作：

import { Component, Vue } from 'vue-property-decorator'

@Component({
  name: 'ComponentName',
  filters: {
    filterName(value: any) {
      return 'Hello filter'
    }
  }
})
export default class ComponentName extends Vue {
  textToFormat = 'Hello world'
}

然后应用过滤器：

<p>{{ textToFormat | filterName }}</p>

编码愉快！

【讨论】：

所以你手动注入并在每个组件中重复你的代码？
您可以将您想要重用的过滤器作为全局过滤器添加到 Vue 实例，请参阅https://vuejs.org/v2/guide/filters。这通常在您引导项目的main.js 文件中完成。
问题不是关于如何在全球范围内制作它，而是关于你上面的类组件样式的代码。您是否尝试将所有过滤器包含在 main.ts 中？我遇到过类型问题：stackoverflow.com/questions/57672886/…
@AlexanderKim 你可以这样做：import { myFilter } from '@/filters/my.filter'; 和 @Component({ filters: { myFilter } })
@Arajay，我的意思是全局导入所有组件，而不是一个一个。

【解决方案2】：

在这种情况下，您可以简单地使用类型断言

Object.keys(filters).forEach(key => {
  Vue.filter(key, (filters as any)[key])
})

【讨论】：

【解决方案3】：

为了在全局范围内添加过滤器，我做了如下操作

// in customFilter.ts file

import Vue from 'vue';

const testFilter = Vue.filter(
  'filterName', () => {
    // filter fn
   }
);
export default testFilter;

并将其包含在 main.ts 中

import testFilter from '@/customFilter.ts'

new Vue({
...
  filters: {
    testFilter
  },
...

【讨论】：

【解决方案4】：

我这样注册全局过滤器：

内部plugins/filters.ts：

import { VueConstructor } from 'vue/types/umd'

export default {
  install (Vue: VueConstructor) {
    Vue.filter('someFormatFunc1', function someFormatFunc1(value) {
      // Your formatting function
    })
    Vue.filter('someFormatFunc2', function someFormatFunc2(value) {
      // Your formatting function
    })
  }
}

然后在main.ts：

import filters from './plugins/filters'
Vue.use(filters)

【讨论】：