Typescript error when using brackets and replace function in VueJS

Question

I'm quite new to typescript language, but eager to learn it.

I have a SPA-Wordpress project as a hobby on my hands, I'm coding in Vite (VueJS), and I can't figure out the right syntax form to go from dot notation to bracket.

<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 drops the following error on the simple dot notation:

Property 'excerpt' does not exist on type 'never'.ts(2339)

And it drops the following error If I use the brackets+parentheses:

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

This expression is not callable. Type 'never' has no call signatures.ts(2349)

and If I do it like the following, then typescript is fine with it, but the div doesnt show anything:

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

The <h1> with the brackets, works perfectly, no errors from TS and it shows correctly on the website. Yet, If I were to use dot notation on the h1, it would throw the same error as with the <p> + dot notation.

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

Could you help me with this? Thanks in advance!

Tried just simply putting the replace function in square brackets with quotation marks, didn't work.

Answer 1

Seems like the problem is not with Typescript, the problem lies in how I declared within the <script> the pages: [] --> it needs a declaration for its type also.

So, if I use pages: [] as any[], , or pages:[] as any, it certainly works, meaning, the intended excerpt is showing correctly without the html tags, AND Typescript doesn't show any error.

Of course, further declarations would be better than just the any, but I haven't figured out exactly what and how.