styled-components の theme型定義

styled-components の theme、使っていますか？styled-components には、ThemeProviderという、装飾などに関する規定値を提供する仕組みがあります。この様な構成になっているとします（通常 ThemeProvider は SPA ルーティングの上あたりに位置しますが、説明のため簡易な構成としています）

const Component: React.FC = () => (
  <ThemeProvider theme={theme}>
    <RedButton>RedButton</RedButton>
    <GreenButton>GreenButton</GreenButton>
    <BlueButton>BlueButton</BlueButton>
  </ThemeProvider>
)

ThemeProvider に渡している theme は次の様なものです。

export const theme = {
  colors: {
    red: '#f00',
    green: '#0f0',
    blue: '#00f'
  },
  layout: {
    width: 960
  }
} as const

theme は、styled-components コンストラクタ（styled(...)） にラップされた Component props に注入され、Template リテラルから参照するのが通常です。次の例は、Generics どころか型情報もありません。それにも関わらず、この参照props.theme.colors.blueにはキッチリ型推論が効いています。いったいどこから提供されたものでしょうか？

BlueButton.tsx

const StyledComponent = styled(Component)`
  background-color: ${props => props.theme.colors.blue}; /* (property) blue: "#00f" */
`

DefaultTheme 型を宣言結合拡張する

@types/styled-components を確認しましょう（v4.4.2）。DefaultThemeという型定義があります。これは先日の投稿と同じ仕組みを使った、型定義の注入テクニックです。DefaultTheme として用意された空っぽの interface に対し、宣言結合拡張することで、プロジェクト固有の型定義を注入することが出来ます。

import 'styled-components'
// ______________________________________________________
//
export const theme = {
  colors: {
    red: '#f00',
    green: '#0f0',
    blue: '#00f'
  },
  layout: {
    width: 960
  }
} as const
// ______________________________________________________
//
type AppTheme = typeof theme
// ______________________________________________________
//
declare module 'styled-components' {
  interface DefaultTheme extends AppTheme {}
}

今のところ私は遭遇したことがありませんが、ThemeProvider が複数ある場合は、この手法は使えません。ここで紹介した内容は以下のリポジトリで確認できます。