Using TypeScript with styled-components 4.1.1 for attrs and styled

styled-components-typescript-samples.tsx

import styled from 'styled-components'; // 4.1.1
import * as React from "react";

type SizeProp = { size: number };
const A = styled.div<SizeProp>`
  height: ${props => props.size}px;
`;

const Ac = () => <A size={99} />;


// extending - note it has inherited A's SizeProps, so no type annotation needed
const B = styled(A)`
  width: ${props => props.size}px;
`;

const Bc = () => <A size={99}/>;

// use in attrs but not CSS body - per prop function style
const C = styled.div.attrs<SizeProp>({
    title: (props:SizeProp) => `this is ${props.size}`
})`
  width: 33px;
`;

// use in attrs but not CSS body - attrs as single function
const C2 = styled.div.attrs<SizeProp>(props => ({
    title: `this is ${props.size}`
}))`
  width: 33px;
`;

// use in attrs AND CSS body - per prop function style
const D = styled.div.attrs<SizeProp>({
    title: (props:SizeProp) => `this is ${props.size}`
})<SizeProp>`
  width: ${props => props.size}px;
`;