如何为styled-components@2.4.0扩展组件编写TypeScript@2.8.1类型？

我帮你把代码整理成规范格式，同时保留你通过.extend()复用基础组件、减少重复代码的核心思路：

export interface Aprops { 
  icon?: string; 
} 

export const A = styled<Aprops, 'div'>('div')`
  padding: ${(props) => (props.icon ? '10px' : '4px')};
`;

export interface Bprops { 
  darkBackground?: boolean; 
} 

export const B = A.extend`
  background-color: ${(props) => (props.darkBackground ? '#333' : '#fff')};
  // 这里可以继续添加B组件独有的样式规则
`;

补充说明 #

• 组件A通过TypeScript泛型明确了props类型Aprops和渲染的元素类型div，实现了根据icon参数动态调整内边距的逻辑
• 组件B借助.extend()方法完全继承了A的样式和props，同时新增了darkBackground参数来控制背景色，既复用了基础逻辑，又能灵活扩展新功能

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