typescriptjsxastrojs

How can I allow non-standard attributes on a tag in Astro/TypeScript?


I'm in the process of porting my website across to Astro - it is mostly working fine, but there is one TypeScript error that I cannot figure out a proper fix for.

My website uses Utterances for comments, which is implemented via an script tag inside my page, like so:

<script
    src="https://utteranc.es/client.js"
    repo="[ENTER REPO HERE]"
    issue-term="url"
    theme="github-light"
    crossorigin="anonymous"
    async></script>

This works fine, but it causes type checking to fail on the component, as most of those attributes are not part of the spec:

Type '{ src: string; repo: string; "issue-term": string; theme: string; crossorigin: string; async: true; }' is not assignable to type 'ScriptHTMLAttributes & AstroScriptAttributes & AstroDefineVarsAttribute'.
  Property 'repo' does not exist on type 'ScriptHTMLAttributes & AstroScriptAttributes & AstroDefineVarsAttribute'.

Utterances should really be using data- attributes here (which I think TypeScript would handle fine), but it's not been updated in several years, so I can't see it getting support for that any time soon.

Aside from disabling type checking for that line altogether with @ts-ignore, is there any way to tell TypeScript that this is okay?


Solution

  • According to this comment, the following should work:

    <script
        src="https://utteranc.es/client.js"
        data-repo="[ENTER REPO HERE]"
        data-issue-term="url"
        data-theme="github-light"
        crossorigin="anonymous"
        async>
    </script>