Material-ui: [TypeScript] Multiple errors on TableCell components

[Abbo44]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

No typescript errors.

Current Behavior

Hello, I'm having some typescript issues with TableCell props direction and sortDirection

TS2322: Type 'string' is not assignable to type 'SortDirection'.
TS2322: Type 'string' is not assignable to type 'asc' | 'desc'.

I experienced those errors on an other library and the fixed was by passing it with an Enum instead of a type for 'asc' or 'dsc'. Example :

export type SortDirection = Direction | false; export const enum Direction { ASC = 'asc', DSC='desc' }

Steps to Reproduce

I'm not able to reproduce on the codesanbox, it's weird.

Link : https://codesandbox.io/s/jz25ov7p5w

Context

I can't compile.

Your Environment

tsconfig.json and tslint.json files are in the codesanbox

| Tech | Version |
|--------------|---------|
| Material-UI |3.1.1|
| React |16.5.2|
| Browser | |
| TypeScript | 3.1.3 |
| etc. | |

[eps1lon]

You encountered typescripts type widening.

Possible fix:

interface State {
  order: 'asc' | 'desc'
  orderBy: string;
}

class Index extends React.Component<{}, State> {
  state: State = {
    order: "asc",
    orderBy: "calories"
  };
  ...
}

codesandbox' typechecking is currently not working. That's why you couldn't reproduce this.

[Abbo44]

Ok thank you very much @eps1lon, it fixed my compile errors.

I used this example code:
https://github.com/mui-org/material-ui/blob/master/docs/src/pages/demos/tables/EnhancedTable.js

Should we fix it ? Is it a material-ui bug or a wront typescript implementation ?

[eps1lon]

Is the issue with types or at runtime?

You can't just simply copy code from javascript and call it typescript. At least not in most cases.

[Abbo44]

The issue is with types, I can't compile without your fix @eps1lon

[eps1lon]

Yes which is caused by typescript. I provided you with the proper documentation about that typescript behavior. It has nothing to do with this library.