javascript - React Typescript typer en void-funksjon

Hvorfor får man ikke en feil etter å ha skrevet en funksjon som ikke skal returnere noe, og deretter aksessert props.onClick inne i Message-komponenten som returnerer en verdi?

type MessageProps = {
  onClick: () => void,
  value?: string
}

const Message: React.FunctionComponent<MessageProps> = (props: any) => {
  return (
    <>
      <h1>Example message</h1>
      <button onClick={props.onClick}>click</button>
    </>
  )
}

const App = (props: any) => {
  return (
    <div className="App">
      <Message onClick={() => 2} />
    </div>
  );
}

export default App;

Svar #1

I bunn og grunn spør du om hvorfor denne tilordningen ikke resulterer i en feil:

type VF = () => void;

const f: VF = () => 2;

(lekeplass)

Det er fordi en funksjonstype med returtype void ikke krever at funksjonen som tildeles, ikke returnerer noe. Fra dokumentasjonen:

Returtype void

Tilbakevendingsverdien void for funksjoner kan gi noen uvanlige, men forventede oppførsel.

Kontekstuell typing med en returtype på void tvinger ikke funksjoner til å ikke returnere noe. En annen måte å si dette på er at en kontekstuell funksjonstype med en void-returtype (type vf =() => void), når den implementeres, kan returnere en hvilken som helst annen verdi, men den vil bli ignorert.

(deres vektlegging)

Hvis du tenker på det, gir det mening, siden alle JavaScript-funksjoner returnerer noe — hvis det ikke finnes en eksplisitt return, eller det er en return; uten verdi, er returverdien undefined.

function a() { }
function b() { return; }
console.log("a", a());
console.log("b", b());

(Jeg tror det er dekket her [for a] og her [for b] i JavaScript-spesifikasjonen, bare for det det er verdt.)

Relaterte artikler