Использование веб-компонентов в реаги и машинописи - PullRequest
Новая
       31

Использование веб-компонентов в реаги и машинописи

0 голосов
/ 03 апреля 2020

Я использую пользовательские элементы или веб-компоненты внутри Preact . Проблема в том, что Typescript жалуется на то, что элементы не определены в JSX.IntrinsicElements - в этом случае элемент check-box: 

<div className={styles.option}>
    <check-box checked={this.prefersDarkTheme} ref={this.svgOptions.darkTheme}/>
    <p>Dark theme</p>
</div>

Сообщение об ошибке (путь не указан): 

ERROR in MyComponent.tsx
[tsl] ERROR in MyComponent.tsx(50,29)
      TS2339: Property 'check-box' does not exist on type 'JSX.IntrinsicElements'.

Я столкнулся со следующими, к сожалению, не работающими, возможными решениями:

  1. { ссылка } - Это ответ на вопрос не совсем понятен, но он охватил мою проблему

Я попытался добавить следующее в мой typings.d.ts файл: 

import * as Preact from 'preact';

declare global {
    namespace JSX {
        interface IntrinsicElements {
            'check-box': any; // The 'any' just for testing purposes
        }
    }
}

Моя среда IDE затеняет часть импорта и IntrinsicElements, что означает, что она не используется (?!) и это все равно не сработало. Я все еще получаю то же сообщение об ошибке.

{ ссылка } - Также для реакции я попытался «преобразовать» его в preact и получил те же результаты, что и для 1.

Я даже нашел файл , поддерживаемый google в проекте squoo sh, где они сделали следующее, чтобы «заполонить» поддержку:

В той же папке, что и компонент, файл missing-types.d.ts со следующим содержимым, в основном те же настройки, что и у меня, но с файлом index.ts вместо check-bock.ts, и они используют более старую версию TS v3.5.3 : 

declare namespace JSX {
  interface IntrinsicElements {
    'range-input': HTMLAttributes;
  }
}

Я предполагаю, что их сборка не завершилась, так как она работает и как правильно определить пользовательские элементы для использования их в компонентах preact / реагировать?

Я сейчас использую typescript@v3.8.3 и preact@10.3.4.

1 Ответ

0 голосов
/ 04 апреля 2020

Хорошо, мне удалось решить это с помощью расширения модуля : 

declare module 'preact/src/jsx' {
    namespace JSXInternal {

        // We're extending the IntrinsicElements interface which holds a kv-list of
        // available html-tags.
        interface IntrinsicElements {
            'check-box': unknown;
        }
    }
}

Используя интерфейс HTMLAttributes, мы можем сообщить JSX, какие атрибуты доступны для нашего пользовательского элемента: 

// Your .ts file, e.g. index.ts
declare module 'preact/src/jsx' {
    namespace JSXInternal {
        import HTMLAttributes = JSXInternal.HTMLAttributes;

        interface IntrinsicElements {
            'check-box': HTMLAttributes<CheckBoxElement>;
        }
    }
}

// This interface describes our custom element, holding all its
// available attributes. This should be placed within a .d.ts file.
declare interface CheckBoxElement extends HTMLElement {
    checked: boolean;
}
...