How can I write a Type Declaration for a JSX attribute from Google AMP that uses square brackets?

Question

To use AMP's binding feature , you have to use special attributes that wrap an element's property with square brackets and links it to an expression. Here is an example from AMP:

<p [text]="'Hello ' + foo">Hello World</p>

<button on="tap:AMP.setState({foo: 'amp-bind'})">

The problem is, there is currently no @types/amp and Typescript is throwing an error at the first [ in my JSX saying [ts] identifier expected . Messing around with it I have also had [ts] Left side of comma operator is unused and has no side effects.

This is most likely solvable by the right Typescript type declaration. Any suggestions?

Answer 1

According amp-bind component document:

Bracket characters [ and ] in attribute names can be problematic when writing XML (eg XHTML, JSX) or writing attributes via DOM APIs. In these cases, use the alternative syntax data-amp-bind-x="foo" instead of [x]="foo". For example:

<p data-amp-bind-text="'Hello ' + foo">Hello World</p>