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

Posted 2023-02-22

【中文标题】Vue过滤器应该如何使用typescript绑定？

【英文标题】：How should Vue filters be bound using 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 ...”没有索引签名。

【参考方案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 中？我遇到过类型问题：***.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)