使用带有 typescript 的 injectGlobal 样式组件 API答案

【问题标题】：Using injectGlobal styled-components API with typescript使用带有 typescript 的 injectGlobal 样式组件 API
【发布时间】：2019-02-23 06:44:10
【问题描述】：

我正在尝试使用简单的 injectGlobal API，但无法使其与 typescript 一起使用。我在 theme.tsx 中有以下设置

import * as styledComponents from "styled-components";
import { ThemedStyledComponentsModule } from "styled-components";
import IThemeInterface from "./theme";
const {
  default: styled,
  css,
  injectGlobal,
  keyframes,
  ThemeProvider
} = styledComponents as ThemedStyledComponentsModule<IThemeInterface>;
export default styled;
export { css, injectGlobal, keyframes, ThemeProvider };

在我的 App.tsx 中我只是这样做

import { injectGlobal} from '../theme.tsx'

尝试正常使用却总是出现如下错误

unused expression, expected an assignment or function call

寻求任何建议！

【问题讨论】：

报错的代码是哪一行？
@MattMcCutchen 错误出现在我打电话给injectGlobal` * { margin: 0; padding: 0; } `;
附注给来自未来的任何其他读者：injectGlobal 在 V4 中发布此帖子三周后是 deprecated，并被 createGlobalStyle 取代

标签： reactjs typescript styled-components

【解决方案1】：

看起来这个错误来自tslint no-unused-expression rule。您可以通过在tslint.conf 中添加allow-tagged-template 选项来免除对模板标签（如injectGlobal）的调用，如下所示：

{
    "rules": {
        "no-unused-expression": [true, "allow-tagged-template"]
        // ...
    }
}

【讨论】：

谢谢，试试看！