Question

我正在研究可访问性，并认为“我只是将alt设置为项目中的必需属性。”我的目标是让我的react应用程序中的所有img标签抱怨是否没有提供alt属性。因此，我创建了一个.d.ts文件，在其中添加了以下内容：

import { HTMLAttributes } from 'react';

declare module 'react' {
  export interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
    alt: string;
  }
}

我遇到这些错误：

所有'alt'声明必须具有相同的修饰符。

后续属性声明必须具有相同的类型。属性“ alt”必须为“ string”类型。未定义”，但此处的类型为“字符串”。

是否有一种方法可以表明我正在尝试覆盖，而不是 extend ？还是有更好的方法来解决这个问题？

Answer 1

我想这是不可能的，因为Typescript在层次结构上看不到您的类型与node_modules中的类型之间的区别。

所以我通常会定义自己的类型，一切正常：

import { ImgHTMLAttributes } from 'react';

export interface IMyImgHTMLAttributes extends ImgHTMLAttributes<any> {
  alt: string;
}

P.S。但是，我不知道这是否适合您的特殊情况（我对React不太了解）。

Answer 2

选项 1：包装组件

您可以编写一个简单的包装器组件，使 alt 成为必需属性，而不是直接使用 <img/> 元素：

function Img({src, alt}: {src: string, alt: string}) {
  return <img src={src} alt={alt} />;
}

选项 2：Linter

当您创建没有 alt 属性的 <img/> 时，您还可以使用 linter 来抛出警告或错误。如果您使用的是 eslint，我发现了一个名为 jsx-eslint / eslint-plugin-jsx-a11y 的插件，它定义了 alt-text 规则。

如何覆盖默认类型？

2 个答案:

选项 1：包装组件

选项 2：Linter