打字稿不允许将变量作为值放入样式化数组

Question

我在使用 TypeScript 和 Emotion.css 时遇到了一个奇怪的问题

这段代码工作正常：

import styled from '@emotion/styled-base';
const Layout = styled('div')([
    {
        height: 48,
        color: 'white',
        background: Brand01,
        width: 142,
        padding: '12px 16px',
        textAlign: 'center'
    },
    {
        fontStyle: 'normal',
        fontWeight: 'normal',
        fontSize: '14px',
        lineHeight: '23px'
    }
]);

但是关于这个：

const b = {
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontSize: '14px',
    lineHeight: '23px'
};
const Layout = styled('div')([
    {
        height: 48,
        color: 'white',
        background: Brand01,
        width: 142,
        padding: '12px 16px',
        textAlign: 'center'
    },
    b
]);

Typescript 抛出这样的错误：

ERROR in [at-loader] ./src/components/buttons/Button.tsx:13:2 
    TS2322: Type '{ height: number; color: string; background: string; width: number; padding: string; textAlign: string; }' is not assignable to type 'string'.

ERROR in [at-loader] ./src/components/buttons/Button.tsx:21:2 
    TS2322: Type '{ fontStyle: string; fontWeight: string; fontSize: string; lineHeight: string; }' is not assignable to type 'string'.

ERROR in /frontend/src/components/buttons/Button.tsx
Type error: Type '{ height: number; color: string; background: string; width: number; padding: string; textAlign: string; }' is not assignable to type 'string'.  TS2322

    11 | };
    12 | const Layout = styled('div')([
  > 13 |        {
       |        ^
    14 |                height: 48,
    15 |                color: 'white',
    16 |                background: Brand01,

ERROR in ./src/components/buttons/Button.tsx
Type error: Type '{ fontStyle: string; fontWeight: string; fontSize: string; lineHeight: string; }' is not assignable to type 'string'.  TS2322

    19 |                textAlign: 'center'
    20 |        },
  > 21 |        b
       |        ^
    22 | ]);

我不明白，为什么变量应该是 assignable to type 'string' 而普通对象不应该？）

感谢您的帮助

TypeScript: 3.3.3
Emotion: 10.0.7
React: 16.8

P.S。 Whosebug 不允许我在没有关于问题的附加信息的情况下提出这个问题，因为我在这里放了太多代码。但是我觉得代码很清楚地解释了我的问题，所以我写了这一段来通过验证:)

Answer 1

不同之处在于，在失败的情况下，b 的类型在传递给 styled 函数之前被推断出来，而当它作为函数参数直接传递时，其类型可以是推断正确。

这在 this issue

中有详细介绍

建议的解决方案是注释您的对象声明：

import styled, { CSSObject } from '@emotion/styled';

const b: CSSObject = {
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontSize: '14px',
    lineHeight: '23px'
};

打字稿不允许将变量作为值放入样式化数组

Typescript dose not allow to put a variable as a value to styled array

emotion

typescript

reactjs