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

Question

我从AWS放大器教程中复制了以下内容：

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

导入并使用类型：

import type { Property } from 'csstype'

使用属性. FlexDirection指定类型

Answer 2

试试这个

const styles: { container: React.CSSProperties} = {
    container: { flexDirection: 'column' }
};

Answer 3

下面是一个演示该问题和四种可能的解决方案的TS操场:

type FlexDirection = "column" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "column-reverse" | "row" | "row-reverse" | undefined;

type Styles = {
    container: {
        flexDirection: FlexDirection
    }
}

function doStuff(a: Styles) { }

const stylesDoesNotWork = {
    container: { flexDirection: 'column' }
};

const stylesWithCast = {
  container: { flexDirection: 'column' as 'column' }
}

const stylesFieldConst = {
    container: { flexDirection: 'column' } as const
};

const stylesConst = {
    container: { flexDirection: 'column' }
} as const;

doStuff(stylesDoesNotWork);
doStuff(stylesWithCast);
doStuff(stylesFieldConst);
doStuff(stylesConst);

默认情况下，TypeScript将为您要声明的对象推断类型＜code＞字符串＜/code＞。您可能会在某处对其进行修改并更改值，在这种情况下，文字类型将不正确。因此，修复它的基本选项是：

• 手动注释变量，以便 TypeScript 不会推断字符串。
• 添加为“列”强制转换以告诉 TypeScript 使用文本类型。
• 在字段或整个对象上使用 const 来告诉 TypeScript 不允许更改字段，这允许 Typescript 推断文本值。