javascript - A propriedade 'map' não existe no tipo '() => IterableIterator'

Estou tentando passar keys como uma prop do React:

import * as React from "react";
import { render } from "react-dom";

const keys: string[] = ["a", "b"];

function App({keys}: string[]) {
  return (
    <div>
      {keys.map((key: string) => (
        <li>{key}</li>
      ))}
    </div>
  );
}

const rootElement = document.getElementById("root");
render(<App keys={keys} />, rootElement);

No entanto, eu recebo estes erros:

A propriedade 'map' não existe no tipo '() => IterableIterator'.

O tipo 'string[]' não é atribuível ao tipo '() => IterableIterator'.

Por que isso acontece e como consertar?

Código ao vivo: https://codesandbox.io/s/changing-props-on-react-root-component-forked-9lj9ye?file=/src/index.tsx:0-341

Resposta #1

Você está digitando suas props inteiras como string[] em vez de apenas keys. Incorpore a prop keys em um objeto:

function App({ keys }: { keys: string[]; }) {
  // ...

Ou usando uma interface:

interface AppProps {
  keys: string[];
}

function App({ keys }: AppProps) {
  // ...

Ou um tipo:

type AppProps {
  keys: string[];
}

function App({ keys }: AppProps) {
  // ...

Para ir mais longe: Diferenças entre Aliases de Tipo e Interfaces