Наследовать универсальное значение из свойства объекта в TypeScript

Question

Наследовать универсальное значение из свойства объекта в TypeScript

«Если вы хотите, чтобы корневой каталог вашего модуля был функцией (например, конструктором), или если вы хотите экспортировать полный объект в одно задание вместо того, чтобы создавать его по одному свойству за раз, назначьте его модулю. экспорт вместо экспорта ». - http://nodejs.org/api/modules.html

1

typescript typescript-typings

задан Alexandre Hitchcox 16 January 2019 в 13:22

2 ответа

Другие вопросы по тегам:

typescript typescript-typings

Похожие вопросы:

score 0 · Answer 1

Вы должны сообщить TypeScript, какова связь между внутренним элементом и вашим пользовательским реквизитом.

interface OverriddenProps extends JSX.IntrinsicElements {
  a: AnchorProps;
  p: ParagraphProps;
}

Создайте свой Overrides сопоставленный тип:

type Overrides = {
  [Tag in keyof JSX.IntrinsicElements]?: {
    component: React.ComponentType<OverriddenProps[Tag]>;
    props: OverriddenProps[Tag]
  }
}

Вывод типа теперь будет работать правильно.

score 0 · Answer 2

Нет, вы не можете наследовать тип Props от типа component. Это просто невозможно с TypeScript

Вы также не можете сделать это напрямую, если используете стандартные интерфейсы для AnchorProps и ParagraphProps вместо стандартных React.AnchorHTMLAttributes<HTMLAnchorElement> и React.HTMLAttributes<HTMLParagraphElement> [ 1110]

Однако, если ваш компонент Anchor использует те же параметры, что и стандарт HTMLAnchorElement, можно достичь желаемого результата всего за несколько строк.

declare const Anchor: React.ComponentType<React.AnchorHTMLAttributes<HTMLAnchorElement>>
declare const Paragraph: React.ComponentType<React.HTMLAttributes<HTMLElement>>

type Overrides = {
  [tag in keyof JSX.IntrinsicElements]?: {
    component: React.ComponentType<JSX.IntrinsicElements[tag]>,
    props?: JSX.IntrinsicElements[tag]
  }
}

const overrides: Overrides = {
  a: {
    component: Anchor,
    props: {
      href: 'str', // ok
      broken: true // error, as expected
    }
  },
  p: {
    component: Paragraph
  }
}