Infer the return type of a function within a type and use the return type in the type itself

Question

I'm writing some types that I will use for a table component in React and are having some issues.

I want to feed the data to the component, and then infer the data type for some different purposes. The problem arises when I introduce a row formatter, which will modify the data and return a new type.

I have greatly simplified the type to illustrate the issue:

type Props<TRow, TFormattedRow> = {
  data: TRow[]
  getRow?: (row: TFormattedRow) => void
  rowFormatter: (row: TRow) => TFormattedRow
}

function createProps<TRow, TFormattedRow>(props: Props<TRow, TFormattedRow>) {
  return props
}

When using the createProps function by explicitly giving it the type of row in rowFormatter everything is working correctly - rowFormatter infers formattedRow correctly as { id: string, name: string, count: number }

createProps({
  data: [
    { id: '1', name: 'Mangus Karlsson', count: 4 },
    { id: '2', name: 'Elsa Nyström', count: 6 },
    { id: '3', name: 'Bengt Blyertz', count: 8 },
  ],
  // getData is infers the formatted row type correctly as { id: string, name: string, count: number }
  getRow: (formattedRow) => console.log(formattedRow),
  rowFormatter: (row: { id: string, name: string, count: number }) => {
    return { id: row.id, idAsNumber: parseInt(row.id) }
  },
})

Though, when not explicitly setting the argument of rowFormatter, getRow infers formattedRow as unknown:

createProps({
  data: [
    { id: '1', name: 'Mangus Karlsson', count: 4 },
    { id: '2', name: 'Elsa Nyström', count: 6 },
    { id: '3', name: 'Bengt Blyertz', count: 8 },
  ],
  // formattedRow is infered as unknown when not explicitly typing the argument of rowFormatter
  getRow: (formattedRow) => console.log(formattedRow),
  rowFormatter: (row) => {
    return { id: row.id, idAsNumber: parseInt(row.id) }
  },
})

Is there a way to solve this without explicitly typing the argument of rowFormatter? Or am I missing something fundamental here?

Answer 1

It works if you put rowFormatter first. ie. the compiler infers the type from that property first.

const test = createProps({
  data: [
    { id: '1', name: 'Mangus Karlsson', count: 4 },
    { id: '2', name: 'Elsa Nyström', count: 6 },
    { id: '3', name: 'Bengt Blyertz', count: 8 },
  ],
  rowFormatter: (row) => ({ id: row.id, idAsNumber: parseInt(row.id) }),
  getRow: (formattedRow) => console.log(formattedRow),
})

// inferred type:
// const test: Props<{
//     id: string;
//     name: string;
//     count: number;
// }, {
//     id: string;
//     idAsNumber: number;
// }>

Typescript Playground

---

But depending on your use case, you may be better off explicitly typing the function call

type MyRow = {id: string, name: string, count: number};
type MyFormattedRow = {id: string, idAsNumber: number};

const test = createProps<MyRow, MyFormattedRow>({
  data: [
    { id: '1', name: 'Mangus Karlsson', count: 4 },
    { id: '2', name: 'Elsa Nyström', count: 6 },
    { id: '3', name: 'Bengt Blyertz', count: 8 },
  ],
  getRow: (formattedRow) => console.log(formattedRow),
  rowFormatter: (row) => ({ id: row.id, idAsNumber: parseInt(row.id) }),
})

// inferred type:
// const test: Props<MyRow, MyFormattedRow>

Typescript Playground

I generally prefer explicitly typing things over relying on inference. I would also recommend always explicitly declaring return values of functions. I find it better to declare your intentions in order to prevent mistakes in the implementation.

For example, let's say you forgot to parse idAsNumber and just did idAsNumber: row.id. Your variable now has the string type instead of number. Typescript won't catch that if you are relying on inference. Now let's say you do idAsNumber + 1. Well now you have a string with 1 at the end instead of an incremented id.