how to declare custom.d.ts to my customized stylecomponent?

Question

my component code is:

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;
`;

usage

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

typescript complain about my props color, fontSize and fw, how correct this?

Answer 1

You should define type for your 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;
`;