TypeScript apostila

Prévia do material em texto

Desenvolvido por Ralf S. Lima e licenciado para Apex Ensino 
 
Sobre Este Curso 
Público Alvo 
Programadores que têm como objetivo atuar como 
Desenvolvedor Front-End. 
Pré-Requisitos 
Conhecimentos de Lógica de Programação, HTML, CSS e 
Javascript. 
 
 
 A
n
o
taçõ
es 
 
 
 
 
Índice i 
Índice 
SOBRE ESTE CURSO ........................................................................................................................................................... I 
PÚBLICO ALVO ........................................................................................................................................................................... I 
PRÉ-REQUISITOS ........................................................................................................................................................................ I 
ÍNDICE ............................................................................................................................................................................... I 
COPYRIGHT ...................................................................................................................................................................... II 
EQUIPE .................................................................................................................................................................................... II 
HISTÓRICO DAS EDIÇÕES ............................................................................................................................................................. II 
CAPÍTULO 01 – CONHECENDO O TYPESCRIPT ....................................................................................................................3 
CAPÍTULO 02 - ORIENTAÇÃO A OBJETOS ...........................................................................................................................4 
CAPÍTULO 03 - EXERCÍCIOS - CONCEITOS DO TYPESCRIPT .................................................................................................5 
CAPÍTULO 04 - CONFIGURANDO AMBIENTE ......................................................................................................................6 
CAPÍTULO 05 - TESTANDO APLICAÇÃO ..............................................................................................................................9 
CAPÍTULO 06 - CLASSE ..................................................................................................................................................... 12 
CAPÍTULO 07 - ATRIBUTO ................................................................................................................................................ 14 
CAPÍTULO 08 - MÉTODO ................................................................................................................................................. 16 
CAPÍTULO 09 - OBJETO .................................................................................................................................................... 18 
CAPÍTULO 10 - EXERCÍCIOS - CLASSES, ATRIBUTOS, MÉTODOS E OBJETOS ...................................................................... 20 
CAPÍTULO 11 - CONSTRUTOR .......................................................................................................................................... 21 
CAPÍTULO 12 - ENCAPSULAMENTO ................................................................................................................................. 23 
CAPÍTULO 13 - HERANÇA ................................................................................................................................................ 24 
CAPÍTULO 14 - EXERCÍCIOS - HERANÇA ........................................................................................................................... 26 
CAPÍTULO 15 - MÉTODO SUPER ...................................................................................................................................... 27 
CAPÍTULO 16 - POLIMORFISMO ...................................................................................................................................... 28 
CAPÍTULO 17 - CLASSE ABSTRATA ................................................................................................................................... 29 
CAPÍTULO 18 - INTERFACE ............................................................................................................................................... 30 
CAPÍTULO 19 - EXERCÍCIO - FINAL ................................................................................................................................... 32 
CAPÍTULO 20 - CONSIDERAÇÕES FINAIS .......................................................................................................................... 33 
 
file:///C:/Users/Apex/Desktop/Apex/Apostila/Typescript%202019.docx%23_Toc19207113
file:///C:/Users/Apex/Desktop/Apex/Apostila/Typescript%202019.docx%23_Toc19207114
file:///C:/Users/Apex/Desktop/Apex/Apostila/Typescript%202019.docx%23_Toc19207115
 
A
n
o
ta
çõ
es
 
 
 
 
 
ii Copyright 
Copyright 
As informações contidas neste material se referem ao curso de Typescript e estão sujeitas as alterações sem 
comunicação prévia, não representando um compromisso por parte do autor em atualização automática de 
futuras versões. 
A Apex não será responsável por quaisquer erros ou por danos acidentais ou consequenciais relacionados com 
o fornecimento, desempenho, ou uso desta apostila ou os exemplos contidos aqui. 
Os exemplos de empresas, organizações, produtos, nomes de domínio, endereços de e-mail, logotipos, 
pessoas, lugares e eventos aqui representados são fictícios. Nenhuma associação a empresas, organizações, 
produtos, nomes de domínio, endereços de e-mail, logotipos, pessoas, lugares ou eventos reais é intencional 
ou deve ser inferida. 
A reprodução, adaptação, ou tradução deste manual mesmo que parcial, para qualquer finalidade é proibida 
sem autorização prévia por escrito da Apex, exceto as permitidas sob as leis de direito autoral. 
 
Equipe 
 Conteúdos 
 Ralf S. Lima 
 
Diagramação 
 Brissany C. Beltrão 
 
Revisão 
 Fernanda Pereira 
 
 
Histórico das Edições 
Edição Idioma Edição 
1a Português Agosto de 2019 
 
 
 
 
 
 
© Copyright 2019 Apex. Desenvolvido por Ralf S. Lima e licenciado para Apex Ensino 
 
 
 
 
 A
n
o
taçõ
es 
 
 
 
 
Capítulo 01 – Conhecendo o TypeScript 3 
Capítulo 01 – Conhecendo o TypeScript 
 
 
TypeScript é conhecido por ser um superconjunto de JavaScript (ES2015+), desenvolvido e mantido pela 
Microsoft. A linguagem conta com todas as funcionalidades do JavaScript, além da utilização de orientação a 
objetos, que podemos trabalhar em linguagens como o C#, Java, PHP, entre outras, além disso conseguimos 
definir tipos de dados nas variáveis e definir os tipos de retornos em funções. 
 A linguagem surgiu em 01 de outubro de 2012 por Anders Hejlsberg, criador do Turbo Pascal, Delphi e 
do C#, está entre as 15 linguagens mais utilizadas na atualidade pelo site RedMonk, além de estar entre as 5 
mais pesquisadas no StackOverflow em 2018. 
 Ao acessar o site http://www.typescript.org, notamos um banner com uma frase: TypeScript is a typed 
superset of JavaScript that compiles to plain JavaScript. Any browser. Any Host. Any OS. Open Source, 
traduzindo: TypeScript é um superset de JavaScript, que compila para JavaScript. Qualquer navegador, 
Qualquer hospedagem. Qualquer Sistema Operacional. Código aberto. 
 
http://www.typescript.org/
 
A
n
o
ta
çõ
es
 
 
 
 
 
4 Capítulo 02 - Orientação a Objetos 
Capítulo 02 - Orientação a Objetos 
 
 
 Talvez você já leu ou ouviu falar desse conceito, a orientação a objetos é uma maneira de abstrairmos 
nossa lógica, deixando mais parecida com o mundo real. Imagine que há um sistema, onde seja possívelcadastrar produtos, o que os produtos possuem de características em comum? 
Nome, marca, valor, descrição, quantidade em estoque, entre outras características. A ideia de utilizar 
orientação a objetos em suas aplicações é fantástica, pois facilita a compreensão da estrutura, além seguir um 
padrão muito utilizado pelas linguagens de desenvolvimento. 
 Um ponto importante que devemos citar é que o TypeScript não é o sucessor do JavaScript, mas sim 
um complemento. Você ainda pode desenvolver seus projetos web utilizando 100% de JavaScript, porém o 
TypeScript dispõe funcionalidades que em projetos de média ou grande porte podem fazer diferença. 
 
 
 A
n
o
taçõ
es 
 
 
 
 
Capítulo 03 - Exercícios - Conceitos do TypeScript 5 
Capítulo 03 - Exercícios - Conceitos do TypeScript 
 
 Para praticarmos um pouco sobre o TypeScript iremos responder algumas perguntas, fique à vontade 
em realizar pesquisas externas para complementar seus conhecimentos sobre a tecnologia. 
 
1. O TypeScript é o sucessor do JavaScript? Especifique sua resposta. 
 
2. Quais as vantagens em utilizar orientação a objetos no TypeScript? 
 
3. Qual empresa criou e mantêm o TypeScript? 
 
4. Por qual motivo devemos utilizar o TypeScript? 
 
 
A
n
o
ta
çõ
es
 
 
 
 
 
6 Capítulo 04 - Configurando ambiente 
Capítulo 04 - Configurando ambiente 
 Para desenvolvermos nossas aplicações utilizando o Angular precisamos ter instalado o NodeJS, para 
isso acesse o link http://www.nodejs.org e baixe a versão recomendada. 
 
 
 
 
 O NodeJS é um interpretador de código aberto baseado em JavaScript. Com ele é possível criar 
aplicações que não precisam de um navegador para ser executado. O NodeJS quando baixado também irá 
servir para emular um servidor para testarmos nossas aplicações em Angular. 
Além disso podemos baixar o Angular e algumas dependências extras via NPM, que é atualmente o 
maior repositório de arquivos do mundo, sendo assim não há mais necessidade em utilizar arquivos externos 
ou baixar, descompactar e fazer a referência. 
Para elaborarmos nossos exemplos de TypeScript, vamos utilizar o Visual Studio Code, porém se quiser 
utilizar outro editor fique à vontade. 
 
http://www.nodejs.org/
 
 A
n
o
taçõ
es 
 
 
 
 
Capítulo 04 - Configurando ambiente 7 
 
 
 Crie uma pasta chamada TypeScript e selecione essa pasta no Visual Studio Code ou o editor de sua 
preferência. 
 
 
 
 Agora precisamos baixar um complemento para exportar nosso arquivo de extensão .ts para .js, para 
isso digite o seguinte comando: 
 
 
 
 
A
n
o
ta
çõ
es
 
 
 
 
 
8 Capítulo 04 - Configurando ambiente 
 Neste momento temos nosso ambiente pronto para iniciarmos nossas aplicações utilizando o 
TypeScript. Para mais informações sobre esse complemento baixado, você pode acessar o site 
https://www.npmjs.com/package/typescript, toda a documentação necessária para compreender suas 
funcionalidades estarão explícitas neste site. 
 
 
https://www.npmjs.com/package/typescript
 
 A
n
o
taçõ
es 
 
 
 
 
Capítulo 05 - Testando aplicação 9 
Capítulo 05 - Testando aplicação 
 
 Para realizar um teste com nossa aplicação, basta criar uma página HTML simples, neste exemplo 
vamos dar o nome de index.html: 
 
 
 
 Vamos criar nosso arquivo .ts chamado helloWorld.ts 
 
 
 
 Agora vamos compilar esse arquivo para o formato JavaScript, para isso abra o terminal do Visual 
Studio code e digite comando tsc helloWorld.ts e veja que será criado um novo arquivo: 
 
 
A
n
o
ta
çõ
es
 
 
 
 
 
10 Capítulo 05 - Testando aplicação 
 
 
 
 Se você abrir o arquivo com a extensão .js gerada, note que o código será o mesmo do TypeScript 
criado, mas com a complexidade de sua estrutura, esses códigos serão alterados. 
 
 
 
 Vamos implementar nosso arquivo html, referenciando o arquivo helloWorld.js gerado e criando um 
botão com um evento de clique, referenciando a função mensagem criada: 
 
 
 A
n
o
taçõ
es 
 
 
 
 
Capítulo 05 - Testando aplicação 11 
 
 
 Abra em seu navegador, em seguida clique no botão e veja se uma mensagem é exibida: 
 
 
 
A
n
o
ta
çõ
es
 
 
 
 
 
12 Capítulo 06 - Classe 
Capítulo 06 - Classe 
 
 Nesse capítulo iremos trabalhar com ênfase na orientação a objetos, iniciando com o conceito de 
classe. 
Mas o que é uma classe? 
 Vamos fazer o seguinte, pense em um carro, qualquer carro. A pergunta a ser feita é, todos os carros 
são iguais? A resposta é não! Mesmo os carros possuindo características em comum como cor, ano, modelo, 
entre outros, são todos diferentes. 
 Outro exemplo é pensarmos em um bolo, todos os bolos são iguais? Não, mas todos os bolos possuem 
características como tamanho, camadas, cobertura, sabor, entre outras características. 
 Uma classe é um molde, e esse molde serve única e exclusivamente para criar elementos, que 
chamamos de objetos, mas essa parte veremos adiante. 
 Para compreender melhor esse conceito, crie um arquivo chamado Carro.ts. Note que iniciamos com a 
primeira letra em maiúscula, pois é o padrão que os desenvolvedores trabalham com orientação a objeto. 
Toda a classe inicia com letra maiúscula: 
 
 
 
 Vamos deixar esse arquivo com a seguinte estrutura: 
 
 
 A
n
o
taçõ
es 
 
 
 
 
Capítulo 06 - Classe 13 
 
 
 Agora temos nossa estrutura inicial, os próximos capítulos irão deixar esse conceito de classe mais 
fácil. Note que temos a palavra reservada class, em seguida de seu nome iniciando com letra maiúscula. 
 
A
n
o
ta
çõ
es
 
 
 
 
 
14 Capítulo 07 - Atributo 
Capítulo 07 - Atributo 
 
 Sabemos que a classe serve como molde, porém todo molde possui características, sendo assim 
utilizaremos os atributos para especificar essas características que a classe possui. Seguindo com nosso 
exemplo de Carro, podemos implementar os seguintes atributos: 
● Fabricante 
● Modelo 
● Cor 
● Ano 
● Teto Solar 
 
 Antes de implementarmos, é necessário saber que diferente do JavaScript convencional, o TypeScript 
trabalha com tipagem de dados, sendo assim será necessário informar que tipo é aquele atributo, no 
TypeScript possuímos os seguintes tipos: 
● Number 
● String 
● Boolean 
● Object 
 
 Voltando ao nosso exemplo, vamos especificar os cinco atributos especificados e informar seus tipos: 
 
 
 A
n
o
taçõ
es 
 
 
 
 
Capítulo 07 - Atributo 15 
 
 
A
n
o
ta
çõ
es
 
 
 
 
 
16 Capítulo 08 - Método 
Capítulo 08 - Método 
 
Em TypeScript, os métodos têm como finalidade executar determinada função, vamos criar uma 
função para exibir os dados de um carro, importante mencionar que as funções podem ter retorno ou não 
retornar. 
Os tipos de retorno são os mesmos dos atributos, e caso não queira retornar nada pode utilizar o 
comando void, quando dizemos que não haverá retorno, estamos dizendo que uma variável, por exemplo, não 
terá acesso ao que foi informado. Implemente o seguinte exemplo: 
 
 
 Abaixo dos atributos criamos esse método. Note que temos uma variável que concatena os valores de 
cada atributo. Utilizamos o comando this, para referenciar atributos da classe. 
 Antes de continuarmos é necessário que você compile esse arquivo para JavaScript, para isso digite o 
comando tsc Carro.ts: 
 
 
 
 A
n
o
taçõ
es 
 
 
 
 
Capítulo 08 - Método 17 
 Veja que agora você vai ter um arquivo em formato JavaScript com a seguinte estrutura: 
 
 
 
 Essa é a estrutura que o navegador irá compreender. No próximo capítulo vamos criar nossos objetos, 
que terão acesso aos atributos e métodos de nossas classes. 
 
A
n
o
ta
çõ
es
 
 
 
 
 
18 Capítulo 09 - Objeto 
Capítulo 09 - Objeto 
 
 O objeto é o resultado obtido através da classe. Vamos importar o arquivo Carro.js e instanciar um 
objeto da classe Carro. O termo instânciar significa criar alguma coisa, no caso vamos criar um objeto tendo 
como basea classe Carro: 
 
 
 A
n
o
taçõ
es 
 
 
 
 
Capítulo 09 - Objeto 19 
 Notem que removemos o exemplo helloWorld realizado anteriormente, agora vamos abrir esse 
arquivo no navegador e visualizar o resultado: 
 
 
 
 Veja que os dados que passamos na instância, são os atributos da classe Carro, e quando executado o 
método exibirDados(), as informações do objeto são exibidas. 
Vale lembrar que você pode criar quantos objetos quiser e utilizar as características que você achar 
relevantes. 
 
 
A
n
o
ta
çõ
es
 
 
 
 
 
20 Capítulo 10 - Exercícios - Classes, atributos, métodos e objetos 
Capítulo 10 - Exercícios - Classes, atributos, métodos e objetos 
 
1. Instancie mais um objeto da classe Carro e chame o método exibirDados(). 
 
2. Crie uma classe chamada pessoa com os seguintes atributos: 
○ Nome 
○ Idade 
○ Cidade 
 
Crie um método chamado exibirDados(), onde serão exibidos os atributos da classe (nome, idade e cidade). 
Crie também um método chamado verificarIdade(), se a idade for menor de 18 exiba a mensagem menor de 
idade, caso contrário maior de idade. 
Instancie um objeto da página index.html e chame os dois métodos. 
 
 A
n
o
taçõ
es 
 
 
 
 
Capítulo 11 - Construtor 21 
Capítulo 11 - Construtor 
 
 O Construtor é um método executado automaticamente ao instanciar um objeto. Vamos implementar 
o exemplo anterior da classe Carro, adicionando seu construtor: 
 
 
 
 
Adicionado acima do método exibirDados(), vamos compilar esse arquivo e exibir essa mensagem de 
testes, em seguida a mensagem do exibirDados(), lembrando que como o construtor é executado 
automaticamente, não precisamos alterar nada no arquivo html. 
 
 
 
 
 
 
 
A
n
o
ta
çõ
es
 
 
 
 
 
22 Capítulo 11 - Construtor 
 
 
Em seguida será executado o método exibirDados(), de maneira bem simples podemos utilizar o 
construtor em nossas aplicações. 
 
 
 
 
 
 
 A
n
o
taçõ
es 
 
 
 
 
Capítulo 12 - Encapsulamento 23 
Capítulo 12 - Encapsulamento 
 
 O encapsulamento é uma técnica para deixar visíveis ou ocultos atributos e métodos disponíveis nas 
classes, há quatro tipos de encapsulamento: 
 
● Default: Quando não define o tipo de encapsulamento. 
● Public: Qualquer um pode acessar os atributos e métodos daquela classe. 
● Private: Apenas própria classe têm acesso aos atributos e métodos. 
● Protected: Apenas a própria classe ou a classe herdada possui acesso aos atributos e métodos. 
 
 Abaixo segue um exemplo de como podemos implementar. Criamos uma classe chamada Pessoa, seu 
construtor possui dois parâmetros, quando instanciado um objeto da classe Pessoa, os atributos possuirão os 
valores enviados através dos parâmetros e em seguida exibido o método privado exibirDados(): 
 
 
A
n
o
ta
çõ
es
 
 
 
 
 
24 Capítulo 13 - Herança 
Capítulo 13 - Herança 
 
 A herança têm como objetivo separar suas classes. Imagine que temos um arquivo contendo duas 
classes, utilizaremos essa estrutura apenas para fins didáticos, mas você pode criar dois arquivos distintos se 
preferir: 
 
 
 
 
 A
n
o
taçõ
es 
 
 
 
 
Capítulo 13 - Herança 25 
 
Veja a estrutura, criamos dentro de um arquivo Classe.ts três classes, sendo elas: Veículo, Carro e 
Moto. A classe veículo dispõe as características que ambos terão, já a classe carro possui características 
apenas de carro, e moto apenas características para moto. 
A grande ideia de você utilizar a herança é reutilizar atributos e métodos, como por exemplo os 
atributos que estão na classe veículo. 
 Vale lembrar que o tipo protected, apenas a classe que cria atributos e métodos conseguem visualizar, 
além daquelas que estendem, no caso de carro e moto. 
 
 
A
n
o
ta
çõ
es
 
 
 
 
 
26 Capítulo 14 - Exercícios - Herança 
Capítulo 14 - Exercícios - Herança 
 
 Com os conceitos de herança, elabore as atividades a seguir: 
 
 
1. Criar uma classe chamada Conta com os seguintes atributos: agência e conta corrente, crie outras 
duas classes, que irão estender a classe Conta, uma delas vai se chamar PessoaFisica e outra 
PessoaJuridica. 
 
A classe PessoaJuridica terá os seguintes atributos: Nome da Empresa, CNPJ, já a classe PessoaFisica 
terá os seguintes atributos: Nome do Cliente e CPF. 
 
As duas classes precisarão ter um método para exibir os seus dados respectivos. 
 
 
2. Criar uma classe chamada Colaborador, contendo os atributos: cargo e salário, crie outra classe 
chamada Pessoa, onde haverá os atributos: nome, idade e cidade. 
 
Instancie dois objetos e crie um método para exibir os dados de Colaborador e Pessoa. 
 
 
 
 
 
 
 A
n
o
taçõ
es 
 
 
 
 
Capítulo 15 - Método Super 27 
Capítulo 15 - Método Super 
 
 O método super serve para executar o construtor da classe pai de maneira automática. Vamos utilizar 
como exemplo o nosso projeto anterior envolvendo as classes veículo, carro e moto. 
Imagine que toda vez que executarmos o construtor na classe de carro e moto, o construtor da classe 
veiculo precisa ser executado instantaneamente, para isso podemos utilizar a palavra reservada super(). 
 Ficou confuso? Fica tranquilo, observe o exemplo abaixo e compreenda sua estrutura: 
 
 Note que a classe carro está estendendo, sendo assim terá acesso aos atributos e métodos da classe 
veículo. Na linha 25 note que temos a palavra reservada super(), que significa que antes de executar o alert do 
construtor da classe carro, será executado o construtor da classe pai, no caso a classe veículo. 
 
A
n
o
ta
çõ
es
 
 
 
 
 
28 Capítulo 16 - Polimorfismo 
Capítulo 16 - Polimorfismo 
 
 Polimorfismo é uma técnica onde duas classes possuam métodos de mesmo nome, onde um método 
sobrepõe o outro, isso facilita na reutilização desse método, podendo ter uma ação quando instanciada uma 
classe ou sobreposto se instanciar outra. 
 Vamos ao exemplo prático para compreender melhor sua reutilização: 
 
 
 
 A
n
o
taçõ
es 
 
 
 
 
Capítulo 17 - Classe Abstrata 29 
Capítulo 17 - Classe Abstrata 
 
Classes abstratas servem para criar padrões obrigatórios e atributos e métodos. Interessante utilizar 
esse conceito em projetos de média ou grande porte para uma melhor organização. Uma classe abstrata não 
pode ser instanciada, apenas herdada, vamos implementar um exemplo para compreender melhor sua 
estrutura: 
 
 
 
A
n
o
ta
çõ
es
 
 
 
 
 
30 Capítulo 18 - Interface 
Capítulo 18 - Interface 
 
O uso de interfaces é muito útil para padronizarmos nossas classes. Vamos supor que você queira 
obrigar a utilizar determinados atributos específicos, mas como obrigado determinada classe a utilizar aqueles 
atributos? 
Através da interface, porém como estamos trabalhando com interface, precisamos herdar essas 
características, para isso utilize a palavra implements para adicionar a interface à sua classe. 
 Outra informação importante é que uma interface não pode ser instanciada, ela serve de molde para a 
padronização de suas classes, e apenas isso. 
 Vamos elaborar um exemplo de interface para usuário, contendo apenas dois atributos. É importante 
lembrar que além de atributos, a interface pode possuir métodos obrigatórios: 
 
 
 
 A
n
o
taçõ
es 
 
 
 
 
Capítulo 18 - Interface 31 
 
 Se formos analisar as classes abstratas ou interfaces, você pode achar que não há diferença, porém 
quando trabalhamos com interface, podemos implementar várias, diferentes de uma classe abstrata, onde 
você pode apenas estender uma por classe, outra característica marcante da interface, é que você apenas 
pode criar métodos obrigatórios e não métodos de reutilização, como uma classe abstrata. 
 
A
n
o
ta
çõ
es
 
 
 
 
 
32 Capítulo 19 - Exercício - Final 
Capítulo 19 - Exercício - Final 
 
 Nosso último exercício terá a seguinte estrutura. Criar uma interface com os atributos: nome, idade, 
cidade, e-mail etelefone, essa interface pode se chamar Padrao. 
Crie outras duas classes, uma chamada Professor e outra chamada Aluno, o professor terá o atributo 
matéria e a classe aluno terá os atributos: nota1 e nota2. 
Agora implemente na classe Padrao um método chamado listar, onde serão exibidos os dados de 
Aluno e Professor. 
Crie uma página HTML e instancie dois objetos, um da classe Professor e outro da classe Aluno, 
executo o método de listar de cada um deles. 
 
 
 A
n
o
taçõ
es 
 
 
 
 
Capítulo 20 - Considerações Finais 33 
Capítulo 20 - Considerações Finais 
 
 Agora que temos uma noção sobre o TypeScript, você pode agilizar a estrutura de desenvolvimento de 
suas aplicações e se beneficiar de tecnologias como Angular, React, VueJS, entre outros, para enriquecer ainda 
mais seus projetos. 
 Lembre-se que o TypeScript não é o sucessor do JavaScript, mas sim um superset de funcionalidades e 
com suporte a orientação a objetos, agregando muito aos nossos projetos. 
 Uma dica interessante para treinar e aprender é utilizar o TypeScript Playground, disponível no site 
https://www.typescriptlang.org/play/index.html, acesse e faça testes utilizando essa poderosa linguagem. 
 
 
https://www.typescriptlang.org/play/index.html