IT技术 - 使用typescript对组件子项进行类型检查 - 吾爱随笔录

使用typescript对组件子项进行类型检查

IT技术 reactjs typescript tsx

2021-04-23 06:24:57

这是场景：

我有一个自定义组件：

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 />或其他类型作为子级放置，我希望typescript可以抛出错误<SuperComponent>

似乎typescript只检查子项是否应该具有 ReactElement 的类型，但 ts 不检查该子项（即 subPropsType1）的props的形状，也就是说，如果我放置一个字符串或数字作为 SuperComponent 的子项, ts 会抱怨类型要求不满足，但是如果我在这里放置任何 jsx 标记（将转换为 ReactElement），ts 将保持沉默

任何的想法？如果需要在此处发布任何配置，请随时询问

非常感谢任何想法和解决方案

2个回答

从 TypeScript 3.1 开始，所有 JSX 元素都被硬编码为具有JSX.Element类型，因此无法接受某些 JSX 元素而不接受其他元素。如果您想要这种检查，您将不得不放弃 JSX 语法，定义您自己的元素工厂函数，该函数React.createElement为不同的组件类型包装但返回不同的元素类型，并手动编写对该工厂函数的调用。

有一个开放的建议，它可能会在 TypeScript 3.2（将于 2018 年 11 月下旬发布）中实施，让 TypeScript 根据给定组件类型的工厂函数的实际返回类型为 JSX 元素分配类型。如果实现了，您将能够定义自己的工厂函数，该函数React.createElement使用jsxFactory编译器选项进行包装和指定，并且您将获得额外的类型信息。或者@types/react甚至可能会改变以React.createElement提供更丰富的类型信息，如果这样做不会对不关心功能的项目造成有害后果；我们将不得不拭目以待。

我可能会声明SuperPropsType.children为：

children: React.ReactElement<SubPropsType1> | React.ReactElement<SubPropsType1>[];

考虑同时拥有一个孩子和多个孩子的可能性。

无论如何，正如已经指出的那样，这不会按预期工作。

你可以做的是声明一个props，比方说subComponentProps: SubPropsType1[]，传递创建这些SubComponent1s所需的props，而不是它们的 JSX，并将它们呈现在里面SuperComponent：

interface SuperPropsType {
  children?: never;
  subComponentProps?: SubPropsType1[];
}

...

const SuperComponent: React.FC<SuperPropsType> = ({ subComponentProps }) => {
  return (
    ...

    { subComponentProps.map(props => <SubComponent1 key={ ... } { ...props } />) }

    ...
  );
};

其它你可能感兴趣的问题

上一篇使用express和es6渲染react和jsx服务端下一篇输入字段失去对每种字符类型的关注 - react