[英]React typescript is not assignable to parameter of type
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[] |
} []'不能分配给'Fixtures [] |类型的参数。 (() => Fixture[])'.
(()=>灯具[])'。
My type definitions and use in a react component are below. 我的类型定义和在react组件中的用法如下。
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 然后我在我的React组件中使用它,如下所示,但是
// 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
. 当我说这是一个
Team
时,我看不到它在哪里推断它是一个字符串。
The problem is not related to react, its related to how Typescript infers string literal types. 问题与反应无关,与Typescript如何推断字符串文字类型有关。 Typescript will not infer string literal types unless it has a reason to do so.
除非有理由,否则Typescript不会推断字符串文字类型。
In this case initialFixtures
is untyped. 在这种情况下,
initialFixtures
是无类型的。 So typescript has no reason to infer name
as 'Liverpool' | 'Man Utd'
因此,打字稿没有理由将
name
推断为'Liverpool' | 'Man Utd'
'Liverpool' | 'Man Utd'
so it infers it as string
. 'Liverpool' | 'Man Utd'
因此将其推断为string
。 When you later try to assign initialFixtures
with its inferred type to Fixture[]
the assignment fails (since string
is not assignable to Team
): 当您稍后尝试将其推断类型的
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[]'.
The simple solution is to type initialFixtures
and not ask the compiler to infer anything and just check the object literal): 简单的解决方案是键入
initialFixtures
,而不要求编译器推断任何内容,而只是检查对象文字):
const initialFixtures: Fixtures[]= [
{
teams: {
home: {
name: 'Liverpool',
},
away: {
name: 'Man Utd',
},
},
winner: 'Liverpool',
},
];
let o: Fixtures[] = initialFixtures; //ok
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'. 请注意,在initialFixtures数组中使用的是'term'而不是'away',然后是'away'而不是'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.
将您的initialFixtures常量声明为Fixtures []可能会有所帮助,因为打字稿可能不会隐式意识到这一点。
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. 看起来useState是一个多态函数,它采用分配了Fixtures类型的数组或返回Fixtures []类型的回调。
So as far as I can tell: 据我所知:
term: {
away: 'Man Utd',
},
Should be 应该
away: {
name: 'Man Utd'
}
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 请记住,获胜者将是{name:'Teamname'}的对象,而不是团队名称的字符串
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.