Typescript 和 React：如何从父组件动态推断类型？

Question

I have a generic component that I use to build specific tables along the code. Let's call it GenericTable . Its workflow looks like this:

Table Rendering Workflow

In order to simplify the question, let's say the GenericTable has only two props: columns and rows .

export const Page1 = () => {
return (
    <GenericTable
      columns={page1Columns}
      rows={page1Rows}
    />
  );
};

export const Page2 = () => {
    return (
        <GenericTable
          columns={page2Columns}
          rows={page2Rows}
        />
      );
    };

Let's say that the types of the columns and rows may vary from page to page. For instance, Page1 may have a table only showing numbers while Page2 may have a more sophisticated table with strings, numbers and even other components. This way, the properties and types of the GenericTable should look something like this:

type GenericTableProps<ColumnType, RowType> {
    columns: ColumnType;
    rows: RowType;
  }
    
  export const GenericTable = <
    ColumnType extends Page1ColumnType | Page2ColumnType,
    RowType extends Page1RowType | Page2RowType
  >(
    props: GenericProps<ColumnType, RowType>
  ) => {
    // build the table here using the columns and rows props
  }

The problem here is, since I may have more than just twos pages calling the GenericTable , I do not want to hard code the types such as Page1ColumnType , Page1RowType and so on. How can I dynamically infer the columns and rows type from the page that is passing it?

For example, in case a Page3 calls in the GenericTable , how can it infer that the ColumnType will extend the Page3ColumnType without hardcoding it.

Answer 1

COnsider this example:

type Page1ColumnType = {
    tag: 'Page1ColumnType'
}
type Page2ColumnType = {
    tag: 'Page2ColumnType'
}

type Page1RowType = {
    tag: 'Page1RowType'
}

type Page2RowType = {
    tag: 'Page2RowType'
}

type GenericTableProps<ColumnType, RowType> = {
    columns: ColumnType;
    rows: RowType;
}

export const GenericTable = <
    ColumnType extends Page1ColumnType | Page2ColumnType,
    RowType extends Page1RowType | Page2RowType
>(
    props: GenericTableProps<ColumnType, RowType>
) => { }

Type signature of GenericTable is unsafe, because ColumnType and RowType are not related/binded to each other. It means that this call is perfectly valid from typescript point of view:

const result = GenericTable({
    columns: {
        tag: 'Page1ColumnType'
    },
    rows: {
        tag: 'Page2RowType'
    }
})

Have you noticed that columns are Page1 and rows are Page2 . In order to bind columns and rows, you need to make it as a part of one data structure:

type GenericTableProps<ColumnType, RowType> = {
    columns: ColumnType;
    rows: RowType;
}

type DataStructure =
    | GenericTableProps<Page1ColumnType, Page1RowType>
    | GenericTableProps<Page2ColumnType, Page2RowType>

export const GenericTable = (
    props: DataStructure
) => { }

// ERROR
GenericTable({
    columns: {
        tag: 'Page1ColumnType'
    },
    rows: {
        tag: 'Page2RowType' // wrong value
    }
})

// OK
GenericTable({
    columns: {
        tag: 'Page1ColumnType'
    },
    rows: {
        tag: 'Page1RowType' // ok
    }
})

PLayground

If you don't want to hardcode all allowed states up front, you still need to some how map types. If you will provide me with expected interface of row and column I try to write generic function, because I don't know the shape of row and column and how they are related between each other