没有重载匹配此调用。在打字稿反应答案

【问题标题】：No overload matches this call. in typescript React没有重载匹配此调用。在打字稿反应
【发布时间】：2021-05-10 13:07:01
【问题描述】：

我在 React 中编写了以下组件，但出现错误。非常感谢帮助。

主要成分：

export interface ICode {
code: (code: string) => void;

} 导出默认类 UserCode 扩展 React.Component{

state = {
    formFile: File,
    code: ""
}
//single
fileSelected(e: React.ChangeEvent<HTMLInputElement>) {
    var file = e.target.files;
    console.log(file);
    if (e.target.files)
        this.setState(
            { formFile: e.target.files[0] }
        )
}
aaa() {
    let value = (document.getElementsByClassName("user-code")[0] as HTMLInputElement).innerText;
    alert(value);
    console.log(value);
    return value;

}
updateCodeInFather() {
    this.props.code(this.state.code);
}
render() {
    return (
        <div>
            {/* <h6>Write your code here</h6> */}
            <Editor className="user-code"
                value={this.state.code}
                onChange={code => { this.setState({ code }); this.updateCodeInFather(); }}
                defaultLanguage="cpp"
                width={590}
                height={325}
                defaultValue={"void setup()\n{\n// put your setup code here, to run once:\n}\nvoid loop()\n{\n// put your main code here, to run repeatedly:\n}"}
            />
            <div>
                <input placeholder="browse" name="browse" id="browse" type="file" onChange={(e) => this.fileSelected(e)} accept=".txt, .ino" ></input>

            </div>

        </div>
    );
}

import Editor from './TagLanguage/Editor'
ReactDOM.render(
  <React.StrictMode>
    {
      <Editor></Editor>
    }
  </React.StrictMode>,
  document.getElementById('root')
);

出现错误：没有重载匹配此调用。 Overload 1 of 2, '(props: Readonly): UserCode', 给出了以下错误。 “{}”类型中缺少属性“代码”，但在“只读”类型中是必需的。 Overload 2 of 2, '(props: ICode, context?: any): UserCode'，给出了以下错误。 “{}”类型中缺少属性“代码”，但在“只读”类型中是必需的。

【问题讨论】：

标签： reactjs typescript overloading

【解决方案1】：

需要更清楚地了解您希望如何使用 ICode。如果你希望 props 和 state 都有这个接口，可以考虑这样声明 Component：

export default class UserCode extends React.Component<ICode,ICode>

如果你只希望道具有这个界面：

 export default class UserCode extends React.Component<ICode,{}>

【讨论】：