reactjs - 类型 'amp-img' 上不存在属性 'JSX.IntrinsicElements'

Question

我有一个运行 Express 服务器的 Node 项目，当在 URL 中查询带有 /amp 的新闻文章时，返回该文章的 AMP 版本。

应客户要求，这些 AMP 文章使用 React 组件构建，最终呈现为静态标记。

这是组件之一:

import * as React from 'react';
import { Article_modulesByArticleId_edges_node } from '../../data/__generated__/Article';

// GraphQL auto generated type for the data that is sent to this component 
type Props = {
  module: Article_modulesByArticleId_edges_node;
};

export default (props: Props) => {
  const image = props.module.image;
  if (!image || !image.url || !image.title || !image.copyright) {
    return "";
  }

  return <amp-img alt={image.title} src={image.url} ... />
};

问题是什么？

该项目还使用了我不太熟悉的 TypeScript。

当我尝试使用自定义 AMP 元素时，TypeScript 抛出此错误消息:

[ts] Property 'amp-img' does not exist on type 'JSX.IntrinsicElements'.

我没能找到任何定义了 AMP 类型的节点包，总体而言，关于 TypeScript 和 AMP 的讨论不多。

有人有什么建议吗？

我必须为 AMP 元素编写自己的声明吗？

Answer 1

所以在AMP元素前面写声明，还不错。共有三个选项:

// Any element you create will be accepted
declare namespace JSX {
	interface IntrinsicElements {
		[elemName: string]: any;
	}
}

// The elements you list here will be accepted, attributes don't matter
declare namespace JSX {
	interface IntrinsicElements {
		'amp-img': any;
	}
}

// The elements you list here will be accepted, and only with the attributes that you include here
declare namespace JSX {
	interface AmpImg {
		alt?: string;
		src?: string;
		width?: string;
		height?: string;
		layout?: string;
	}
	interface IntrinsicElements {
		'amp-img': AmpImg;
	}
}

像这样手动执行的唯一缺点是，如果 Amp 规范发生变化，您将不得不自行更新。所以让我知道目前是否有其他选择。

无论如何，希望这对某人有所帮助!