I understand that the title might sound a little vague so I will do my best to explain my question here.

I'm making a simple quiz app, and on the backend I've created a query which returns data of this shape:

type TrueFalseCard {
    id: ID!
    topic: String!
    question: String!
  }

On the frontend I am using apollo as my graphql client, and I retrieve the data using their useQuery hook like this:

const { topic } = useParams();

const { loading, error, data } = useQuery(GET_QUIZ_CARDS, {
    variables: { topic },
  });

I then pass this data down to a component via the currentQuestions prop below (the only difference between the data object returned from useQuery and this currentQuestions object is that I've spliced the array so that currentQuestions only contains 3 questions instead of all of them):

return (
    <Grid
      container
      spacing={4}
      sx={{
        paddingTop: '25vh',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <QuizCardRow
        currentQuestions={currentQuestions}
        dispatch={dispatch}
        quizSection={quizSection}
      />
    </Grid>
  );

So at this point, the data being passed down to currentQuestions is an array of objects the same type as the one I showed at the top. However, this is the code of my QuizCardRow component (the component consuming currentQuestions):

interface QuizCardRowProps {
  currentQuestions: boolean[];
  dispatch: Function;
  quizSection: string;
}

export default function QuizCardRow({
  currentQuestions,
  dispatch,
  quizSection,
}: QuizCardRowProps) {
  return (
    <>
      {currentQuestions.map((question: any, index: number) => (
        <Grid item>
          {quizSection === 'truefalse' && (
            <TrueFalseQuestionCard
              index={index}
              question={question.question}
              dispatch={dispatch}
            />
          )}
          {quizSection === 'multiplechoice' && (
            <MultipleChoiceQuestionCard
              index={index}
              question={question.question}
              answers={question.answers}
              dispatch={dispatch}
            />
          )}
        </Grid>
      ))}
    </>
  );
}

If you look at the 2nd line, you'll see that I'm declaring the currentQuestions prop as a boolean array. From what I understand, this should flag an error since the data I'm passing down is not a boolean array? In fact, I can seemingly change this type to whatever I want as long as I declare it as an array (for example, string[] or number[]) and it compiles just fine. If I remove the array declaration, I get an error saying that "property map does not exist on type (whatever)" but that's it. Why isn't typescript realizing that the data I'm passing down to this prop does not match what I've declared it as and throw an error?

CodePudding user response：

You are declaring your question type as any, which disables TypeScript checking:

Change: currentQuestions.map((question: any, index: number) => (

To:
currentQuestions.map((question, index) => (

Which will allow TS to properly infer the types.