Voici comment déclarer les types de fonctions dans les interfaces Typescript. A écrit cet article en raison d’informations confuses et de la documentation Typescript n’est pas directe sur la syntaxe.
(Notez que les exemples suivants n’utilisent que les classes de réaction Typescript comme exemples car les types de fonctions y sont particulièrement utiles, mais la syntaxe s’applique à toute interface Typescript.)
Exemple 1 : Fonction qui ne prend pas d’arguments et ne renvoie pas de valeur :
Dans l’exemple ci-dessous onChange est la déclaration de fonction. La fonction ne renvoie rien (void), nous déclarons donc le type de retour comme any. En effet, nul et jamais sont évalués différemment dans différents contextes (au-delà de la portée de cet article). (Voici quelques exemples de valeurs de retour typées.)
interface MyClassProps {
someProp: string;
onChange(): any;
}class MyClass extends React.Component<MyClassProps, MyClassState> ...
Exemple 2 : Fonction qui accepte un argument :
Incluez le nom de l’argument et son type. Le nom de l’argument est requis mais ne doit pas correspondre lorsque vous instanciez la fonction réelle, mais le type doit correspondre. C’est duck tapé comme tout en Typescript.
interface MyClassProps {
anotherProp: number;
onChange(name: string): any;
}
Exemple 3: Fonction qui accepte un argument et renvoie une valeur :
Cette fonction accepte une chaîne comme argument et renvoie un nombre.
interface MyClassProps {
onChange(name: string): number;
}
Exemple 4 : Fonction optionnelle :
Suffixe le nom de la propriété avec l’opérateur optionnel ?. Placez le ? après le nom de la propriété et avant la liste des arguments. Dans TypeScript React, tous les accessoires sont requis, sauf si vous utilisez l’opérateur facultatif. Comme pour tout accessoire non requis dans React, vous devrez vérifier si l’accessoire est undefined avant de l’utiliser.
interface MyClassProps {
onChange?(name: string): number;
niceProp: boolean;
}
Exemple 5: Utilisation du mot-clé type:
Il est parfois pratique de déclarer d’abord le type de la fonction, puis d’utiliser le type dans une interface. Pour déclarer une fonction en tant que type, la syntaxe est légèrement différente. Utilisez l’opérateur de flèche.
type MyFunctionType = (name: string) => number;interface MyClassProps {
onChange: MyFunctionType;
niceProp: string;
}
Profitez-en.