Машинопись и Google AMP?Свойство 'amp-img' не существует для типа 'JSX.IntrinsicElements' - PullRequest
Новая
       7

Машинопись и Google AMP?Свойство 'amp-img' не существует для типа 'JSX.IntrinsicElements'

0 голосов
/ 29 мая 2018

У меня есть проект узла, работающий на экспресс-сервере, который при запросе новостной статьи с / amp в URL возвращает версию этой статьи 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} ... />
};

Проблема?В проекте также используется машинопись, с которой я не слишком знаком.

Когда я пытаюсь использовать пользовательский элемент AMP-HTML, машинопись выдает следующее сообщение об ошибке: 

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

Мне не удалось найти пакеты узлов с определенными типами AMP,и в целом не много дискуссий о Typescript и AMP.У кого-нибудь есть предложения?Нужно ли писать собственные объявления для элементов AMP?

1 Ответ

0 голосов
/ 30 мая 2018

Так что в написании объявлений фронта элементов 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;
	}
}

Единственный недостаток, когда вы делаете это вручную, это то, что вам придется обновлять его самостоятельно, если изменяется спецификация усилителя.Итак, дайте мне знать, если в настоящее время есть другой вариант.

Независимо, надеюсь, это кому-то поможет!

...