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?
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>