Ad

How Can I Write A Type Declaration For A JSX Attribute From Google AMP That Uses Square Brackets?

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?

Ad

Answer

According amp-bind component document:

Bracket characters [ and ] in attribute names can be problematic when writing XML (e.g. 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>
Ad
source: stackoverflow.com
Ad