Реактивная машинопись не может быть назначена параметру типа

Question

Я использую машинопись в реактивном проекте.

Я получаю следующую ошибку.

Аргумент типа '{команды: {дом: {имя: строка; }; далеко: { имя: строка; }; } [] 'нельзя назначить параметру типа Светильники [] | (() => Светильник []) '.

Мои определения типов и использование в компоненте реакции приведены ниже.

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',
    },
];

Затем я использую это в своем компоненте React, как показано ниже, но

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

Кто-нибудь может увидеть, что я делаю не так? Я не могу понять, откуда это выводит, что это строка, когда я сказал, что это Team.

Answer 1

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

Причина - машинопись считает, что ваша структура должна быть:

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

В качестве альтернативы вы можете оставить тип команды таким же, но измените тип Fixtures на:

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

Имейте в виду, что победителем будет объект {name: 'Teamname'} Не строка названия команды

Answer 2

Проблема не связана с реакцией, она связана с тем, как Typescript выводит строковые литералы Typescript не будет выводить строковые литеральные типы, если у него нет причин для этого.

В этом случае initialFixtures не печатается. Таким образом, у машинописного текста нет причины выводить name как 'Liverpool' | 'Man Utd', поэтому он выводит его как string. Когда вы позже попытаетесь присвоить initialFixtures с его логическим типом Fixture[], назначение завершится неудачно (поскольку string нельзя назначить 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[]'.

Простое решение - набрать initialFixtures и не просить компилятор ничего выводить и просто проверять литерал объекта):

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

Answer 3

Во-первых, форма ваших данных не совпадает:

Обратите внимание, что вы используете 'term' вместо 'away' в массиве initialFixtures, а затем 'away' вместо 'name'. Таким образом, ваши фигуры не совпадают. Это может помочь объявить ваши initialFixtures const как Fixtures [], так как машинописный текст, вероятно, неявно осознает это.

Похоже, что useState - это полиморфная функция, которая принимает массив назначенного типа Fixtures или обратный вызов, который возвращает тип Fixtures [].

Итак, насколько я могу сказать:

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

Должно быть

away: {
  name: 'Man Utd'
}