如何在Astro/TypeScript中允许标签使用非标准属性？

嘿，我刚好碰到过类似的问题！在Astro搭配TypeScript开发时，像Utterances这类工具用到的非标准HTML属性确实会触发类型检查错误，不过有两个实用的解决办法：

• 方法一：使用Astro的is:inline指令
  Astro提供了is:inline指令，给script标签加上这个属性后，Astro就不会对它做类型校验了，完全保留原始的标签写法。修改后的代码大概是这样：

  <script is:inline
      src="https://utteranc.es/client.js"
      repo="[你的仓库地址]"
      issue-term="pathname"
      theme="github-light"
      crossorigin="anonymous"
      async
  ></script>
  

  这个方法最简单直接，适合快速解决单个标签的问题。

• 方法二：扩展TypeScript的HTML类型定义
  如果你想让整个项目都支持这些非标准属性，可以在项目根目录下创建一个类型声明文件（比如types.d.ts或者env.d.ts），然后扩展HTMLScriptElement的接口，把Utterances需要的属性加进去：

  declare global {
      interface HTMLScriptElement {
          repo?: string;
          "issue-term"?: string;
          theme?: string;
          crossorigin?: string;
          async?: boolean;
      }
  }
  
  export {};
  

  保存文件后，TypeScript就会识别这些新增的属性，不会再报错了。这个方法更适合需要在多个地方使用这类非标准属性的场景。

备注：内容来源于stack exchange，提问作者Joe Clay