Esta es la forma de declarar tipos de funciones dentro de interfaces de Typescript. Escribió este artículo debido a la información confusa que hay y la documentación de Typescript no es directa sobre la sintaxis.
(Tenga en cuenta que los siguientes ejemplos usan clases de Typescript React solo como ejemplos porque los tipos de funciones son particularmente útiles allí, pero la sintaxis se aplica a cualquier interfaz de Typescript.)
Ejemplo 1: Función que no toma argumentos y no devuelve un valor:
En el ejemplo siguienteonChange es la declaración de función. La función no devuelve nada (void), por lo que declaramos el tipo devuelto como cualquiera. Esto se debe a que los vacíos y nunca se evalúan de manera diferente en contextos diferentes (más allá del alcance de este artículo). (A continuación se muestran algunos ejemplos de valores de retorno escritos.)
interface MyClassProps {
someProp: string;
onChange(): any;
}class MyClass extends React.Component<MyClassProps, MyClassState> ...
Ejemplo 2: Función que acepta un argumento:
Incluye el nombre del argumento y su tipo. El nombre del argumento es obligatorio, pero no tiene que coincidir cuando instancies la función real, pero el tipo tiene que coincidir. Está tipeado como pato, como todo en Typescript.
interface MyClassProps {
anotherProp: number;
onChange(name: string): any;
}
Ejemplo 3: Función que acepta un argumento y devuelve un valor:
Esta función acepta una cadena como argumento y devuelve un número.
interface MyClassProps {
onChange(name: string): number;
}
Ejemplo 4: Función que es opcional:
Sufijo en el nombre de la propiedad Opcional con el Operador ?. Coloque el ? después del nombre de la propiedad y antes de la lista de argumentos. En TypeScript React se requieren todos los accesorios a menos que utilice el Operador Opcional. Al igual que con cualquier accesorio no requerido en React, tendrá que verificar si el accesorio es undefinedantes de usarlo.
interface MyClassProps {
onChange?(name: string): number;
niceProp: boolean;
}
Ejemplo 5: Usando la palabra clave type:
A veces es conveniente declarar el tipo de la función primero, luego usar el tipo en una interfaz. Para declarar una función como tipo, la sintaxis es ligeramente diferente. Utilice el operador de flecha.
type MyFunctionType = (name: string) => number;interface MyClassProps {
onChange: MyFunctionType;
niceProp: string;
}
Disfrute.