Question

我有一个运行快速服务器的节点项目，当在网址中查询带有/ amp的新闻文章时，会返回该文章的放大器版本。

由于客户端的请求，这些放大器文章是使用React组件构建的，这些组件最终呈现给静态标记。以下是其中一个组成部分：

＆＃13;

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} ... />
};

＆＃13;

问题？该项目还使用了打字稿，我对此并不太熟悉。

当我尝试使用自定义AMP-HTML元素时，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规格发生变化，您必须自己更新。如果目前有其他选择，请告诉我。

无论如何，希望这有助于某人！

打字稿和谷歌AMP？物业＆amp; img＆＃39;类型＆＃39; JSX.IntrinsicElements＆＃39;

1 个答案: