Discussion on: Some reflections about React and TypeScript

View post

The example with JSX.Element could be improved; since you already declare the type of the LHS to be a React.FC the RHS is fully determined. Rule of thumb is to be as specific as necessary, but not more. Same applies to the last example where the LHS already gives us all the required information.

Also your Routes.map is way too specific. Since the routes are already an array of IRoute the types of the map callback are fully determined.

One beautiful thing about TS is type inference and that the types "just flow". Make use of it!

Sung M. Kim • Jan 25 '20 • Edited

Is it a norm to let TypeScript infer without specifying types in the code?

Florian Rappl • Jan 25 '20 • Edited

Not sure what you refer to, but yes - use type inference to let types flow. Constrain where necessary, e.g.,

function foo() {
  return {
    a: 'foo',
    b: 'bar',
  };
}

Now here TS infers that

declare function foo(): {
  a: string;
  b: string;
};

but maybe you want that foo always returns something like

interface FooReturn {
  a: 'foo' | 'bar';
  b: string;
  c?: boolean;
}

Now in the free return spec above that is not clear. Even worse, another function taking a parameter of type FooReturn will not work as the return is currently not compatible.

Sure, we could do:

function foo() {
  return {
    a: 'foo' as const,
    b: 'bar' as const,
  };
}

to improve the situation, but in this case decorating the return seems even better, because when we write the function we would already know that another property c is also possible (and its type).

So just use:

function foo(): FooReturn {
  return {
    a: 'foo',
    b: 'bar',
  };
}

Again, it all depends, but once types are given (as in many of the examples above) there is no need to re-specify. This is over-specifying, which should always be avoided (as in any potential refactoring this leads to a wave of unnecessary changes).

Sung M. Kim • Jan 26 '20

Thank you Florian for the detailed reply.