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

但是我无法弄清楚{...props]中export default function Input({flex, theme, ...props}:{flex:string, theme}) {的类型以及如何编写

Answer 1

我认为这应该可以完成工作：

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

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

样式输入组件的打字稿道具类型

1 个答案: