タイプスクリプトでstyled-conents Propタイプを指定する

TLDR;

const Component = styled<ComponentType<Prop>>(BaseComponent)` ... `

テンプレートタイプが複雑すぎる!

// Block.tsx

import styled from 'styled-components'
import Block as BaseBlock from '../Block'

interface BlockProps {
  size: 100 | 200 | 300;
  ...
}

const Block = styled(BaseBlock)<BlockProps>`
  ${(props) => {
    props.si... // 자동 완성이 잘 된다!
  }}
`

export default Block;

// SomeOther.tsx

import Block from './Block'

...
  <Block si... ? > // 자동 완성이 안 된다?

<U extends object>(
  first:
  | TemplateStringsArray
  | CSSObject
  | InterpolationFunction<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>,
  ...rest: Array<Interpolation<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>>
): StyledComponent<C, T, O & U, A>;

const Block = styled(Block)<BlockProp>
// == ThemedStyledFunction 타입
// == ThemedStyledFunctionBase 타입


const Block = styled(Block)<BlockProp>` ... `
// == ThemedStyledFunctionBase
// == ThemedStyledFunctionBase 타입의 Tagged Function을 실행한 "리턴 값"의 타입
// == StyledComponent 타입

export type StyledComponentProps<
    // The Component from whose props are derived
    C extends string | React.ComponentType<any>,
    // The Theme from the current context
    T extends object,
    // The other props added by the template
    O extends object,
    // The props that are made optional by .attrs
    A extends keyof any,
    // The Component passed with "forwardedAs" prop
    FAsC extends string | React.ComponentType<any> = C
> =
    // Distribute O if O is a union type
    O extends object
        ? WithOptionalTheme<
              MakeAttrsOptional<C, O, A> & MakeAttrsOptional<FAsC, O, A>,
              T
          >
        : never;

import styled from 'styled-components'
import Block as BaseBlock from '../Block'

const Block = styled<BlockProp>(Block)` ... `