Question

打字稿给我有关间距值的错误：

TS2322: Type 'number' is not assignable to type 'boolean | 7 | 2 | 10 | 1 | 3 | 4 | 5 | 6 | 8 | "auto" | 9 | 11 | 12'.
No lint errors found
Version: typescript 3.5.2, tslint 5.14.0

迭代数组并动态设置一个xl, lg, .. and so on属性：

<Grid container spacing={2}>
  {row.map(resumeItem =>
     <Grid key={resumeItem.id} item xs={12} lg={6} xl={resumeItem.space}>
       ...
     </Grid>
   )}
</Grid>

当然space属性是一个数字！

Answer 1

收到此打字稿错误的原因是因为您的space属性允许任何数字，但是xl道具仅允许数字的子集（特别是任何整数1-12）。因此，例如，您可以将数字'17 .2'分配给space，这对于它来说是一个完全可以接受的值，但是对于分配给xl来说则不是一个可接受的值。

解决此问题的最佳方法是将Number的{{1}}类型定义更改为类似于space道具的类型定义，即

xl

当然，这可能会对上游产生影响，具体取决于您如何为其分配值。

您还可以按照评论者的建议进行操作，并将space: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12强制转换为space ...只需注意，这实际上是在为此实例禁用类型检查，您将失去键入脚本来检测您是否正在将可能不兼容的值传递给any。这是一个权衡，只有您可以决定是否值得。

Answer 2

谢谢大家。如果我尝试使用这种方法：

space: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

问题无法解决。如果我使用的临时界面也不起作用，那么我现在正在使用any方法。

谢谢！

材质UI网格-打字稿网格动态间距警告

2 个答案: