如何覆盖默认类型？答案

【问题标题】：How can I override default typings?如何覆盖默认类型？
【发布时间】：2019-05-09 14:10:18
【问题描述】：

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

import { HTMLAttributes } from 'react';

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

我收到以下错误：

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

后续的属性声明必须具有相同的类型。属性 'alt' 必须是 'string | undefined'，但这里有类型'string'。

有没有办法表明我正在尝试覆盖，而不是扩展？还是有更好的方法来解决这个问题？

【问题讨论】：

因为这对于<img> 来说不是自然行为，您可能需要一个自定义的Img 包装器组件来强制执行您需要的道具。另见stackoverflow.com/questions/44675647/…。我可能会忘记一些事情，但似乎没有什么好办法。

标签： reactjs typescript

【解决方案1】：

选项 1：包装器组件

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

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】：

我想这是不可能的，因为 Typescript 认为你的类型和 node_modules 中的类型之间没有区别（分层）。

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

import { ImgHTMLAttributes } from 'react';

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

附：但是，我不知道这是否适合您的特殊情况（我对 React 不够熟悉）。

【讨论】：

恐怕你是对的。这似乎是我在搜索时不断寻找的答案。这并不能完全解决我的问题，因为 JSX img 标签会自动输入为 ImgHTMLAttributes 。我希望不必创建包装器。如果这不能通过声明合并来解决，我可能可以用 tslint 解决这个问题。
@drewwyatt 对此我很抱歉。 tslint 有什么想法？我的解决方法是编写一个小节点实用程序来运行（在 CI 管道中）并检查所有 <img> 标记是否具有 alt 属性。似乎不太难。
tslint 也会这样做。然后您将获得 CI 支持（如果 linting 失败）和 IDE 警告/错误。您还可以从 AST 级别的解析中受益，因此您不只是比较字符串。
@drewwyatt 但是 tslint 将如何做到这一点？不是仅用于样式检查吗？顺便说一句，我有一个想法，但它有点骇人听闻（并且不知道它是否会起作用）。 exclude 在 tsconfig 中使用 ImgHTMLAttributes 类型的文件，并将其复制到您的项目中并进行适当的修改。