使用TypeScript在Vue 3中创建全局筛选器

我遵循这一点，但它的内容已经过时，所以我不能遵循作者创建全局过滤器所遵循的相同步骤

另外，它看起来像Vue 3文档中的

我在这里尝试做的是相当简单的，它只需要将价格作为一个数字，并将其作为字符串美元价格返回，例如：获取

100

并返回

$100

这对我不管用。 我的

main.ts

如下所示：

import { createApp } from "vue";
import { Vue } from 'vue-class-component';
import { viewDepthKey } from "vue-router";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.filter('price', function(input: number){
  if(isNaN(input)){
    return "-";
  }
  return '$' + input.toFixed(2);
})

createApp(App)
  .use(store)
  .use(router)
  .mount("#app1");

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { IProductInventory } from "@/types/Product";
import format from "@/helpers/format";

@Options({
    name: "Inventory",
    components: {}
})
export default class Inventory extends Vue{
    inventory:IProductInventory[] = //Coming from an api call
}
</script>

这就是错误：

src/main.ts:8:5
TS2339: Property 'filter' does not exist on type 'VueConstructor<Vue<unknown, {}, {}>>'.
     6 | import store from "./store";
     7 |
  >  8 | Vue.filter('price', function(input: number){
       |     ^^^^^^
     9 |   if(isNaN(input)){
    10 |     return "-";
    11 |   }

有没有办法让它工作，或者我应该使用一些

计算属性

编辑后续问题：

我的班级是这样的：

import { createApp } from "vue";
import { Vue } from 'vue-class-component';
import { viewDepthKey } from "vue-router";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.filter('price', function(input: number){
  if(isNaN(input)){
    return "-";
  }
  return '$' + input.toFixed(2);
})

createApp(App)
  .use(store)
  .use(router)
  .mount("#app1");

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { IProductInventory } from "@/types/Product";
import format from "@/helpers/format";

@Options({
    name: "Inventory",
    components: {}
})
export default class Inventory extends Vue{
    inventory:IProductInventory[] = //Coming from an api call
}
</script>

从“Vue类组件”导入{Options，Vue}；
从“@/types/Product”导入{IPProductInventory}；
从“@/helpers/format”导入格式；
@选择权({
名称：“库存”，
组件：{}
})
导出默认类资源清册扩展Vue{
清单：IPProductInventory[]=//来自api调用
}

---

谢谢大家!

在Vue 3中删除了过滤器选项，因此您可以使用一个计算属性，该属性返回一个带参数的函数：

    get formatPrice(): string{
        return (price)=>{
             if(isNaN(input)){
               return "-"
             }else{
              //return other value
              }
      }
   }

除了

{{item.product.price | price}}

之外，您将拥有：

{{ formatPrice(item.product.price) }}

---

在Vue 3中删除了过滤器选项，因此您可以使用返回带有参数的函数的计算属性：

    get formatPrice(): string{
        return (price)=>{
             if(isNaN(input)){
               return "-"
             }else{
              //return other value
              }
      }
   }

除了

{{item.product.price | price}}

之外，您将拥有：

{{ formatPrice(item.product.price) }}

---

在

/helpers/filters.ts

const filters = {
  price(input: number) {
    if (isNaN(input)) {
      return "-";
    }
    return '$' + input.toFixed(2);
  }
}
export default filters;

在创建应用程序的位置进行全局安装

import filters from './helpers/filters'

const app = createApp(App);
app.config.globalProperties.$filters = filters
app.mount('#app')

那就做吧

{{ $filters.price( price ) }}

---

在

/helpers/filters.ts

const filters = {
  price(input: number) {
    if (isNaN(input)) {
      return "-";
    }
    return '$' + input.toFixed(2);
  }
}
export default filters;

在创建应用程序的位置进行全局安装

import filters from './helpers/filters'

const app = createApp(App);
app.config.globalProperties.$filters = filters
app.mount('#app')

那就做吧

{{ $filters.price( price ) }}

---

你可以创建一个格式函数库，只需使用

{{format.price（item.product.price）}}

你可以创建一个格式函数库，只需使用

{format.price（item.product.price）}}

我来自一种像C#这样的语言，它的一切都非常直观，工作起来非常漂亮，看到这个JS/TS世界是多么的粗糙，我感到很惊讶！：）我现在收到此警告：

[Vue warn]：属性“format”在渲染期间被访问，但未在实例上定义。Intellisense还显示：
声明了“格式”，但从未读取其值。Vetur（6133）
在这一行
从“@/helpers/format”导入格式。刚刚编辑了我的问题来展示我的班级是怎样的。你能帮我一下吗？我仍然无法使它工作。更新，也应该扩展到更多的过滤器，如果你想他们谢谢你的答复，但它仍然不工作。我当前的设置是这样的：
createApp（App）.use（store）.use（router.mount（“#app1”）但我编辑了它，使它看起来像你的，但它仍然不起作用。如果你能帮我快速浏览一下我的代码，请这样做，我将不胜感激。就在这里：我来自像C这样的语言，那里的一切都是如此直观和完美，我很惊讶地看到这个JS/TS世界是多么的粗糙！：）我现在收到此警告：
[Vue warn]：属性“format”在渲染期间被访问，但未在实例上定义。Intellisense还显示：
声明了“格式”，但从未读取其值。Vetur（6133）
在这一行
从“@/helpers/format”导入格式。刚刚编辑了我的问题来展示我的班级是怎样的。你能帮我一下吗？我仍然无法使它工作。更新，也应该扩展到更多的过滤器，如果你想他们谢谢你的答复，但它仍然不工作。我当前的设置是这样的：
createApp（App）.use（store）.use（router.mount（“#app1”）但我编辑了它，使它看起来像你的，但它仍然不起作用。如果你能帮我快速浏览一下我的代码，请这样做，我将不胜感激。在这里：非常感谢您的回复。如果我还想从其他组件访问它，如何使它在全球范围内可用？另外，我在第
return（price）=>{
行上得到两个错误：1.
Type'（price:any）=>string'不能分配给Type'string'。Vetur（2322）
和2.
参数'price'隐式地有一个'any'类型。Vetur（7006）
。非常感谢您的回复。如果我也想从其他组件访问它，如何使它在全球范围内可用？另外，我在第
return（price）=>{
行上遇到两个错误，分别是：1。
Type'（price:any）=>string'不能分配给Type'string'。Vetur（2322）
和2.
参数“price”隐式具有“any”类型。Vetur（7006）
。