作為 prop 傳入的 function 的 React 組件拋出 TypeScript 錯誤

Question

我有一個基於 Class 的 React 組件，它接受 function 作為道具。

該組件最初是一個無狀態功能組件，它接受相同的 function 而沒有任何 TypeScript 錯誤。

現在我已經將它轉換為 class 組件，當我調用 function 時出現錯誤： Property 'onRouteChange' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>' Property 'onRouteChange' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'

以及當我在 props 中對其進行解構時出現的錯誤： Property 'onRouteChange' is missing in type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>' but required in type '{ onRouteChange: any; }'. Property 'onRouteChange' is missing in type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>' but required in type '{ onRouteChange: any; }'.

我最初嘗試在文件頂部的類型聲明中定義它，但這也不起作用。

Component

type SignInState = {
  signInEmail: string,
  signInPassword: string
}

class SignIn extends Component<{}, SignInState> {
  constructor(props: {}){
    super(props);
    this.state = {
      signInEmail: '',
      signInPassword: ''
    }
  }

  onEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      this.setState({ signInEmail: e.target.value })
  }

  onPasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    this.setState({ signInPassword: e.target.value })
  }

  onSubmitSignIn = () => {
    // fetch()
    console.log(this.state);
// TS Error: Property 'onRouteChange' does not exist
    this.props.onRouteChange('home');
  }
  
  render() {
// TS Error: Property 'onRouteChange' is missing in type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>' 
    const { onRouteChange } : { onRouteChange: any} = this.props

    return (
      <Container>
        <Main>
          <Form>
            <Fieldset>
              <SignInTitle>Sign In</SignInTitle>
              <EmailAddressSection>
                <Label>Email</Label>
                <EmailInput />
              </EmailAddressSection>
              <PasswordSection>
                <Label>Password</Label>
                <PasswordInput />
              </PasswordSection>
            </Fieldset>
            <div>
              <SignInButton
                onClick={this.onSubmitSignIn}
                type="submit"
                value="Sign in"
              />
            </div>
            <AccountOptionsSection>
              <AccountOption onClick={() => onRouteChange("register")}>
                Register
              </AccountOption>
            </AccountOptionsSection>
          </Form>
        </Main>
      </Container>
    );
  }
};

export default SignIn;

Answer 1

class SignIn extends Component<{}, SignInState> 

Component 類型的第一個參數是 props 類型，你沒有定義它，因此錯誤。

定義一個接口，

interface ISignInProp {

onRouteChange:any
}

並將其傳遞給您的組件

class SignIn extends Component<ISignInProp , SignInState> 

Answer 2

為您的道具創建一個type或interface ，就像您對 state 所做的那樣。

道具界面

// interface over type literal
interface IProps { 
 onRouteChange: (param: string) => void
}

避免鍵入any

盡量避免向any鍵入內容。 您基本上是在告訴 typescript 這沒有類型。 這違背了 TS 的目的。 如果您確實不知道，請輸入unknown 。

但是，您正在傳遞一個string回家，所以您有一些關於它的信息可以用來更好地輸入它。

在這里，我猜測onRouteChange是一個 function，它接受一個字符串類型的參數並且不返回任何內容（產生副作用）。 您可以相應地更新它。

輸入你的組件道具

您所做的與您對 state 類型所做的完全相同（更喜歡接口而不是類型）。

class SignIn extends Component<IProps, IState>

現在，您不必在解構它時鍵入onRouteChange 。

const { onRouteChange } : { onRouteChange: any} = this.props

成為

const { onRouteChange } = this.props