How should Vue filters be bound using typescript?

Question

How should Vue filters be bound using TypeScript? It is fairly straightforward with pure js, but I'm running into issue converting it to TypeScript.

The code and compile error are as follows:

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) {
  ....
}

Compile Error

error TS7017: Element implicitly has an 'any' type because type 'typeof ...' has no index signature.

Answer 1

I register global filters like this:

Inside 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
    })
  }
}

Then inside main.ts:

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

Answer 2

For adding the filter globally, I did something as following

// in customFilter.ts file

import Vue from 'vue';

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

and include this in main.ts

import testFilter from '@/customFilter.ts'

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