TypeScript Type 'Record<string, string>' is not assignable to type 'string'

Issue

Why is this wrong? I've had similar issues with this and never figured it out. Whenever I do this:

    type dataType = {
        [key: string]: string | Record<string, string>;
    };

    const rawData = [
        {
            name: 'XXXX',
            commission: 'XXXX',
            psc: 'XXX XX',
            ico: 'XXXXXXXX',
            address: 'XXXXXXX',
            city: 'XXXXXXXXXXX',
        },
    ];
    const createData = ({ name, commission, ico, address, psc, city }: dataType) => {
        return { name, commission, legal: { name, ico, address, city: `${psc} ${city}` } };
    };

    const rows: dataType[] = [createData(rawData[0])];

This should theoretically be working fine, should it not? The dataType is a type of an object with any key that is string with a value of either string or another object. Why does this not work?

Solution

Your createData should not take a dataType object as its argument. The way you wrote it, name, ico and address might be of type Record<string, string>, arriving at the signature

const createData: ({ name, commission, ico, address, psc, city }: dataType) => {
    name: string | Record<string, string>;
    commission: string | Record<string, string>;
    legal: {
        name: string | Record<string, string>;
        ico: string | Record<...>;
        address: string | Record<...>;
        city: string;
    };
}

These records inside the legal object are invalid when you try to assign the result to a dataType variable.

Instead, use

const createData = ({ name, commission, ico, address, psc, city }: Record<string, string>) => …

which is the proper type fitting your rawData. (You might want to be more precise and define an interface with the exact properties).

Answered By - Bergi