Existem duas maneiras principais de instalar o TypeScript para obter ferramentas TypeScript:
Os plug-ins TypeScript instalados pelo Visual Studio por meio do npm (gerenciador de pacotes Node.js.) O
Visual Studio 2017 e o Visual Studio 2015 Update 3 incluem o TypeScript por padrão. Se o Visual Studio não tiver o TypeScript instalado, você poderá baixá-lo.
Para usuários que usam o npm:
> npm install -g typescript para
criar seu primeiro arquivo TypeScript
no editor, digite o seguinte código no arquivo greeter.ts:
função greeter (pessoa) {
retornar "Olá" + pessoa;
}
deixe usuário = "Jane User";
document.body.innerHTML = greeter (user); Usamos a extensão .ts para o
código compilado
, mas esse código é apenas JavaScript. Você pode copiar / colar esse código diretamente de um aplicativo JavaScript existente.
Na linha de comando, execute o compilador TypeScript:
A
saída de tsc greeter.ts é um arquivo greeter.js, que contém o mesmo código JavsScript que o arquivo de entrada. Tudo está pronto, podemos executar este aplicativo JavaScript escrito em TypeScript!
Em seguida, vejamos os recursos avançados trazidos pelas ferramentas TypeScript. Adicione: anotação do tipo string aos parâmetros da função person, da seguinte maneira:
função greeter (pessoa: string) {
retornar "Olá", + pessoa;
}
deixe usuário = "Jane User";
document.body.innerHTML = greeter (user);
Anotação de tipo A anotação de tipo no
TypeScript é uma maneira leve de adicionar restrições a funções ou variáveis. Neste exemplo, queremos que a função greeter receba um parâmetro de string. Em seguida, tente alterar a chamada de greeter em uma matriz:
função greeter (pessoa: string) {
retornar "Olá", + pessoa;
}
deixar usuário = [0, 1, 2];
document.body.innerHTML = greeter (user);
Recompile e você verá um erro.
erro TS2345: O argumento do tipo 'número []' não é atribuível ao parâmetro do tipo 'string'.
Da mesma forma, tente excluir todos os parâmetros chamados pelo greeter. O TypeScript informa que essa função foi chamada com um número inesperado de parâmetros. Nos dois casos, o TypeScript fornece análise estática de código, que pode analisar a estrutura do código e as anotações de tipo fornecidas.
Observe que, apesar do erro, o arquivo greeter.js foi criado. Mesmo se houver erros no seu código, você ainda poderá usar o TypeScript. Mas, nesse caso, o TypeScript avisa que o código pode não ser executado conforme o esperado.
A interface
nos permite desenvolver esse aplicativo de amostra. Aqui usamos uma interface para descrever um objeto com os campos firstName e lastName. No TypeScript, apenas as estruturas dos dois tipos são compatíveis e os dois tipos são compatíveis. Isso nos permite implementar a interface desde que ela contenha a estrutura exigida pela interface, sem usar explicitamente a instrução implementements.
pessoa da interface {
firstName: string;
lastName: string;
}
função greeter (person: Person) {
retornar "Olá", + person.firstName + "" + person.lastName;
}
deixe usuário = {nome: "Jane", sobrenome: "Usuário"};
document.body.innerHTML = greeter (user);
class
Finalmente, vamos usar a classe para reescrever este exemplo. O TypeScript suporta novos recursos JavaScript, como programação orientada a objetos baseada em classe.
Vamos criar uma classe Student com um construtor e alguns campos públicos. Observe que classes e interfaces podem trabalhar juntas, e os programadores podem decidir sobre o nível de abstração.
Também deve ser observado que usar public nos parâmetros do construtor é equivalente a criar uma variável de membro com o mesmo nome.
classe Aluno {
fullName: string;
construtor (public FirstName: string, public middleInitial: string, public lastName: string) {
this.fullName = firstName + "" + middleInitial + "" + lastName;
}
}
pessoa da interface {
firstName: string;
lastName: string;
}
função greeter (person: Person) {
retornar "Olá", + person.firstName + "" + person.lastName;
}
deixar usuário = novo aluno ("Jane", "M.", "Usuário");
document.body.innerHTML = greeter (usuário); Se
executar novamente o tsc greeter.ts, você verá que o código JavaScript gerado é o mesmo que o original. As classes no TypeScript são apenas atalhos para a programação orientada a objetos baseada em protótipo, comumente usada em JavaScript.
Execute o aplicativo Web TypeScript
e digite o seguinte em greeter.html:
<! DOCTYPE html>
<html>
<head> <title> TypeScript Greeter </ title> </ head>
<body>
< body> <script src = "greeter.js"> </ script>
</ corpo>
</ html>
em Abra greeter.html no navegador para executar este aplicativo!
Opcional: Abra greeter.ts no Visual Studio ou copie o código no playground TypeScript. Passe o mouse sobre o identificador para ver seu tipo. Observe que, em alguns casos, seus tipos podem ser inferidos automaticamente. Digite novamente a última linha do código, dê uma olhada na lista de preenchimento automático e na lista de parâmetros, elas serão alteradas de acordo com o tipo de elemento DOM. Coloque o cursor na função greeter e clique em F12 para rastrear sua definição. Outro ponto, você pode clicar com o botão direito do mouse no logotipo e usar a função de refatoração para renomeá-lo.