[react-table] More strict types for columns (#43714)

* [react-table] Make Columns a union type to make it stricter

* [react-table] Make the CellValue generic and allow columns with a string accessor to type it

* [react-table] Better handle non-typed columns

* [react-table] Update the Readme with a Changelog

* [react-table] Removed the unnecessary wording

* [react-table] Added the guesstimate version of types package to changelog

types/react-table/Readme.md

@@ -1,5 +1,13 @@
 # Types for react-table v7
 
+## Changelog
+
+### 2020-04-09 (@types/react-table 7.0.14, react-table 7.0.4)
+
+A number of breaking changes related to changing `Column<D>` from `interface` to `type` and making the columns types stricter overall. For more information and migration guide see [the Pull Request for these changes](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/43714).
+
+## Configuration Using Declaration Merging
+
 These types depend upon declaration merging to work well.
 
 To get started, create a file `react-table-config.d.ts` using the example further down this readme, place it in your source tree (e.g. into a types folder). This expands the default types with all of the plugin extensions currently in the type definitions.
@@ -140,7 +148,7 @@ declare module 'react-table' {
       UseRowStateState<D>,
       UseSortByState<D> {}
 
-  export interface Column<D extends object = {}>
+  export interface ColumnInterface<D extends object = {}>
     extends UseFiltersColumnOptions<D>,
       UseGlobalFiltersColumnOptions<D>,
       UseGroupByColumnOptions<D>,
@@ -153,7 +161,7 @@ declare module 'react-table' {
       UseResizeColumnsColumnProps<D>,
       UseSortByColumnProps<D> {}
 
-  export interface Cell<D extends object = {}>
+  export interface Cell<D extends object = {}, V = any>
     extends UseGroupByCellProps<D>,
       UseRowStateCellProps<D> {}
 

types/react-table/index.d.ts

@@ -6,7 +6,7 @@
 //                 Jason Clark <https://github.com/riceboyler>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 3.5
-// reflects react-table@7.0.0
+// reflects react-table@7.0.4
 
 // tslint:disable:no-empty-interface
 // no-empty-interface is disabled to allow easy extension with declaration merging
@@ -15,6 +15,8 @@
 // no-unnecessary-generics is disabled because many of these definitions are either used in a generic
 // context or the signatures are required to match for declaration merging
 
+// The changelog for the important changes is located in the Readme.md
+
 import {
     ComponentType,
     DependencyList,
@@ -51,12 +53,59 @@ export interface TableState<D extends object = {}> {
 
 export interface Hooks<D extends object = {}> extends UseTableHooks<D> {}
 
-export interface Cell<D extends object = {}> extends UseTableCellProps<D> {}
+export interface Cell<D extends object = {}, V = any> extends UseTableCellProps<D, V> {}
 
-export interface Column<D extends object = {}> extends UseTableColumnOptions<D> {}
+export interface ColumnInterface<D extends object = {}> extends UseTableColumnOptions<D> {}
+
+export interface ColumnInterfaceBasedOnValue<D extends object = {}, V = any> {
+    Cell?: Renderer<CellProps<D, V>>;
+}
+
+export interface ColumnGroupInterface<D extends object> {
+    columns: Array<Column<D>>;
+}
+
+export type ColumnGroup<D extends object = {}> =
+    & ColumnInterface<D>
+    & ColumnGroupInterface<D>
+    & (
+        | { Header: string; }
+        | ({ id: IdType<D>; } & {
+            Header: Renderer<HeaderProps<D>>;
+        })
+    )
+    // Not used, but needed for backwards compatibility
+    & { accessor?: Accessor<D>; };
+
+type ValueOf<T> = T[keyof T];
+
+// The accessors like `foo.bar` are not supported, use functions instead
+export type ColumnWithStrictAccessor<D extends object = {}> =
+    & ColumnInterface<D>
+    & ValueOf<{
+        [K in keyof D]: {
+            accessor: K;
+        } & ColumnInterfaceBasedOnValue<D, D[K]>;
+    }>;
+
+export type ColumnWithLooseAccessor<D extends object = {}> =
+    & ColumnInterface<D>
+    & ColumnInterfaceBasedOnValue<D>
+    & (
+        | { Header: string }
+        | { id: IdType<D> }
+        | { accessor: keyof D extends never ? IdType<D> : never }
+    )
+    & { accessor?: keyof D extends never ? IdType<D> | Accessor<D> : Accessor<D>; };
+
+export type Column<D extends object = {}> =
+    | ColumnGroup<D>
+    | ColumnWithLooseAccessor<D>
+    | ColumnWithStrictAccessor<D>;
 
 export interface ColumnInstance<D extends object = {}>
-    extends Omit<Column<D>, 'id' | 'columns'>,
+    extends Omit<ColumnInterface<D>, 'id'>,
+        ColumnInterfaceBasedOnValue<D>,
         UseTableColumnProps<D> {}
 
 export interface HeaderGroup<D extends object = {}> extends ColumnInstance<D>, UseTableHeaderGroupProps<D> {}
@@ -184,16 +233,13 @@ export interface UseTableHooks<D extends object> extends Record<string, any> {
     useFinalInstance: Array<(instance: TableInstance<D>) => void>;
 }
 
-export interface UseTableColumnOptions<D extends object>
-    extends Accessor<D>,
-        Partial<{
-            columns: Array<Column<D>>;
-            Header: Renderer<HeaderProps<D>>;
-            Cell: Renderer<CellProps<D>>;
-            width?: number | string;
-            minWidth?: number;
-            maxWidth?: number;
-        }> {}
+export interface UseTableColumnOptions<D extends object> {
+    id?: IdType<D>;
+    Header?: Renderer<HeaderProps<D>>;
+    width?: number | string;
+    minWidth?: number;
+    maxWidth?: number;
+}
 
 type UpdateHiddenColumns<D extends object> = (oldHidden: Array<IdType<D>>) => Array<IdType<D>>;
 
@@ -259,10 +305,10 @@ export interface UseTableRowProps<D extends object> {
     subRows: Array<Row<D>>;
 }
 
-export interface UseTableCellProps<D extends object> {
+export interface UseTableCellProps<D extends object, V = any> {
     column: ColumnInstance<D>;
     row: Row<D>;
-    value: CellValue;
+    value: CellValue<V>;
     getCellProps: (propGetter?: CellPropGetter<D>) => TableCellProps;
     render: (type: 'Cell' | string, userProps?: object) => ReactNode;
 }
@@ -271,27 +317,22 @@ export type HeaderProps<D extends object> = TableInstance<D> & {
     column: ColumnInstance<D>;
 };
 
-export type CellProps<D extends object> = TableInstance<D> & {
+export type CellProps<D extends object, V = any> = TableInstance<D> & {
     column: ColumnInstance<D>;
     row: Row<D>;
-    cell: Cell<D>;
+    cell: Cell<D, V>;
+    value: CellValue<V>;
 };
 
-// NOTE: At least one of (id | accessor | Header as string) required
-export interface Accessor<D extends object> {
-    accessor?:
-        | IdType<D>
-        | ((
-              originalRow: D,
-              index: number,
-              sub: {
-                  subRows: D[];
-                  depth: number;
-                  data: D[];
-              },
-          ) => CellValue);
-    id?: IdType<D>;
-}
+export type Accessor<D extends object> = (
+    originalRow: D,
+    index: number,
+    sub: {
+        subRows: D[];
+        depth: number;
+        data: D[];
+    },
+) => CellValue;
 
 //#endregion
 
@@ -802,7 +843,7 @@ export const defaultColumn: Partial<Column> & Record<string, any>;
 // Helpers
 export type StringKey<D> = Extract<keyof D, string>;
 export type IdType<D> = StringKey<D> | string;
-export type CellValue = any;
+export type CellValue<V = any> = V;
 
 export type Renderer<Props> = ComponentType<Props> | ReactElement | ReactText | ReactFragment;
 

types/react-table/react-table-tests.tsx

@@ -107,7 +107,7 @@ declare module 'react-table' {
             UseRowStateState<D>,
             UseSortByState<D> {}
 
-    interface Column<D extends object = {}>
+    interface ColumnInterface<D extends object = {}>
         extends UseFiltersColumnOptions<D>,
             UseGlobalFiltersColumnOptions<D>,
             UseGroupByColumnOptions<D>,