ternary operator typescript has error when true value is react state

Question

I am trying to implement sorting on a table and am getting an error of:

(property) direction?: "asc" | "desc"
No overload matches this call.
  Overload 1 of 3, '(props: { href: string; } & { active?: boolean; direction?: "asc" | "desc"; hideSortIcon?: boolean; IconComponent?: ComponentType<{ className: string; }>; } & { action?: Ref<ButtonBaseActions>; ... 10 more ...; TouchRippleProps?: Partial<...>; } & CommonProps<...> & Pick<...>): Element', gave the following error.
    Type 'string' is not assignable to type '"asc" | "desc"'.
  Overload 2 of 3, '(props: { component: ElementType<any>; } & { active?: boolean; direction?: "asc" | "desc"; hideSortIcon?: boolean; IconComponent?: ComponentType<{ className: string; }>; } & { ...; } & CommonProps<...> & Pick<...>): Element', gave the following error.
    Type 'string' is not assignable to type '"asc" | "desc"'.
  Overload 3 of 3, '(props: DefaultComponentProps<ExtendButtonBaseTypeMap<TableSortLabelTypeMap<{}, "span">>>): Element', gave the following error.
    Type 'string' is not assignable to type '"asc" | "desc"'.ts(2769)

import {
  Badge,
  Box,
  Drawer,
  IconButton,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableSortLabel,
  TableHead,
  TableRow,
  Tooltip
} from "@material-ui/core";
import { useEffect, useState } from "react";

function TeamsTableImpl({
  a
}: {
  a:number
}) {
  const [orderDirection, setOrderDirection] = useState('asc')
  const [valueToOrderBy, setValueToOrderBy] = useState('team')


  const handleRequestSort = (event: any, property: any) => {
    const isAscending = (valueToOrderBy === property && orderDirection === 'asc')
    setValueToOrderBy(property)
    setOrderDirection(isAscending ? 'desc' : 'asc')
  }
  

  const createSortHandler = (property: any) => (event: any) => {
    handleRequestSort(event, property)
  }

  console.log(orderDirection);
  console.log(typeof(orderDirection));
  const myorderDirection = "desc";
  console.log(typeof(myorderDirection))


  return (
    <Box>
      <TableContainer style={{ marginTop: 32 }}>
        <Table>
          <TableHead>
            <TableRow>

              <TableCell>
              Team
                <TableSortLabel 
                  active={valueToOrderBy === "team"}
                  // for some reason when orderDirection is passed as a state, this does not compile, even
                  // though the state value is a string that says 'desc' or 'asc', but if you hard code 
                  // a string in the ternary operator, even if it shows the same value and type, it works correctly.
                  // need to investigate further.

                  direction = { valueToOrderBy === 'team' ? orderDirection : 'asc' }
                  onClick={createSortHandler("team")}>
                    Team
                </TableSortLabel>
              </TableCell>
            </TableRow>
          </TableHead>
        </Table>
      </TableContainer> 
    </Box>
  );
}

As stated in the code, if orderDirection is passed as a state the error above shows, I have verified that the typeof(orderDirection) is a string. When I set a new variable called myorderDirection to the same string that the state orderDirection is, it works, it just does not work when the state is passed.

I am out of ideas why this might be.

Here are the versions of react and material-ui I am using.

"@material-ui/core": "^4.11.3",
"react": "^17.0.1"

Answer 1

Just enforce the type of your state: useState<'asc'|'desc'>('asc') . This way orderDirection will be 'asc'|'desc' instead of the infered string .

Answer 2

const [orderDirection, setOrderDirection] = useState<any>('asc')

or

const [orderDirection, setOrderDirection] = useState<'asc'|'desc'>('asc')

this would work