如何让这个受歧视的工会发挥作用？

Question

Trying to create a simple table component, but having a bit of trouble with making the typings work as I want.

TL;DR How do write the type for Column3 in this Playground Link so that the 2 errors go away?

This works

So given the following common stuff:

type Data = { id: number, name: string };
const data: Data[] = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
]

type Header = { header: string };

Here's a variant that makes you supply a typesafe field name, and optionally a formatting function for the value of that field:

type Value1<Row> = {
  [Key in keyof Row]: {
    field: Key;
    format?: (value: Row[Key]) => string;
  };
}[keyof Row];

type Column1<Row> = Header & Value1<Row>;

const makeTable = <R>(r: R[], c: Column1<R>[]) => {}
makeTable(data, [
  { header: 'Id', field: 'id' },
  { header: 'Name', field: 'name', format: value => value.toUpperCase() },
])

Here's a variant that makes you only supply a formatting function, and instead of a value you get the row object:

type Value2<Row> = {
  format: (row: Row) => string;
};

type Column2<Row> = Header & Value2<Row>;

const makeTable = <R>(r: R[], c: Column2<R>[]) => {};
makeTable(data, [
  { header: 'Id', format: row => row.id.toString() },
  { header: 'Name', format: row => row.name.toUpperCase() },
])

This does not...

The issue comes when I would like to combine these two, because for some columns the first variant makes sense, and for others the second one does.

I figured I could do it as follows, but Typescript is not happy...

type Column3<Row> = Header & (Value1<Row> | Value2<Row>); // <-- Non-working discriminated union?

const makeTable = <R>(r: R[], c: Column3<R>[]) => { };
makeTable(data, [
  { header: 'Id', field: 'id' },
  { header: 'Name', field: 'name', format: value => value.toUpperCase() },
  { header: 'Test', format: row => `${row.id} : ${row.name}` },
])

Apparently the type of data is now incorrect, and also that row in the third column for some reason is implicitly any , which it of course shouldn't be.

I can "fix" the type of data by being explicit about the generic Row type:

makeTable<Data>(data, [
  { header: 'Id', field: 'id' },
  { header: 'Name', field: 'name', format: value => value.toUpperCase() },
  { header: 'Test', format: row => `${row.id} : ${row.name}` },
])

But row is still implicitly any , and it really shouldn't be necessary to be explicit here, so something is definitely not right here... but... I don't understand what's going on here. 😕

What am I misunderstanding here?

Answer 1

So, let's chalk the wrong type on data up to generic default types (because Row is never defined as an actual type, I think Typescript defaults it to string at some point for purposes of type resolution (I may be wrong on this)).

The type of row being any in the format functions is due to Typescript not inferring types for function arguments . That thread has a lot of good discussion as to why. In fact, at one point in the discussion, it is mentioned that

there's nothing in TypeScript today that infers information about a variable from its usage.

For a short example of the complexities that can develop, what is the type of row in z.format ?

type t = { format: (row: string) => string } | { format: (row: number) => number }
const z: t = {format: row => row }

Without additional annotation during usage:

const z: t = {format: (row: number) => row}

The compiler cannot easily tell what shape row is supposed to be. Unfortunately, this forces us to be explicit at times that we wouldn't expect to have to be.

To 'fix' the type for Column3 , you just have to be a little more explicit in your usage:

type Column3<Row> = Header & (Value1<Row> | Value2<Row>);
type R = Data
(<R>(r: R[], c: Column3<R>[]) => {})(data, [
  { header: 'Id', field: 'id' },
  { header: 'Name', field: 'name', format: value => value.toUpperCase() },
  { header: 'Test', format: (row: R) => `${row.id} : ${row.name}` },
])

Answer 2

Format is ambigeous as defined in both Value1 and Value2
The compiler cannot tell row 's type between Row[Key] //Value1 and Row //Value2
I suggest you to switch the format of both Value1 and Value2 :

type Value1<Row> = {
  [Key in keyof Row]: {
    field: Key;
    format_field?: (value: Row[Key]) => string;
  };
}[keyof Row];

type Value2<Row> = {
  format_row: (row: Row) => string;
};

(<R>(r: R[], c: Column3<R>[]) => {})<Data>(data, [
  { header: 'Id', field: 'id' },
  { header: 'Name', field: 'name', format_field: value => value.toUpperCase() },
  { header: 'Test', format_row: row => `${row.id} : ${row.name}` },
]) //No more ambigeous