Question

如何使用TypeScript绑定Vue过滤器？纯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：元素隐含地有一个＆＃39;任何＆＃39;键入因为类型＆＃39; typeof ...＆＃39;没有索引签名。

编译错误适用于

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

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

// 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 3

我这样注册全局过滤器：

在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 4

在这种情况下，您可以简单地使用Type Assertion

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

如何使用打字稿绑定Vue过滤器？

4 个答案: