Angular create interface for Wordpress REST API posts data (unrecognized characters in interface property names)

Viewed 132

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?

1 Answers

You need to wrap your keys in quotes to support such characters, like this:

"version-history": [
        {
            count: number;
            href: string;
        }
    ];
"wp:attachment": [
        {
            href: string;
        }
    ];
"wp:term": [
        {
            taxonomy: string;
            embeddable: boolean;
            href: string;
        },
    ];

Take a look at this post, which partly answers your question.

Related