VUE过滤器应使用打字稿绑定

Question

使用打字稿如何绑定VUE过滤器？纯JS非常简单，但是我会遇到问题，将其转换为打字稿。

代码和编译错误如下：

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：元素隐式具有"任何"类型，因为type'typeof ...'没有索引签名。

Answer 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>

快乐编码！

Answer 2

i像这样注册全局过滤器：

内部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)

Answer 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
  },
...

Answer 4

这对我有用(vue2 tyspript(：

定义过滤器中的过滤器

export default ({
  filterName1(value: any) { return 'Hello filter 1' },
  filterName2(value: any) { return 'Hello filter 2' }
} as { [key: string]: any })

然后，在Main.TS

中全球注册过滤器

import Vue from 'vue'
import App from './App.vue'
import filters from '@/filters'
// register filters
Object.keys(filters).forEach(key => { Vue.filter(key, filters[key]) }) 
new Vue({store, render: h => h(App)}).$mount('#app')

希望这可以帮助😊

Answer 5

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

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