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)`
`;

score 0 · Answer 1 · answered May 08 '20 at 04:09

0

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.

answered May 08 '20 at 04:09

wentjun

40,384
10
95
107

Thank you. How will I define `RootState`? – juha May 08 '20 at 04:17
I used `RootStateOrAny`. Like this: ` const properties = useSelector( (state: RootStateOrAny) => { return state.properties.list.data; } );` But I am getting still same error. – juha May 08 '20 at 04:25
I found this typescript cheat sheet where it mentioned: `RootStateOrAny`. https://www.saltycrane.com/cheat-sheets/typescript/react/latest/#react – juha May 08 '20 at 04:29
Nope, try not to use any for this case..! The root state is your typings for your redux state. – wentjun May 08 '20 at 04:56
As for the cheatsheet, you can look search for this: `useSelector (function)` – wentjun May 08 '20 at 04:57
did not help :( – juha May 08 '20 at 05:25
Hmm.. its hard for me to help from here too. But basically, for my code to work, you have to do the types for your redux state – wentjun May 08 '20 at 12:48
I fixed it :). Man! typeScript can be sometimes pain in the neck :) – juha May 08 '20 at 12:49
Now I am facing another issue :D . https://stackoverflow.com/questions/61679036/react-typescript-property-position-does-not-exist-on-type-intrinsicattribute – juha May 08 '20 at 12:51

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

1 Answers1