typescript props type for styled input component

Question

i am new to TS and I have been asked to move existing JS code base to ts. I have styled component which looks like this (style.js)

import styled from "styled-components";

export const Container = styled.div`
  ${({ flex }) => flex && `flex: ${flex};`}
  ${({ flex }) => flex && `display: flex;`}
  flex-direction: column;
`;

export const Label = styled.label`
  display: inline-block;
  color: #95aac9;
  font-size: 12px;
`;

export const DefaultInput = styled.input`
  border: 1px solid #dfe0eb;
  background-color: transparent;
  padding: 10px 12px;
  border-radius: 4px;
  height: 35px;
  color: #888888;
  font-weight: 500;

  &:focus {
    outline: none;
  }
`;

export const GrayInput = styled.input`
  border: none;
  background-color: #ebf2fb;
  border: 1px solid #e1e9f5;
  border-radius: 5px;
  padding: 5px 10px;

  &:focus {
    outline: none;
  }
`;

I was writting types for the file where I am importing this

import React from "react";
import Label from "components/atoms/Label";
import { DefaultInput, GrayInput, NormalInput, Container } from "./styles";

export default function Input({flex, theme, ...props}:{flex:string, theme}) {
  return (
    <Container flex={props.flex}>
      {props.label && <Label>{props.label}</Label>}
      {(!props.theme || props.theme === "light") && <DefaultInput {...props} />}
      {props.theme === "gray" && <GrayInput {...props} />}
      {props.theme === "normal" && <NormalInput {...props} />}
    </Container>
  );
}

but I can't figure the type for the {...props] in export default function Input({flex, theme, ...props}:{flex:string, theme}) { and how to write it

Answer 1

I think this should do the work:

export default function Input({flex, theme, ...props}:{flex:string; theme: string; [rest: string]: any })

You should also use flex and theme variables directly instead of props.flex and props.theme, because you already destructured them from the passed object (props) and therefore they are not available(defined) there anymore.