I'm working on an Angular front-end application that sends requests to Wordpress REST API and receives responses from it in the form of Wordpress post data. What I'm expecting to be able to do is create an interface to type the response and then display the posts in the template.
I stumbled upon an issue/oversight when I tried to create the interface file. The JSON response from the server looks like this:
[
{
"id": 1,
"date": "2021-08-04T22:24:09",
"date_gmt": "2021-08-04T19:24:09",
"guid": {
"rendered": "http://localhost/wordpress/?p=1"
},
"modified": "2021-08-04T22:24:09",
"modified_gmt": "2021-08-04T19:24:09",
"slug": "hellow-world",
"status": "publish",
"type": "post",
"link": "http://localhost/wordpress/2021/08/04/hello-world/",
"title": {
"rendered": "Hello world!"
},
"content": {
"rendered": "\n<p>Welcome to Wordpress!</p>\n",
"protected": false
},
"excerpt": {
"rendered": "<p>Welcome to Wordpress!</p>\n",
"protected": false
},
"author": 1,
"featured_media": 0,
"comment_status": "open",
"ping_status": "open",
"sticky": false,
"template": "",
"format": "standard",
"meta": [],
"categories": [
1
],
"tags": [],
"_links": {
"self": [
{
"href": "http://localhost/wordpress/wp-json/wp/v2/posts/1"
}
],
"collection": [
{
"href": "http://localhost/wordpress/wp-json/wp/v2/posts"
}
],
"about": [
{
"href": "http://localhost/wordpress/wp-json/wp/v2/types/post"
}
],
"author": [
{
"embeddable": true,
"href": "http://localhost/wordpress/wp-json/wp/v2/users/1"
}
],
"replies": [
{
"embeddable": true,
"href": "http://localhost/wordpress/wp-json/wp/v2/comments?post=1"
}
],
"version-history": [
{
"count": 0,
"href": "http://localhost/wordpress/wp-json/wp/v2/posts/1/revisions"
}
],
"wp:attachment": [
{
"href": "http://localhost/wordpress/wp-json/wp/v2/media?parent=1"
}
],
"wp:term": [
{
"taxonomy": "category",
"embeddable": true,
"href": "http://localhost/wordpress/wp-json/wp/v2/categories?post=1"
},
{
"taxonomy": "post_tag",
"embeddable": true,
"href": "http://localhost/wordpress/wp-json/wp/v2/tags?post=1"
}
],
"curies": [
{
"name": "wp",
"href": "https://api.w.org/{rel}",
"templated": true
}
]
}
}
]
And my interface so far looks like this:
export interface Question {
id: number;
date: string;
date_gmt: string;
guid: {
rendered: string
};
modified: string;
modified_gmt: string;
slug: string;
status: string;
type: string;
link: string;
title: {
rendered: string;
};
content: {
rendered: string;
protected: boolean;
};
excerpt: {
rendered: string;
protected: boolean;
};
author: number;
featured_media: string;
comment_status: string;
ping_status: string;
sticky: boolean;
template: string;
format: string;
meta: [string];
categories: [string];
tags: [string];
_links: {
self: [
{
href: string;
}
];
collection: [
{
href: string;
}
];
about: [
{
href: string;
}
];
author: [
{
embeddable: boolean;
href: string;
}
];
replies: [
{
embeddable: boolean;
href: string;
}
];
version-history: [
{
count: number;
href: string;
}
];
wp:attachment: [
{
href: string;
}
];
wp:term: [
{
taxonomy: string;
embeddable: boolean;
href: string;
},
{
taxonomy: string;
embeddable: boolean;
href: string;
}
];
curies: [
{
name: string;
href: string;
templated: boolean;
}
]
}
}
The error message I'm getting on the interface file is
The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
This error happens on the line that contain the properties version-history, wp:attachment and wp:term. If I clean up the interface file so that those would read (for example) version_history or versionhistory then the error message disappears.
It would appear that TypeScript does not recognize the - and : characters in interface property names. What gives?