Type 'unknown' is not assignable to other type, when strict mode is true

460 Views Asked by At

I have type error. Exists child component Pagination with type of props:

interface BaseProps {
  url: string;
  rowKey: string;
  renderItem: (item: unknown) => React.ReactNode;
  params?: Record<string, unknown>;
  foundTextSuffix?: string;
  separated?: boolean;
  useLaggy?: boolean;
}

In parent component function renderItem is passed to child component Pagination. This function needed to render other nested components in different places.

<Pagination
        url={API.service('search')}
        rowKey="id"
        foundTextSuffix=" services"
        renderItem={({id, shortTitle, organizationTitle}: ServiceExtended) => (
          <ListItem
             title={<Link href={{pathname: '/services/[serviceId]', query: {serviceId: id}}}>{shortTitle}</Link>}
                        subTitle={organizationTitle}
           />
        )}
        params={frozen}
/>

Argument of function renderItem has type unknown in type of Pagination component, strict mode is true. When I try to pass a function in props of Pagination component with argument type ServiceExtended, for example, there is type error:

Type 'unknown' is not assignable to type 'ServiceExtended'

I can't list all possible types in argument of renderItem, because there are a lot of them, there will be new ones in the future and this approach doesn't work with strict mode. Please, help to find solution

I wrote simple example of my case below. This type error is occurring only with strict mode

type childPropType ={
  render: (data: unknown) => JSX.Element
}

type parentPropType = {
  id: number,
  greeting: string
}

const data: parentPropType = {
  id: 1,
  greeting: 'Hello'
}

const Child = (props: childPropType) => {
  const {render} = props;
  return (
    <div>{render(data)}</div>
  )
}

const Parent = () => {
  return (
    <div>
      <Child
        render={
          ({id, greeting}: parentPropType) => <div>{greeting}</div>
        }
      />

    </div>
  )
}
0

There are 0 best solutions below