React typescript is not assignable to parameter of type

Question

I am using typescript in a react project.

I am getting the following error.

Argument of type '{ teams: { home: { name: string; }; away: { name: string; }; }[]' is not assignable to parameter of type 'Fixtures[] | (() => Fixture[])'.

My type definitions and use in a react component are below.

type Team = {
    name: 'Liverpool' | 'Man Utd';
};

type Fixtures = {
    teams: {
        home: {
            name: Team;
        },
        away: {
            name: Team;
        },
        winner: Team;
    };
};

const initialFixtures = [
    {
        teams: {
            home: {
                name: 'Liverpool',
            },
            away: {
                name: 'Man Utd',
            },
        },
        winner: 'Liverpool',
    },
];

I am then using this in my React component like below but

// Error is in `initial fixtures`
const [fixtures, updateFixtures] = useState<Fixtures[]>(initialFixtures);

Can anyone see what I am doing wrong? I can't see where it is inferring it to be a string when I have said it is a Team.

Titian Cernicova-Dragomir · Accepted Answer · 2019-01-23 11:22:36Z

The problem is not related to react, its related to how Typescript infers string literal types. Typescript will not infer string literal types unless it has a reason to do so.

In this case initialFixtures is untyped. So typescript has no reason to infer name as 'Liverpool' | 'Man Utd' so it infers it as string. When you later try to assign initialFixtures with its inferred type to Fixture[] the assignment fails (since string is not assignable to Team):

type Team =  'Liverpool' | 'Man Utd';

type Fixtures = {
    teams: {
        home: {
            name: Team;
        },
        away: {
            name: Team;
        },
    };
    winner: Team;
};

const initialFixtures= [
    {
        teams: {
            home: {
                name: 'Liverpool',
            },
            away: {
                name: 'Man Utd',
            },
        },
        winner: 'Liverpool',
    },
];
let o: Fixtures[] = initialFixtures; // error here 
// Type '{ teams: { home: { name: string; }; away: { name: string; }; }; winner: string; }[]' is not assignable to type 'Fixtures[]'.

The simple solution is to type initialFixtures and not ask the compiler to infer anything and just check the object literal):

const initialFixtures: Fixtures[]= [
    {
        teams: {
            home: {
                name: 'Liverpool',
            },
            away: {
                name: 'Man Utd',
            },
        },
        winner: 'Liverpool',
    },
];
let o: Fixtures[] = initialFixtures; //ok

Carl Pryke · Accepted Answer · 2019-01-23 11:17:10Z

0

For one thing, the shape of your data isn't matching up:

Notice you are using 'term' instead of 'away' in your initialFixtures array, and then 'away' instead of 'name'. So you shapes are not matching up. It may help to declare your initialFixtures const as a Fixtures[] as typescript will probably not implicitly realise that.

It looks like useState is a polymorphic function that takes an array of the assigned type Fixtures or a callback that returns the Fixtures[] type.

So as far as I can tell:

term: {
  away: 'Man Utd',
},

Should be

away: {
  name: 'Man Utd'
}

answered Jan 23, 2019 at 11:17

Carl Pryke

3491 silver badge7 bronze badges

1 Comment

peter flanagan Over a year ago

apologies, I amended the question a bit to use different variable names. Updated now

Pandelis · Accepted Answer · 2019-01-23 11:21:05Z

0

type Team = 'Liverpool' | 'Man Utd';

Reason is typescript thinks that your structure should be:

            home: {
                name: {
                   name: 'Liverpool'
                }
            },
            away: {
                name: {
                   name: 'Man Utd'
                }
            },

Alternatively you could keep the team type the same but change the Fixtures type to:

type Fixtures = {
    teams: {
        home: Team;
        away: Team;
        winner: Team;
    };
};

Keep in mind that winner will be an object of {name: 'Teamname'} Not a string of the team name

answered Jan 23, 2019 at 11:21

Pandelis

1,99714 silver badges20 bronze badges

Collectives™ on Stack Overflow

React typescript is not assignable to parameter of type

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related