typescript 样式输入组件的道具类型

Question

我是 TS 的新手，我被要求将现有的 JS 代码库移动到 ts。 我有样式组件，看起来像这样（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;
  }
`;

我正在为要导入的文件编写类型

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>
  );
}

但我无法确定export default function Input({flex, theme, ...props}:{flex:string, theme}) { {...props]的类型以及如何编写它

Answer 1

我认为这应该做的工作：

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

您还应该直接使用 flex 和主题变量而不是 props.flex 和 props.theme，因为您已经从传递的 object（道具）中解构了它们，因此它们不再可用（定义）在那里。