TypeScript 中引入Storybook时styled-components css prop类型冲突报错问题

在TypeScript项目中配置styled-components的css prop启用规则时，只要引入间接依赖@emotion/core的Storybook相关内容，就会触发类型校验报错。

冲突根因：@emotion/core的类型声明中定义了Emotion自身的css prop类型，与styled-components的css prop类型不兼容，最终触发类型检查失败。

开发者已经掌握TypeScript环境下启用styled-components css prop的各类标准推荐配置方案，也参考过同类Storybook与styled-components类型冲突的社区适配方案，编写了对应的类型声明文件，但问题始终没有得到解决。

1. 业务入口代码index.tsx #

import React from 'react'
import { css } from 'styled-components'

export default function App() {
  return (
    <h1
      css={css`
        color: red;
      `}
    >
      Hello world!
    </h1>
  )
}

2. 自定义全局类型声明文件styled-components.d.ts #

import { CSSProp } from "styled-components";

declare module 'react' {
  interface DOMAttributes<T> {
    css?: CSSProp
  }
}
declare global {
  namespace JSX {
    interface IntrinsicAttributes {
      css?: CSSProp
    }
  }
}

• 上述配置在未引入Storybook模块时运行完全正常*

3. 冲突触发条件 #

只要在代码中引入来自Storybook的内容（这类依赖会间接引入@emotion/core），例如导入storiesOf模块：

import { storiesOf } from '@storybook/react'

TypeScript校验就会抛出两类明确报错：

• TS2322错误：传入的FlattenSimpleInterpolation类型无法赋值给@emotion/core定义的InterpolationWithTheme<any>类型，存在多层类型结构不兼容问题，预期的css属性类型来自@emotion/core的类型声明文件
• TS2717错误：自定义扩展中定义的css属性类型与@emotion/core预先声明的css属性类型不一致，分别在react模块DOMAttributes扩展、全局JSXIntrinsicAttributes扩展两处都出现了同属性重复声明、类型不匹配的冲突

目前已经搭建了可完整还原触发场景的可复现环境，寻求可落地的可行解决方案。

内容的提问来源于stack exchange，提问作者silvenon