Typescript 接口不接受带有强制键的动态对象

Question

I need to use an interface for this array of objects that it's passed as prop.

const playersData = [
    {
        id: 1, // Always a number (user always sends it)
        extraNode: <ExampleComponent />, // If it's sent, it's React component (user may not send it)

        // From here, we can receive anything because it depends on what
        // the database sends. The type is always a string, but I can have
        // many other values such as height, age, etc...
        position: '1',
        player: 'Miroslav Klose',
        goals: '16',
        games: '24',
        country: 'Germany',
    },
    {
        id: 2,
        extraNode: <ExampleComponent />,
        position: '2',
        player: 'Ronaldo',
        goals: '15',
        games: '19',
        country: 'Brazil',
    },
];

id will always be a number, extraNode will be a React Component (if it's passed). The problem is that the other key-values are dynamic. It means that it can be more such as age, height, etc.

I tried this, but it's giving me an error:

export interface tableData {
    id: number;
    extraNode?: React.ReactNode;
    [key: string]: string;
  }
  
export interface TableProps extends HTMLAttributes<HTMLDivElement> {
    tableData: tableData[];
}

Answer 1

you can use a Record

type Player = Record<string, string>

interface Data {
    id: number;
    extraNode: React.ReactNode;
    player: Player;
}

const test:Data = {
    id: 123,
    extraNode: <Component />
    player:{
        position: "1",
        player: "Miroslav Klose"
    }
}