Ecco come dichiarare i tipi di funzione all’interno delle interfacce Typescript. Ha scritto questo articolo a causa di informazioni confuse là fuori e la documentazione dattiloscritta non è diretta sulla sintassi.
(Nota, i seguenti esempi usano le classi Typescript React solo come esempi perché i tipi di funzioni sono particolarmente utili lì, ma la sintassi si applica a qualsiasi interfaccia Typescript.)
Esempio 1: Funzione che non accetta argomenti e non restituisce un valore:
Nell’esempio seguenteonChange è la dichiarazione della funzione. La funzione restituisce nulla (void) quindi dichiariamo il tipo di ritorno come qualsiasi. Questo perché void e never sono valutati in modo diverso in contesti diversi (oltre lo scopo di questo articolo). (Di seguito sono riportati alcuni esempi di valori di ritorno digitati.)
interface MyClassProps {
someProp: string;
onChange(): any;
}class MyClass extends React.Component<MyClassProps, MyClassState> ...
Esempio 2: Funzione che accetta un argomento:
Include il nome dell’argomento e il suo tipo. Il nome dell’argomento è richiesto ma non deve corrispondere quando si crea un’istanza della funzione reale, ma il tipo deve corrispondere. E ‘ anatra digitato come è tutto in dattiloscritto.
interface MyClassProps {
anotherProp: number;
onChange(name: string): any;
}
Esempio 3: Funzione che accetta un argomento e restituisce un valore:
Questa funzione accetta una stringa come argomento e restituisce un numero.
interface MyClassProps {
onChange(name: string): number;
}
Esempio 4: Funzione facoltativa:
Suffisso il nome della proprietà con l’operatore opzionale ?. Inserire ? dopo il nome della proprietà e prima dell’elenco degli argomenti. In TypeScript React sono necessari tutti gli oggetti di scena a meno che non si utilizzi l’operatore opzionale. Come con qualsiasi prop non richiesto in React, dovrai verificare se il prop èundefinedprima di usarlo.
interface MyClassProps {
onChange?(name: string): number;
niceProp: boolean;
}
Esempio 5: Utilizzando la parola chiave type:
A volte è conveniente dichiarare prima il tipo della funzione, quindi utilizzare il tipo in un’interfaccia. Per dichiarare una funzione come tipo la sintassi è leggermente diversa. Utilizzare l’operatore freccia.
type MyFunctionType = (name: string) => number;interface MyClassProps {
onChange: MyFunctionType;
niceProp: string;
}
Buon divertimento.