React-typescript: Object is of type 'unknown'. TS2571

Question

I am using React-TypeScript for my project. For state management, I am using React-redux, for function handling I am using redux-saga. For gluing the redux store and functions I am using React's new hooks useSelector and useDispatch. I successfully pull the data and able to show it in the console.My data looks like this. Based on useSelector documentation I can able render the useSelector without passing to the state. When I am mapping the useSelector's variable I am getting TypeScript error: Object is of type 'unknown'. PS. I am new in TypeScript as well.

This is my React functional component

import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import ErrorBoundary from 'components/errorBoundary';
import { useDispatch, useSelector } from 'react-redux';
import { IPropertiesList } from '../../state/properties/types';
import { fetchProperties } from '../../state/properties/actions';
import { IIssueListItem } from '../../state/issues/types'
import { fetchIssuesList } from '../../state/issues/actions'
import list from '../issues/list';


export interface ITestNewListProps {
  className?: string;
}

const Test = ({ className }: ITestNewListProps) => {
  const dispatch = useDispatch();
  const properties = useSelector<IPropertiesList | undefined>(
    (state: any) => state.properties.list.data
  );
  const issues = useSelector<IIssueListItem | undefined>(
    (state: any) => state.issues.list.data
  )

  useEffect(() => {
    // fetch the properties data from the api if we don't already have it
    !properties && dispatch(fetchProperties({}));

  }, [dispatch, properties]);

  useEffect(() => {
    !issues && dispatch(fetchIssuesList())
  }, [dispatch, issues]);

  console.log(`properties`, properties); //I can able to see the data
  console.log(`issues`, issues);


  return (
    <ErrorBoundary id="TestNewListErrorBoundary">
      <div className={`${className}`}>
        {
          properties.map(list => { // IN HERE I AM GETTING ERROR
            return <div>{list.name}</div>
          })
        }
      </div>
    </ErrorBoundary>
  );
};

Test.displayName = `Test`;

export default styled(Test)`
`;

Answer 1

You might not be using the right types for your useSelector hook. Typically, it will be sufficient if you provide the types for your root state in the callback function.

I am not sure how are you naming the interfaces for your root state, but assuming it is called RootState,

const issues = useSelector(
  (state: RootState) => state.issues.list.data
);

For this case, there is not need to provide the generic type parameters, as TypeScript should be able to infer the types of state.issues.list.data based on the RootState interface/type alias, but if you do want to provide the generic types,

const issues = useSelector<RootState, IPropertiesList | undefined>(
  (state: RootState) => state.issues.list.data
);

Do take note that the useSelector hook's generic type requires you to input the default root state type, as well as the selected state type.