在VueJS中使用括号和替换函数时出现打字错误

hec6srdp  于 2023-01-05  发布在  Vue.js
关注(0)|答案(1)|浏览(147)

我对打字语言很陌生,但我渴望学习它。
我有一个SPA-Wordpress项目作为我的爱好,我用Vite(VueJS)编码,我不能找出正确的语法形式从点符号到括号。

<script lang="ts">
import axios from "axios";
import { ref } from "vue";

export default {
  data() {
    return {
      postsUrl: "https://localhost/wordpress/wp-json/wp/v2/news",
      queryOptions: {
        per_page: 6, // Only retrieve the 6 most recent blog pages.
        page: 1, // Current page of the collection.
        _embed: true, //Response should include embedded resources.
      },
      // Returned Pages in an Array
      pages: [],
      isLoading: false;        
    };
  },
  methods: {
    getPosts() {
      const isLoading = ref(true);
      axios
        .get(this.postsUrl, { params: this.queryOptions })
        .then((response) => {
          this.pages = response.data;
          console.log("Pages retrieved!");
          console.log(this.pages);
          isLoading.value = false;

        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  mounted() {
    this.getPosts();
  },
};
</script>

<template>
    <ul v-for="(page, index) in pages" :key="index">
      <h1>{{ page['title']['rendered'] }}</h1>    
      <p>{{ page.excerpt.rendered.replace(/(<([^>]+)>)/ig, "") }}</p>
  </template>

Typescript在简单点标记法上删除以下错误:
类型“never”上不存在属性“exercept”。ts(2339)
它会丢弃以下错误如果我使用方括号+圆括号

<p>{{ page['excerpt']['rendered']['replace'](/(<([^>]+)>)/ig, "" ) }}</p>

此表达式不可调用。类型“never”没有调用签名。ts(2349)
如果我像下面这样做,那么typescript就可以了,但是div不显示任何内容:

<p>{{ page['excerpt']['rendered']['replace(/(<([^>]+)>)/ig, "")']  }}</p>

带括号的<h1>工作完美,TS没有错误,它在网站上显示正确。然而,如果我在h1上使用点符号,它会引发与<p>+点符号相同的错误。

<h1>{{ page['title']['rendered'] }}</h1>

你能帮我一下吗?先谢了!
尝试只是简单地把替换函数放在方括号中,并加上引号,没有工作。

0g0grzrc

0g0grzrc1#

看起来问题不在于Typescript,问题在于我如何在<script>中声明pages: []--〉它也需要一个类型声明。
因此,如果我使用pages: [] as any[],pages:[] as any,它肯定会工作,这意味着,没有html tags,预期的excerpt也会正确显示,并且Typescript不会显示任何错误。
当然,进一步的声明会比仅仅声明any更好,但是我还没有弄清楚具体是什么以及如何声明。

相关问题