Este post é o primeiro de uma série de 6 posts sobre TypeScript. Veja os detalhes dos posts aqui
Typescript é uma linguagem que visa facilitar o desenvolvimento de aplicações com JavaScript.
Também acrescenta conceitos comuns como classes, módulos, interfaces, generics e tipagem estática para JavaScript.
Trata-se de uma linguagem compilada, não é interpretada em tempo de execução. O compilador do texto dactilografado leva arquivos texto (com a extensão “.ts”) e compila em arquivos JavaScript (com extensão “.js”).
Algumas características da linguagem
* É um projeto open source.
* Permite gerar código javascript, de forma fortemente tipada, trabalhando com programação orientada a objeto.
* Super conjunto do javascript: Mantem toda compatibilidade que o javascript possui, e agrega novas funcionalidades.
* Ele não veio para acabar com o javascript, ele veio para ajudar no desenvolvimento, mudando o modo como programamos para o javascript.
* No TypeScript podemos trabalhar com classes.
* Maior facilidade de identificação de erros, por ter “tempo de compilação”.
* Tipagem das propriedades.
* Declaração automática de propriedade.
* Herança entre classes.
* Módulos: No javascript temos uma grande dificuldade de organizar o código entre regras e processos. No entanto, no Typescript é possível definir módulos, eles equivalem ao namespace do C#.
* Podemos inferir tipos no Typescript, ou seja, fazer ele “adivinhar” o tipo.
* É uma linguagem case sensitive, ou seja, maiúsculo e minusculo fazem diferença, no momento de declarar / referenciar.
* Permite adicionar comentários, utilizando: // Comentário aqui. ou /* Comentário aqui */
Nesta series de posts sobre Typescript, vou focar como trabalhar com ele no Visual Studio. Se você não tem instalado o TypeScript no Visual Studio, pode baixar aqui. A instalação é muito simples, não vou descrever os passos neste post.
Para fazer testes de forma rápida e prática, você pode utilizar o playground online, do TypeScript.
https://www.typescriptlang.org/play.
Criando um projeto TypeScript
Depois de instalado, um novo tipo de projeto deverá estar disponível no Visual Studio.
Vamos criar um novo projeto com o nome “MyFirstTypeScript”.
Por padrão, alguns arquivo acompanharão nosso novo projeto.
* app.css: Arquivo css, que define o layout do projeto de exemplo.
* app.ts: Esse arquivo é do tipo TypeScript, é nele que devemos utilizar syntax TypeScript.
* index.html: Trata-se de um arquivo html comum. Ele tem uma estrutura básica de html, que faz referencia ao arquivo “app.js”. O arquivo “app.js” não está presente no projeto, ele estará disponível, no momento que que for feito o primeiro build do projeto. E será reciclado ao builds seguintes, com o novo código JavaScript, com base na syntax do arquivo “app.ts”.
Por padrão o arquivo “app.ts”, vem com um código TypeScript, como segue.
class Greeter {
element: HTMLElement;
span: HTMLElement;
timerToken: number;
constructor(element: HTMLElement) {
this.element = element;
this.element.innerHTML += "The time is: ";
this.span = document.createElement('span');
this.element.appendChild(this.span);
this.span.innerText = new Date().toUTCString();
}
start() {
this.timerToken = setInterval(() => this.span.innerHTML = new Date().toUTCString(), 500);
}
stop() {
clearTimeout(this.timerToken);
}
}
window.onload = () => {
var el = document.getElementById('content');
var greeter = new Greeter(el);
greeter.start();
};
Vamos remover o conteúdo deste arquivo e criar uma coisa mais simples. Vamos substituir pelo código abaixo.
class Main {
constructor(public message: string) { }
print() {
return "<h1>" + this.message + "</h1>";
}
}
window.onload = () => {
var main = new Main("Hello world");
document.body.innerHTML = main.print();
};
Acima temos uma classe do TypeScript, chamada “Main”. Logo abaixo declaramos um construtor, que exige como argumento uma string. Que por sua, vez irá se transformar em uma propriedade automática.
Também temos abaixo, um método chamado “print”. Ele retorna uma string, que nada mais é que uma concatenação da propriedade “message”, entre a tag h1.
Mais abaixo estamos utilizando a classe “Main”. Primeiramente, instanciando ela e passando como argumento “Hello world”.
Em seguida, utilizamos o retorno do método “print”, para definir o conteúdo da página.
Se executarmos o projeto, devemos ter apenas uma mensagem “Hello world” e nada mais.
Na pasta do projeto, o arquivo “app.js” foi gerado, podemos ver o código JavaScript gerado (não está visível na solution, devemos ir até a pasta física).
var Main = (function () {
function Main(message) {
this.message = message;
}
Main.prototype.print = function () {
return "<h1>" + this.message + "</h1>";
};
return Main;
})();
window.onload = function () {
var main = new Main("Hello world");
document.body.innerHTML = main.print();
};
//# sourceMappingURL=app.js.map
Nesse primeiro exemplo, vimos como definir de forma básica uma: classe com construtor, propriedade automática e um método.
Agora que vimos um exemplo básico, vamos ver os tipos básicos do TypeScript. boolean, number, string, array, enum, any e void.
Exemplos de como utilizar os tipos
Abaixo temos um algoritmo de como utilizar variáveis tipadas no TypeScript.
Temos 2 notações para fazer isso:
var nomeVariavel: Tipo; nomeVariavel = ValorDaVariavel;
Acima, declaramos a variável e em seguida, definimos o valor. Também podemos declarar a variável com valor definido.
var nomeVariavel: Tipo = ValorDaVariavel;
Vamos utilizar o exemplo acima, assim diminui o exemplo de declaração de tipos, como segue.
// Declaração de um enum, com o nome "Color"
enum Color { Red, Green, Blue };
window.onload = () => {
var isNight: boolean = false; // Variável do tipo boolean
var name: string = "André Btoe"; // Variável do tipo texto
var pi: number = 3.1415; // Variável do tipo número, com ponto flutuante
var numbers: number[] = [1, 2, 3, 4, 5]; // Variável do tipo array de números flutuante
var numbers2: Array<number> = [1, 2, 3, 4, 5]; // Outra maneira de declarar uma variável do tipo array de números flutuante
var colorSelected: Color = Color.Blue; // Variável do tipo enum, que referência o enum "Color"
var valueAny: any = "André Btoe"; // Variável do tipo any. Esta variável pode ser de qualquer tipo, seu tipo é inferida no momento que é definido o valor
var valueAnyList: any[] = ["André Btoe", 20]; // Variável do tipo array de qualquer tipo, como o tipo anterior.
// Método sem retorno
function print(): void {
console.log("printing...");
}
console.log("Valor de isNight: ", isNight);
console.log("Valor de name: ", name);
console.log("Valor de PI: ", pi);
console.log("Valor do índice 1 de numbers: ", numbers[1]);
console.log("Valor do índice 1 de numbers2: ", numbers2[1]);
console.log("Valor de colorSelected: ", colorSelected);
console.log("Valor de valueAny: ", valueAny);
console.log("Valor do índice 1 de valueAnyList: ", valueAnyList[1]);
print();
};
Na linha 3 temos a declaração de um enum, com o nome “Color” e seus respectivos valores. Mais abaixo temos a declaração de algumas variáveis; Um método; E a impressão dos valores das variáveis.
Tratamento de erro
O TypeScript permite tratar uma exceção, de forma similar ao C#. Basicamente temos 3 blocos: try…catch…finally.
Envolto do “try”, colocamos o algoritmo que deve ser executado.
Já no bloco do “catch”, devemos colocar o algoritmo que deve ser executado quando houver uma exceção.
E por último, no bloco de “finally” (que é opcional), podemos colocar algum algoritmo que deverá sempre ser executado, independente de haver exceção ou não.
window.onload = () => {
try {
alertTest("Teste");
}
catch (exception) {
alert(exception.message);
}
finally {
alert("finally");
}
};
Acima, forçamos um erro, já que a função “alertTest” não existe, ou seja, obrigatoriamente o bloco “catch” será executado. Que por sua vez, irá exibir uma “alert” com a exception. E por fim, executará outro “alert” com a mensagem “finally”.
Lançando um erro
É possível lançar um erro no TypeScript. Geralmente utilizamos este recurso para tratar algo, caso uma condição seja verdadeira, lançamos uma exceção, utilizando “throw”.
window.onload = () => {
function test(value: number): void {
if (value < 0)
throw new Error("value não pode ser menos que zero");
}
try {
test(-10);
}
catch (exception) {
alert(exception.message);
}
finally {
alert("finally");
}
};
No exemplo acima, temos uma função que não deve retornar nada (está denotada com “void”); Que tem como argumento um “number”. No corpo do método, verificamos se o argumento passado, é menor que zero, caso sim, lançamos uma exceção com a mensagem “value não pode ser menos que zero”. Mais abaixo, tratamos a exceção, como no exemplo anterior.
Continue lendo em Typescript – Functions.
Espero ter ajudado!
Até a próxima!
André Btoe 