TypeScript - 使用可选属性定义数据 model

Question

I'm pretty new to TypeScript. I would like to have a Table, that can have a group or rows property defined.

Already added the interfaces for the data model:

type GroupModel = {
  id: UUID
  name: string
  rows: RowModel[]
}

interface Table {
  readonly header: HeaderModel[]
  readonly pageIndex?: number
  readonly pageSize?: number
}

interface TableWithGroups {
  readonly groups: GroupModel[]
}

interface TableWithRows {
  readonly rows: RowModel[]
}


export type TableModel = Table & (TableWithRows | TableWithGroups)

but when it comes to the table component, I'm not sure how to specify that I would like to have TableWithRows in one case, and TableWithGroups in another.

I get an error when trying to spread the values from the data object, which is totally fine because TableModel might not have one of them.

const Table = ({ data }: Props) => {

const { rows, groups } = data
// Property 'rows' does not exist on type 'TableModel'
// Property 'groups' does not exist on type 'TableModel'

}

How should I specify that I want explicitly one of the table types? Is this achievable by making TableModel generic?

What's the best practice for having one of the values required?

Answer 1

You could do it like this - with a union:

interface TableWithOption {
  optionType: GroupModel[] | RowModel[]
}