なつねこメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ﾉ

カテゴリー一覧
このサイトについて
検索

2019/09/15

styled-components で定義したコンポーネントから Props を取り出したい

カテゴリー：

TypeScript

例えば下のようなコンポーネントがあって、

import colors from "colors.css";
import styled from "styled-components";
 
type Props = {
  primary?: boolean;
};
 
const Button = styled.button<Props>`
  border: 1px solid ${(props) => (props.primary ? colors.blue : colors.silver)};
`;
 
export default Button;

何らかの理由で import Button from "./Button" とした状態で Props を得たい場合の型定義。

export type ExtractProps<T> = T extends StyledComponent<
  any,
  any,
  infer R,
  never
>
  ? R
  : unknown;

いちおうこれで取り出せたのでメモ。