TypeScript 说一个字符串是无效的，即使它在联合中？

Question

我从 AWS Amplify 教程中复制了以下内容：

const styles = {

  container: { flexDirection: 'column' },

  ...

};

<div style={styles.container}>

但我得到：

Type '{ flexDirection: string; }' is not assignable to type 'CSSProperties'.

  Types of property 'flexDirection' are incompatible.

    Type 'string' is not assignable to type '"column" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "column-reverse" | "row" | "row-reverse" | undefined'.

我可以通过将样式内联来轻松解决这个问题，但我很好奇为什么 TypeScript 认为这是一个错误。这是一个非常基本的例子，我很惊讶 TS 在它上面失败了，所以它让我对使用 TS 保持警惕。

Answer 1

这是一个TS Playground，说明了问题和四种可能的解决方案：type FlexDirection = "column" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "column-reverse" | "row" | "row-reverse" | undefined;type Styles = {&nbsp; &nbsp; container: {&nbsp; &nbsp; &nbsp; &nbsp; flexDirection: FlexDirection&nbsp; &nbsp; }}function doStuff(a: Styles) { }const stylesDoesNotWork = {&nbsp; &nbsp; container: { flexDirection: 'column' }};const stylesWithCast = {&nbsp; container: { flexDirection: 'column' as 'column' }}const stylesFieldConst = {&nbsp; &nbsp; container: { flexDirection: 'column' } as const};const stylesConst = {&nbsp; &nbsp; container: { flexDirection: 'column' }} as const;doStuff(stylesDoesNotWork);doStuff(stylesWithCast);doStuff(stylesFieldConst);doStuff(stylesConst);默认情况下，TypeScript 将为string您声明的对象推断类型。您可能会在某处对其进行变异并更改值，在这种情况下，文字类型将不正确。因此，修复它的基本选项是：手动注释变量，以便 TypeScript 不会推断字符串。添加as 'column'cast 以告诉 TypeScript 使用文字类型。在字段或整个对象上使用as const来告诉 TypeScript 不允许更改字段，这允许 Typescript 推断文字值。

Answer 2

尝试这个const styles: { container: React.CSSProperties} = {&nbsp; &nbsp; container: { flexDirection: 'column' }};

Answer 3

导入并使用类型：import&nbsp;type&nbsp;{&nbsp;Property&nbsp;}&nbsp;from&nbsp;'csstype'使用 Property.FlexDirection 指定类型