This is how to declare function TypeScript interfaces. Escreveu este artigo por causa de informações confusas lá fora e documentação Typescript não é direta sobre a sintaxe.
(Nota, os seguintes exemplos usam classes TypeScript React apenas como exemplos porque os tipos de funções são particularmente úteis lá, mas a sintaxe se aplica a qualquer interface Typescript.)
exemplo 1: função que não recebe argumentos e não devolve um valor:
no exemplo abaixoonChange é a declaração da função. A função não devolve nada (void), por isso declaramos o tipo de retorno como qualquer outro. Isto porque vazio e nunca são avaliados de forma diferente em diferentes contextos (além do escopo deste artigo). (Abaixo estão alguns exemplos de valores de retorno digitados.)
interface MyClassProps {
someProp: string;
onChange(): any;
}class MyClass extends React.Component<MyClassProps, MyClassState> ...
Exemplo 2: função que aceita um argumento:
incluir o nome do argumento e o seu tipo. O nome do argumento é necessário, mas não tem que corresponder quando você instancia a função real, mas o tipo tem que corresponder. É dactilografado como tudo o que está escrito.
interface MyClassProps {
anotherProp: number;
onChange(name: string): any;
}
exemplo 3: Função que aceita um argumento e retorna um valor:
Esta função aceita uma string como um argumento e retorna um número.
interface MyClassProps {
onChange(name: string): number;
}
Exemplo 4: Função que é opcional:
Sufixo do nome da propriedade com o Opcional para o Operador ?. Put the ? after the property name and before the argument list. Em TypeScript React todos os adereços são necessários, a menos que você use o operador opcional. Tal como acontece com qualquer adereço não-necessário na reacção, terá de verificar se o adereço é undefinedantes de o utilizar.
interface MyClassProps {
onChange?(name: string): number;
niceProp: boolean;
}
exemplo 5: Usando a palavra-chave tipo:
às vezes é conveniente declarar o tipo da função primeiro, em seguida, usar o tipo em uma interface. Para declarar uma função como um tipo a sintaxe é ligeiramente diferente. Usa o operador de seta.
type MyFunctionType = (name: string) => number;interface MyClassProps {
onChange: MyFunctionType;
niceProp: string;
}
Desfrute.