Javascript 在react道具上键入恼人的警告

一旦我开始在

React

中使用

Typescript

，我注意到一件我不喜欢的事情，那就是需要将每个道具声明到组件。在此之前，我们可以使用

{…props}

，但现在我必须在接口中声明每个本机

props

，如

ref

，

占位符

，

默认值

等

interface InputProps {
  customProp: boolean;
  props: any;
}

const Input = ({ customProp, placeholder, ...props }: InputProps) => { 
  //warning 
  return <input type="text" {...props} />;
};

接口输入属性{
customProp：布尔型；
道具：任何；
}
常量输入=（{customProp，占位符，…props}:InputProps）=>{
//警告
返回；
};

我想享受过去的日子，我只需要在界面中声明非本机道具，可能吗？本机props已通过{…props}

import*作为React from“React”传递；
import * as React from "react";
import "./styles.css";

interface InputProps {
  customProp: boolean;
  // props: any; // I think it doesn't need to you.
  [key:string]: any;
}

const Input = ({ customProp, placeholder, ...props }: InputProps) => {
  return <input type="text" {...props} />;
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <Input hello="hello" customProp={false} placeholder={"name"} />
    </div>
  );
}

导入“/styles.css”；
接口输入道具{
customProp：布尔型；
//道具：任何；//我想它不需要你。
[键：字符串]：任意；
}
常量输入=（{customProp，占位符，…props}:InputProps）=>{
返回；
};
导出默认函数App（）{
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}

您可以使用

[key:string]：any

享受过去的时光

但是，我不建议使用

[key:string]：any

因为它对

typescript

没有意义

而且，在我看来，如果你用

typescript

感到压力，你可以用

js

来代替； 导入“/styles.css”； 接口输入道具{ customProp：布尔型； //道具：任何；//我想它不需要你。 [键：字符串]：任意； } 常量输入=（{customProp，占位符，…props}:InputProps）=>{ 返回； }; 导出默认函数App（）{ 返回( 你好，代码沙盒 开始编辑，看看神奇的发生！ ); } 您可以使用

[key:string]：any

享受过去的时光

但是，我不建议使用

[key:string]：any

因为它对

typescript

没有意义

---

而且，在我看来，如果你对

typescript

感到压力，你可以用

js

来代替。

如果你使用typescript，最好的做法是为每个组件严格定义道具的接口/类型别名。对于

Input

组件，正确的接口是

interface InputProps {
  customProp: boolean;
  placeholder: string;
  // add other props below
}

也就是说，可以导出、共享和扩展接口和类型别名，从而减少重复代码的数量。比如说,

interface OtherInputProps extends InputProps {
  value: string;
}

当然，您可以执行类似于

[key:string]：any

的操作，但这将完全违背使用TypeScript的目的，因为您实际上忽略了TypeScript的类型检查功能。在这种情况下，t将不再那么冗长，而是恢复为JavaScript

---

编辑：刚刚意识到OP正试图用额外的道具扩展输入道具。在这种情况下，要使用的正确基类型将是'React.inputtmlattributes:

export interface InputProps extends React.InputHTMLAttributes< HTMLInputElement> {
  customProp: boolean;
}

导出接口InputProps扩展React.inputtmlattributes{
customProp：布尔型；
}

或

type InputProps=React.inputtmlattributes&{
customProp：布尔型；
}

如果您使用的是TypeScript，最好的做法是为每个组件严格定义道具的接口/类型别名。对于

Input

组件，正确的接口是

interface InputProps {
  customProp: boolean;
  placeholder: string;
  // add other props below
}

也就是说，可以导出、共享和扩展接口和类型别名，从而减少重复代码的数量。比如说,

interface OtherInputProps extends InputProps {
  value: string;
}

当然，您可以执行类似于

[key:string]：any

的操作，但这将完全违背使用TypeScript的目的，因为您实际上忽略了TypeScript的类型检查功能。在这种情况下，t将不再那么冗长，而是恢复为JavaScript

---

编辑：刚刚意识到OP正试图用额外的道具扩展输入道具。在这种情况下，要使用的正确基类型将是'React.inputtmlattributes:

export interface InputProps extends React.InputHTMLAttributes< HTMLInputElement> {
  customProp: boolean;
}

导出接口InputProps扩展React.inputtmlattributes{
customProp：布尔型；
}

或

type InputProps=React.inputtmlattributes&{
customProp：布尔型；
}

我想享受过去的日子，我只需要在界面中声明非本机道具，可能吗

是的，有可能。Typescript允许接口从其他接口扩展，因此您可以将接口定义为具有输入元素所期望的所有内容，以及自定义道具：

export interface ExampleProps extends React.HTMLProps<HTMLInputElement> {
  customProp: boolean;
}

const Example: React.FC<ExampleProps> = ({ customProp, placeholder, ...rest }) => {
  const { t } = useTranslation();
  return <input type="text" {...rest} />;
};

导出接口ExampleProps扩展React.HTMLProps{
customProp：布尔型；
}
常量示例：React.FC=（{customProp，placeholder，…rest}）=>{
const{t}=useTranslation（）；
返回；
};

根据此定义，我可以尝试呈现以下内容：

const Thing: FC = () => {
  return <Example placeholder="foo" customProp={true} defaultValue="3" />;
};

const Thing:FC=（）=>{
返回；
};

但typescript会指出，如果，例如，我没有传递自定义道具，或者如果我传递了一个对象给海报持有者

我想享受过去的日子，我只需要在界面中声明非本机道具，可能吗

是的，有可能。Typescript允许接口从其他接口扩展，因此您可以将接口定义为具有输入元素所期望的所有内容，以及自定义道具：

export interface ExampleProps extends React.HTMLProps<HTMLInputElement> {
  customProp: boolean;
}

const Example: React.FC<ExampleProps> = ({ customProp, placeholder, ...rest }) => {
  const { t } = useTranslation();
  return <input type="text" {...rest} />;
};

导出接口ExampleProps扩展React.HTMLProps{
customProp：布尔型；
}
常量示例：React.FC=（{customProp，placeholder，…rest}）=>{
const{t}=useTranslation（）；
返回；
};

根据此定义，我可以尝试呈现以下内容：

const Thing: FC = () => {
  return <Example placeholder="foo" customProp={true} defaultValue="3" />;
};

const Thing:FC=（）=>{
返回；
};

---

但typescript会指出，例如，如果我没有通过自定义道具，或者如果我为海报持有者传递了一个对象。

Hmm。。是的，这是意料之中的。那么你的问题是什么呢？@wentjun up