如何向我的自定义样式组件声明custom.d.ts？

Question

我的组件代码是：

    import styled from "styled-components/native";

export const GlobalButton = styled.TouchableOpacity`

  border-radius: 10px;
  background-color: ${ props => props['bc'] ?  props['bc'] :  '#2962ff;'} ; 
  width: ${ props => props['width'] ?  props['width'] +  'px;' : '250px;'}  ;
  height: ${ props => props['height'] ? props['height']  + 'px;' : '35px;'}  ;
  margin-top: 10px;
  align-items: center;
  justify-content: center;




`;

用法

              <GlobalButton  width={340} onPress={handleConfirm}>
                <GradientButton>
                  <GlobalText color="#FFFF" fontSize={18} fw={340}>
                    Confirmar
                  </GlobalText>
                </GradientButton>
              </GlobalButton>

typescript 抱怨我的道具颜色、字体大小和固件，如何纠正？

Answer 1

您应该为您的

GlobalButton

定义类型：

import styled from "styled-components/native";

export const GlobalButton = styled.TouchableOpacity< color?: string; fontSize?: number; fw?: number >`
  border-radius: 10px;
  background-color: ${(props) => (props["bc"] ? props["bc"] : "#2962ff;")};
  width: ${(props) => (props["width"] ? props["width"] + "px;" : "250px;")};
  height: ${(props) => (props["height"] ? props["height"] + "px;" : "35px;")};
  margin-top: 10px;
  align-items: center;
  justify-content: center;
`;