Реагирующая компонента детей проверка типов с машинописью - PullRequest
Новая
       13

Реагирующая компонента детей проверка типов с машинописью

0 голосов
/ 10 октября 2018

Вот сценарий:

У меня есть пользовательский компонент: 

class MyComponent extends React.Component {
  render () {
    return (
      <SuperComponent>
        <SubComponent1 />  // <- valid child
      </SuperComponent>
    )
}

class MyComponent extends React.Component {
  render () {
    return (
      <SuperComponent>
        <SubComponent2 />  // <- No! It's not right shape
      </SuperComponent>
    )
}

, а ссылочные SuperComponent и SubComponent1: 

interface superPropsType = {
  children: ReactElement<subPropsType1>
}
class SuperComponent extends React.Component<superPropsType> { ... }


interface subPropsType1 = {
  name: string
}
class SubComponent1 extends React.Component<subPropsType1> { ... }


interface subPropsType2 = {
  title: string
}
class SubComponent2 extends React.Component<subPropsType2> { ... }

Я хочу, чтобы SubComponent1 былбыть единственным допустимым дочерним элементом SuperComponent, то есть, я хотел бы, чтобы машинопись могла выдавать ошибку, если я помещаю <SubComponent2 /> или другие типы как дочерний элемент <SuperComponent>

Кажется, что только машинопись проверяет, что дочерний элемент долженимеют тип ReactElement, но ts не проверяет форму реквизитов этого дочернего элемента (который является subPropsType1), то есть, если я помещаю строку или число как дочерний элемент SuperComponent, ts будет жаловаться на то, что требование типа не соответствует, но если я размещу здесь какой-либо тег jsx (который будет перенесен в ReactElement), ts сохранит молчание

Есть идеи?И если какие-либо конфиги необходимы для публикации здесь, пожалуйста, не стесняйтесь спрашивать

Действительно ценю любую идею и решение

1 Ответ

0 голосов
/ 10 октября 2018

Начиная с TypeScript 3.1, все элементы JSX жестко запрограммированы, чтобы иметь тип JSX.Element, поэтому нет способа принять некоторые элементы JSX, а не другие.Если вам нужна такая проверка, вам придется отказаться от синтаксиса JSX, определить собственную функцию фабрики элементов, которая переносит React.createElement, но возвращает разные типы элементов для разных типов компонентов, и написать вызовы этой фабричной функции вручную.

Существует открытое предложение , которое может быть реализовано сразу после TypeScript 3.2 (будет выпущено в конце ноября 2018 года), чтобы TypeScript мог назначать типы элементам JSX на основе фактического возвращаемого типазаводская функция для данного типа компонента.Если это будет реализовано, вы сможете определить свою собственную фабричную функцию, которая обернет React.createElement, и указать ее с помощью опции компилятора jsxFactory, и вы получите дополнительную информацию о типе.Или, может быть, @types/react изменится так, что React.createElement предоставит более подробную информацию о типе, если это можно сделать без вредных последствий для проектов, которые не заботятся о функциональности;нам придется подождать и посмотреть.

...