My journey with the Typescript language has just begun, and I am excited to dive deeper into it. Currently, I am working on a SPA-Wordpress project as a hobby using Vite (VueJS). However, I am facing some challenges with the syntax when transitioning 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,
page: 1,
_embed: true,
},
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>
An issue arises with simple dot notation in Typescript:
Property 'excerpt' does not exist on type 'never'.ts(2339)
If brackets and parentheses are used, another error is triggered:
<p>{{ page['excerpt']['rendered']['replace'](/(<([^>]+)>)/ig, "" ) }}</p>
This expression is not callable. Type 'never' has no call signatures.ts(2349)
Adopting a different structure resolves the Typescript error but results in an empty div:
<p>{{ page['excerpt']['rendered']['replace(/(<([^>]+)>)/ig, "")'] }}</p>
The <h1> tag functions flawlessly with brackets, while dot notation triggers similar errors as with <p>.
<h1>{{ page['title']['rendered'] }}</h1>
I would greatly appreciate some guidance on resolving this issue. Thank you for your assistance!
Attempts to enclose the replace function within square brackets and quotation marks have been unsuccessful.