Машинописная доза не позволяет поместить переменную в качестве значения в стилизованный массив - PullRequest
Новая
       10

Машинописная доза не позволяет поместить переменную в качестве значения в стилизованный массив

1 голос
/ 19 июня 2019

У меня странная проблема с 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

PS Доза Stackoverflow не позволяет мне поставить этот вопрос без дополнительной информации о вопросе, потому что слишком много кода я поместил здесь.Но я думаю, что код очень четко объяснил мой вопрос, поэтому я написал этот абзац для прохождения проверки:)

1 Ответ

2 голосов
/ 19 июня 2019

Разница в том, что в случае сбоя тип b выводится до того, как он передается функции styled, тогда как при передаче непосредственно в качестве аргумента функции его тип может быть выведен правильно.

Это подробно описано в этом выпуске

Предлагаемое решение - аннотировать объявления объектов: 

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

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