Programação cliente com TypeScript

Prévia do material em texto

Programação cliente com TypeScript
Prof. Sérgio Assunção Monteiro
Apresentação
Neste conteúdo, você vai aprender os conceitos e princípios de
desenvolvimento da linguagem de programação TypeScript.
A linguagem de programação TypeScript é uma extensão da linguagem
JavaScript. Ambas têm o mesmo objetivo: desenvolver aplicações para
web. Como era de se esperar, o TypeScript oferece recursos mais
avançados do que o JavaScript.
Vamos desenvolver alguns exemplos práticos que vão lhe ajudar a
dominar os diversos aspectos da linguagem.
Propósito
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
1 of 91 28/04/2024, 16:59
Propósito
Preparação
Tudo o que você precisa para rodar os exemplos é de um computador
com acesso à internet e de um navegador instalado, como o Google
Chrome, por exemplo. Vamos rodar os exemplos no seguinte endereço
eletrônico: https://www.typescriptlang.org/play/index.html
Objetivos
Módulo 1
Conceitos gerais e similaridades com o
JavaScript
Reconhecer os conceitos gerais e as similaridades com o JavaScript.
Módulo 2
Funções com TypeScript
Descrever funções com TypeScript.
Módulo 3
Tipos e narrowing
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
2 of 91 28/04/2024, 16:59
Tipos e narrowing
Analisar os tipos e narrowing.
Módulo 4
Classes com TypeScript
Aplicar exemplos práticos de classes com TypeScript.
Introdução
Você consegue imaginar o funcionamento da nossa sociedade
sem o uso das aplicações para internet?
A principal linguagem de programação que se popularizou para o
desenvolvimento de aplicações para web foi o JavaScript. E sua
evolução foi a linguagem TypeScript, que possui os mesmos
recursos, mas é superior em relação ao suporte para uso de tipos
e programação orientada a objetos.
Neste vídeo, apresentaremos os elementos essenciais da
linguagem de programação TypeScript, bastante utilizada no
desenvolvimento de aplicações web tanto do lado do servidor,

Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
3 of 91 28/04/2024, 16:59
desenvolvimento de aplicações web tanto do lado do servidor,
como do lado cliente.
1 - Conceitos gerais e similaridades com o JavaScript
Ao �nal deste módulo, você será capaz de reconhecer os conceitos gerais e
similaridades com o JavaScript.
Fundamentos do TypeScript
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
4 of 91 28/04/2024, 16:59
Agora, vamos conhecer os principais aspectos da linguagem de
programação TypeScript, o que nos permitirá criar bases sólidas para
desenvolver aplicações mais completas.
Neste vídeo, apresentaremos os principais conceitos sobre os
fundamentos da linguagem de programação TypeScript e entender por
que ela é tão importante para o desenvolvimento de aplicações web.
O que é a linguagem de programação TypeScript?
TypeScript (TS) é uma linguagem de programação baseada na
linguagem de programação JavaScript (JS). A sua principal
característica é a possibilidade de utilizar tipos estáticos, classes e
interfaces. Confira alguns aspectos fundamentais da linguagem:

Fortemente tipada

Orientada a objetos

Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
5 of 91 28/04/2024, 16:59

Compilada
O TS foi desenvolvido pela Microsoft como resultado do trabalho de
Anders Hejlsberg – que projetou a linguagem de programação C#. Uma
das definições muito comuns sobre o TS é que ele é um superconjunto
tipado e compilado de JS, e, na prática, é o JavaScript com recursos
adicionais.
Recomendação
Em especial para os desenvolvedores de aplicações web, utilizar o TS
traz vantagens no sentido de construir aplicações mais tolerantes a
falhas. Além disso, é um software de código aberto.
Atividade 1
Não há dúvidas de que a linguagem JavaScript (JS) é uma das mais
importantes ferramentas para desenvolvermos aplicações web. Ainda
hoje, ela continua sendo muito utilizada na prática. No entanto, houve
uma extensão do JS para a linguagem TypeScript (TS). Obviamente,
existem muitas semelhanças entre ambas, mas, como era de se esperar,
o TS acrescentou elementos novos como tipos e orientação a objetos
que são consideradas grandes vantagens. Nesse sentido, qual é um dos
principais motivos do JS ainda ser bastante utilizado?
A
O JS já possui muitos sistemas legados, além de que a
curva de aprendizado para desenvolver aplicações com
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
6 of 91 28/04/2024, 16:59
Parabéns! A alternativa A está correta.
O TypeScript (TS) é uma extensão do JavaScript (JS). Na prática, tudo o
que podemos fazer no JS também podemos fazer no TS, mas o
contrário já não é verdadeiro. O JS é muito usado, pois existem
inúmeros sistemas desenvolvidos nele e, apesar de utilizar conceitos
mais simples, isso pode ser uma desvantagem, pois pode ocasionar
diversas vulnerabilidades, além de perdermos as vantagens dos
recursos da programação orientada a objetos suportada pelo TS.
curva de aprendizado para desenvolver aplicações com
ele é muito rápida.
B
O TS ainda é uma linguagem muito recente e suas
vantagens não justificam a mudança da forma de
programar.
C
O TS permite desenvolver programação orientada a
objetos e, isso, é bastante complexo na prática.
D
Para desenvolver uma aplicação no TS, são necessários
passos muito complexos e muito diferentes do JS.
E
O TS ainda não é considerada uma linguagem de
programação confiável e, na prática, ela é muito mais
limitada do que o JS para desenvolver aplicações web
robustas.
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
7 of 91 28/04/2024, 16:59
JavaScript versus TypeScript:
semelhanças e diferenças
Vamos conhecer os principais aspectos da linguagem de programação
TypeScript, por meio de exemplos simples, para assimilarmos como ela
funciona.
Neste vídeo, apresentaremos algumas das principais semelhanças e
diferenças entre as linguagens de programação JavaScript e TypeScript.
Na prática, vai ser natural que você use ambas para desenvolver as suas
aplicações extraindo, assim, o que cada uma oferece de melhor.
JavaScript e TypeScript: pontos em comum
A origem do TypeScript está nas limitações do JavaScript, pois o
JavaScript foi desenvolvido como uma linguagem de programação do
lado do cliente que passou a ser usado como uma linguagem de
programação do lado do servidor.
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
8 of 91 28/04/2024, 16:59
Logotipo TypeScript.
No entanto, ficou evidente que, à medida que o código crescia, ele se
tornava mais complexo e difícil de gerenciar, o que impediu que o
JavaScript tivesse sucesso como uma tecnologia do lado do servidor.
Por isso, então, houve a necessidade de criar o TypeScript. Ambas as
linguagens, naturalmente, têm muitas semelhanças, das quais podemos
destacar (FREEMAN, 2019):
 O código de um projeto do TypeScript é convertido
em código JavaScript simples, pois os browsers
não podem interpretá-lo de forma nativa. Isso
significa que o código escrito em TypeScript é
compilado e convertido para JavaScript.
 Qualquer código escrito em JavaScript pode ser
convertido em TypeScript alterando a extensão de
.js (JavaScript) para .ts (TypeScritp), significando
que JavaScript é TypeScript, visto que TS é um
superconjunto de JS.
 Como consequência dos dois primeiros itens, o
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
9 of 91 28/04/2024, 16:59
O TypeScript pode ser utilizado pelos desenvolvedores para usar código
JavaScript já existente e incorporar bibliotecas.Diferenças entre JavaScript e TypeScript
Apesar das semelhanças entre as duas linguagens de programação,
existem algumas diferenças marcantes. Entre essas diferenças estão:
TypeScript
• É uma linguagem
de programação
orientada a objetos.
• Possui o recurso de
tipos estáticos.
• Suporta interfaces
(recurso de
programação
orientada a
objetos).
JavaScript
• É uma linguagem
de script.
• Não possui o
recurso de tipos
estáticos.
• Não suporta
interfaces (recurso
de programação
orientada a
objetos).
TypeScript pode ser compilado para ser executado
em qualquer navegador, dispositivo ou sistema
operacional, ou seja, ele não é específico para
nenhum ambiente.

Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
10 of 91 28/04/2024, 16:59
Atividade 2
Uma característica muito importante de qualquer solução de
desenvolvimento é a capacidade de padronizar a construção de uma
solução. Normalmente, quem desempenha esse papel é o arquiteto de
softwares. Nesse sentido, assinale a alternativa correta de como o
TypeScript (TS) se diferencia do JavaScript (JS) para padronizar uma
solução de desenvolvimento:
A
O TS obriga que o desenvolvimento de qualquer solução
seja feita com programação orientada a objetos.
B
O TS é uma linguagem muito diferente da JS no sentido
de implementar funções que devem ter uma
nomenclatura padronizada, caso contrário, o programa
não funciona.
C
Para criarmos variáveis no TS, precisamos definir os
tipos delas, senão os programas não funcionam.
D
Diferente do JS, o TS obriga que utilizemos um
gerenciador de códigos que verifica se todos os
programas seguem o mesmo padrão de
desenvolvimento.
O TS oferece suporte para um tipo chamado de interface
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
11 of 91 28/04/2024, 16:59
Parabéns! A alternativa E está correta.
O TS oferece suporte para a programação orientada a objetos que, por si
só, já é uma grande diferença e vantagem em relação ao JS. Além disso,
o TS oferece o tipo interface que estabelece um padrão de
desenvolvimento. Assim, todas as classes que vão implementar a
interface são obrigadas a implementar os métodos conforme
estabelecido pela interface.
Codi�cando uma aplicação com
TypeScript
Agora, vamos conhecer um dos ambientes de programação em que
você vai testar rapidamente seus códigos da linguagem de programação
TypeScript e compartilhar com outras pessoas. Para isso,
apresentaremos como codificar uma aplicação.
Neste vídeo, apresentaremos um ambiente de programação que vai
facilitar o teste dos seus programas em JavaScript rapidamente. Além
disso, demonstraremos o código que registra no log da aplicação a
string “Hello World”.
E
O TS oferece suporte para um tipo chamado de interface
obrigando, assim, que as demais classes sigam um
determinado padrão de desenvolvimento.
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
12 of 91 28/04/2024, 16:59
Como fazer testes rápidos de aplicações com
TypeScript
Existem algumas formas de testar uma aplicação desenvolvida com
TypeScript. Uma delas é fazer a instalação local via npm. O passo a
passo para esse tipo de instalação pode ser encontrado em:
www.typescriptlang.org/download.
Nesse trabalho, vamos executar nosso script on-line com o compilador
oficial. Para isso, acesse o link: www.typescriptlang.org/play/index.html.
Ao acessarmos esse endereço, veremos uma tela semelhante à
seguinte:
Ambiente de desenvolvimento on-line do TypeScript.
Nesse ambiente, desenvolveremos todos os nossos exemplos. A seguir,
apresentamos o código de “boas-vindas” no TypeScript:
Typescript 
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
13 of 91 28/04/2024, 16:59
Agora, vamos selecionar esse código e copiá-lo para o ambiente on-line
de desenvolvimento do TypeScript e, em seguida, devemos pressionar o
botão “Run”. Confira!
Primeiro programa em TypeScript.
Passo 1
Escrever o código em TypeScript.
Primeiro programa em TypeScript.
Passo 2
Pressionar o botão “Run” para executar o código.
Primeiro programa em TypeScript.
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
14 of 91 28/04/2024, 16:59
Primeiro programa em TypeScript.
Passo 3
É apresentada a saída da execução.
Esse ambiente é excelente para aprender a programar sem a
necessidade de fazer instalações e configurações locais. Além disso,
temos a opção de compartilhar o projeto com outras pessoas. Para isso,
basta pressionar o botão “Share”, copiar o endereço que ele fornece e
enviar para outras pessoas. Na imagem a seguir, mostramos o
processo.
Como compartilhar código on-line do TypeScript.
Os nossos próximos passos serão desenvolver vários exemplos que
comparam as linguagens de programação JavaScript e TypeScript.
Manipulação de variáveis string
Vamos iniciar o nosso processo de aprendizado com a utilização de
variáveis do tipo string, que são cadeias de caracteres. Primeiro, vamos
ao código em JavaScript:
Javascript 
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
15 of 91 28/04/2024, 16:59
Esse código produz como saída o seguinte resultado:
Console 
Agora, vamos implementar uma versão semelhante para TypeScript:
Typescript 
Cuja saída é:
Console 
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
16 of 91 28/04/2024, 16:59
As saídas dos dois códigos são semelhantes. Qual foi, então, a principal
diferença entre ambos? A diferença principal está na declaração da
variável usada para armazenar a mensagem com os resultados. No
caso do TypeScript, tivemos que indicar que ela é do tipo string.
Atividade 3
Você já sabe executar uma aplicação no TypeScript. Considere o
seguinte código em TS:
let vTS1: string = "F";
let vTS2: string = " G ";
let vTS3: string = "A";
console.log(vTS1+vTS2+vTS3);
Agora, execute o código. A saída será:
[LOG]: "F G A"
Nesse sentido, assinale a alternativa correta que modifique o código de
tal forma que a saída seja:
[LOG]: "A F G"
A
let vTS1: string = "A";
let vTS2: string = " F ";
let vTS3: string = "G";
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
17 of 91 28/04/2024, 16:59
Parabéns! A alternativa E está correta.
A let vTS3: string = "G";
console.log("Resultados com JavaScript");
console.log(vTS2+vTS3+vTS1);
B
let vTS1: string = "A";
let vTS2: string = "F";
let vTS3: string = "G";
console.log("Resultados com JavaScript");
console.log(vTS1+vTS2+vTS3);
C
let vTS1: string = "A";
let vTS2: string = " F ";
let vTS3: string = "G";
console.log("Resultados com JavaScript");
console.log(vTS1+vTS2+vTS3);
D
let vTS1: string = "A";
let vTS2: string = "F";
let vTS3: string = "G";
console.log(vTS1+vTS2+vTS3);
E
let vTS1: string = "A";
let vTS2: string = " F ";
let vTS3: string = "G"
;console.log(vTS1+vTS2+vTS3);
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
18 of 91 28/04/2024, 16:59
Esse exercício é muito importante, pois ele o ajuda a desenvolver o
raciocínio lógico e observar a saída. De fato, a saída solicitada pedia
apenas o resultado: [LOG]: "A F G". Portanto, quaisquer outras saídas
com mensagens distintas dessas estão erradas.
Utilização de comandos
condicionais e iterativos
Conheça agora a sintaxe e como utilizar os comandos condicionais e
iterativos. Esses comandos são utilizados para estabelecer o
comportamento de um programa a partir da entrada de dados.
Neste vídeo, apresentaremos como trabalhar com os comandos
condicionais e iterativos no TS. Eles funcionam como o controle de fluxo
da execuçãode um programa, a partir da entrada de dados.
Trabalhando com comandos condicionais
Agora que já aprendemos como declarar variáveis com tipos e utilizar os
operadores lógicos e relacionais no TypeScript, vamos ver como utilizar
os comandos condicionais if-else. A ideia é bem simples: basicamente,
testamos se uma condição é verdadeira. Se ela realmente for verdadeira,
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
19 of 91 28/04/2024, 16:59
testamos se uma condição é verdadeira. Se ela realmente for verdadeira,
então, o programa passa executar o bloco de comandos associados ao
comando if, senão ele vai para o comando else, caso esse seja utilizado
no programa (ABREU, 2017).
Confira um exemplo de como utilizar esses comandos condicionais:
Typescript 
A saída resultante da execução do código é:
Console 
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
20 of 91 28/04/2024, 16:59
No TypeScript, podemos, ainda, utilizar o operador ternário, que tem a
seguinte sintaxe: x = teste? valor1 : valor2;
Ou seja, se o teste for verdadeiro, então, a variável x recebe o valor1,
caso contrário, a variável x recebe valor2.
Veja um exemplo de código que utiliza o operador ternário no
TypeScript:
Typescript 
Após a execução do código, obtemos a seguinte saída:
Console 
Trabalhando com comandos iterativos
Quando trabalhamos com vetores, ou listas, é normal que tenhamos que
manipulá-los. Para isso, utilizamos os comandos iterativos. O TypeScript
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
21 of 91 28/04/2024, 16:59
possui dois comandos iterativos: for e while. O comando for, em
especial, pode ser usado de diferentes modos. No modo tradicional, ele
possui a seguinte sintaxe: for(início; condição; incremento ou
decremento)
Mas há outra versão baseada na teoria dos conjuntos com a seguinte
sintaxe: for(elemento of conjunto)
Nesse exemplo, podemos ver as duas versões do comando “for”:
Typescript 
A execução do programa produz o seguinte saída:
Console 
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
22 of 91 28/04/2024, 16:59
Agora, vamos analisar o comando while. Ele também tem duas versões:
uma em que o teste é realizado antes de entrar no bloco de comandos
associados a ele e outra em que o teste só é realizado após a execução
do bloco de comandos.
Observe um exemplo com as duas versões do comando while:
Typescript 
A saída da execução desse código é dada por:
Console 
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
23 of 91 28/04/2024, 16:59
Aqui, fechamos os conhecimentos básicos do TypeScript. Teste todos
esses códigos e faça pequenas modificações para analisar o
comportamento deles. Mais adiante, vamos aprender alguns assuntos
mais avançados do TypeScript.
Atividade 4
Os comandos iterativos, tais como o “for”, fazem parte da sintaxe do
TypeScript. Por exemplo, vamos considerar o trecho de código a seguir:
Console 
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
24 of 91 28/04/2024, 16:59
Agora, execute o código e, em seguida, selecione a opção correta com o
valor da variável “x”:
Parabéns! A alternativa B está correta.
O trecho de código está correto. O que ocorre é que ele soma apenas os
números divisíveis por 2, ou seja, que são pares. Como o vetor “v” possui
apenas números ímpares, o resultado da soma é “0”.
A 1
B 0
C 4
D 10
E 20
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
25 of 91 28/04/2024, 16:59
Escrevendo o código de
ordenação de um vetor em
TypeScript
Nesta atividade prática, escreveremos o código em TypeScript que
ordena um vetor em ordem crescente. Para demostrar a execução da
atividade, apresentaremos o código que ordena um vetor em ordem
decrescente.
Neste vídeo, veremos o código de uma aplicação TS que ordena um
vetor em ordem decrescente.
Roteiro de prática
Nesta atividade prática, você deverá codificar uma aplicação TypeScript
que ordena um vetor em ordem crescente, usando o método da bolha.
Confira a seguir, o passo a passo!
Passo 1: Abrir o sítio “typescriptlang.org/play”.
Passo 2: Declarar um vetor de 10 posições, inicializando seu conteúdo
com números inteiros aleatórios fora de ordem.
Passo 3: Escrever o método da bolha em TypeScript. O algoritmo básico
está codificado a seguir em pseudocódigo:
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
26 of 91 28/04/2024, 16:59
Typescript 
Passo 4: imprimir resultado
Faça você mesmo!
Em nossa atividade, declaramos um vetor pelo comando a seguir:
let vetorw :number[] = [ 7, 5, 40, 20, 70, 50, 2, 1, 1];
Essa forma de declaração remete a uma característica importante da
linguagem TypeScript. Entre as características apresentadas, destaque
o principal conceito presente nesta declaração de variável:
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
27 of 91 28/04/2024, 16:59
Parabéns! A alternativa E está correta.
Ao declararmos o vetor “vetorw”, informamos ao ambiente de
programação que os elementos do vetor serão números. Isso faz da
linguagem TypeScript, uma linguagem tipada.
A TypeScript é orientada ao objeto.
B TypeScript é uma linguagem interpretada.
C TypeScript é uma linguagem do paradigma funcional.
D TypeScript é uma linguagem do paradigma lógico.
E TypeScript é uma linguagem tipada.
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
28 of 91 28/04/2024, 16:59
2 - Funções com TypeScript
Ao �nal deste módulo, você será capaz de descrever funções com TypeScript.
Introdução às funções no TS
O TypeScript permite que possamos trabalhar com funções. Esse
recurso é essencial para desenvolvermos programas organizados,
seguros, eficientes e fáceis de fazer manutenção.
Neste vídeo, apresentaremos como implementar funções no TypeScript.
Esse é um recurso fundamental para se tornar um desenvolvedor
profissional.
A importância das funções
As funções constituem unidades lógicas básicas de um código. Por
meio delas garantimos que um programa seja sustentável e reutilizável.
Quando as utilizamos corretamente, podemos construir bibliotecas que
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
29 of 91 28/04/2024, 16:59
poderão ser utilizadas por vários programas. Uma consequência
positiva imediata disso é a divisão de trabalhos de uma equipe, pois
pessoas com diferentes habilidades podem trabalhar em partes
específicas do desenvolvimento.
Os usuários das funções precisam conhecer as seguintes informações!

Quais são os argumentos de uma função.

Qual a saída que a função retorna, se é que ela deve retornar algum
valor.
O usuário que vai consumir a função a enxerga como uma caixa-preta,
por isso a responsabilidade de garantir que funcione corretamente e
com o melhor desempenho possível é do desenvolvedor.
Sintaxe básica
O TypeScript oferece suporte para funções. A sintaxe básica de uma
função com o TypeScript é (TYPESCRIPT HANDBOOK, 2022). Veja!
Typescript 
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
30 of 91 28/04/2024, 16:59
Apesar de essa ser a sintaxe mais comum, existem outras formas de
programar uma função como veremos adiante. A seguir, vamos
conhecer as funções que não possuem retorno.
Funções sem retorno
Há situações em que não estamos interessados que a função tenha
retorno. Nesse tipo de situação, a função utiliza o tipo “void” para
informar quenão terá retorno.
Confira um código com exemplo de função que não possui retorno:
Typescript 
A função “imprimir_ts” recebe dois parâmetros, sendo um deles do tipo
string e o outro do tipo number. Ela simplesmente imprime os
conteúdos dos parâmetros “msg” e “num”, como podemos ver a seguir:
Console 
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
31 of 91 28/04/2024, 16:59
Agora, vamos estudar a forma mais comum de utilizar uma função, que
é a aplicação de retorno.
Funções com retorno
Uma função omite do usuário a complexidade da lógica de
programação. Assim, o usuário deve se preocupar apenas com a
passagem de parâmetros para a função e utilizar o retorno que ela
produz.
Nesse caso, precisamos informar qual o tipo de retorno da função e
utilizar, explicitamente, o comando “return”.
Veja um exemplo de função com retorno:
Typescript 
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
32 of 91 28/04/2024, 16:59
No caso, a função recebe dois parâmetros do tipo number, faz a adição
deles e, em seguida, retorna o resultado da adição para quem fez a
chamada da função.
Observe a saída do código do exemplo:
Console 
Funções com parâmetros do tipo string
Vamos ver mais um exemplo de função com retorno. Nesse caso, a
função recebe dois parâmetros do tipo string e retorna a concatenação
deles, como podemos ver no código a seguir:
Typescript 
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
33 of 91 28/04/2024, 16:59
Observe o resultado da execução do programa:
Console 
Atividade 1
O TypeScript dá suporte ao uso de funções. Os parâmetros dessas
funções possuem tipos e a própria função também utiliza tipos para
definir o retorno dela. Selecione a opção correta que justifica como uma
vantagem a forma como o TypeScript trabalha com funções:
A
O uso de funções elimina a possibilidade de erros em
tempo de execução.
Ao utilizar tipos para os parâmetros das funções, o
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
34 of 91 28/04/2024, 16:59
Parabéns! A alternativa E está correta.
A utilização de tipos nos parâmetros de uma função que o TypeScript
suporta é uma vantagem no sentido de auxiliar o controle das
operações que podem ser realizadas com determinada variável.
Funções para manipulação de
vetores e recursivas
Existem muitos usos comuns para funções. Um deles é a manipulação
de vetores; outro é para trabalhar com recursividade, ou seja, quando a
B
Ao utilizar tipos para os parâmetros das funções, o
TypeScript acelera o desempenho de execução de um
programa.
C
A principal vantagem de utilizar tipos nos parâmetros
das funções é a reutilização de código.
D
Com a utilização de tipos nos parâmetros das funções, o
TypeScript possibilita trabalhar com vetores.
E
Usar tipos nos parâmetros auxilia a aplicação correta
das operações que podem ser feitas com eles.
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
35 of 91 28/04/2024, 16:59
de vetores; outro é para trabalhar com recursividade, ou seja, quando a
função faz chamadas a si mesma.
Neste vídeo, apresentaremos como desenvolver funções para manipular
vetores e como fazer chamadas recursivas.
Funções para manipular vetores
Como vimos, vetores são estruturas de dados que permitem
manipularmos diversos elementos através de uma mesma variável com
o uso de índices. Portanto, é natural trabalharmos com vetores nas
funções. Passar um vetor como parâmetro para uma função é
semelhante ao que fizemos com os outros tipos de elementos, ou seja,
precisamos colocar o tipo de dado e utilizar os colchetes.
Veja um exemplo de como passar um vetor como parâmetro de uma
função:
Typescript 
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
36 of 91 28/04/2024, 16:59
A função “somatorio” faz a soma de todos os elementos do vetor
numérico. Para acessar cada elemento do vetor dentro da função,
utilizamos o comando iterativo “for”. O resultado da execução do
exemplo é dado por:
Console 
Funções recursivas
Há situações em que podemos descrever um problema em termos dele
mesmo. O exemplo clássico para esse tipo de situação ocorre com o
cálculo do fatorial de um número n que é dado por:
Observe a implementação para calcular o fatorial de um número n com
uma função no TypeScript:
fatorial(n) = 0,  caso n = 0,  ou n = 1
fatorial(n) = n ∗ fatorial(n − 1)
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
37 of 91 28/04/2024, 16:59
Typescript 
A saída da execução desse código é dada por:
Console 
Importante: Utilizar recursividade é muito útil em algumas situações,
mas sempre devemos ficar atentos ao caso base, pois ele garante que a
função vai parar de fazer chamadas a si mesma.
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
38 of 91 28/04/2024, 16:59
Atividade 2
Uma das possibilidades de desenvolver funções no TS é através da
recursividade. Há situações em que esse tipo de programação é muito
útil, mas existem alguns elementos básicos que o desenvolvedor não
pode deixar de fazer, caso contrário, terá problemas. Assim, assinale a
alternativa correta a respeito dos aspectos básicos de uma função
recursiva:
A
Toda função recursiva deve ter um caso base em que ela
termina, além da chamada a si mesma dentro da própria
função.
B
O programador é obrigado a declarar os tipos de todas
as variáveis que ele for usar na função recursiva.
C
O uso de funções recursivas deve ser evitado no TS, pois
afeta drasticamente o desempenho do sistema.
D
É essencial que o desenvolvedor documente a função
recursiva no TS, caso contrário, o sistema não vai
permitir que ela funcione.
O programador não pode esquecer de estabelecer uma
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
39 of 91 28/04/2024, 16:59
Parabéns! A alternativa A está correta.
A recursividade é um recurso de programação muito útil. Nas aplicações
web, a recursividade pode nos ajudar a verificar padrões com poucas
linhas de código e de uma forma natural que, de outro modo, seria
bastante complexo. No entanto, o programador não pode se esquecer
de implementar o caso base, pois ele garante o término do programa,
nem a chamada para a própria função que é o que caracteriza a
chamada recursiva.
Arrow functions
As chamadas arrow functions são uma implementação prática do
paradigma de programação funcional. Elas são muito utilizadas na
prática por programadores avançados, pois facilitam a manipulação de
listas e torna o código mais eficiente.
A linguagem de programação TypeScript pode utilizá-las e, com o
tempo, você vai optar por trabalhar com elas tanto pelo desempenho
que oferecem, como pela elegância do código. Além disso, também
vamos explorar algumas das funcionalidades do pacote RegEx.
Neste vídeo, apresentaremos algumas formas avançadas de utilizar
funções no TypeScript. Em especial, vamos dar destaque para as arrow
functions e a biblioteca RegEx.
E
O programador não pode esquecer de estabelecer uma
quantidade máxima de chamadas para a função
recursiva, afim de evitar loops infinitos.
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
40 of 91 28/04/2024, 16:59
O que é uma arrow function
Nos códigos mais avançados do TypeScript, é muito comum utilizarmos
funções lambda, que são estruturas lógicas de programação funcional.
A sintaxe desse tipo de função utiliza uma seta, que é a sintaxe
abreviada para definir a função anônima.
Essa espécie de função é conhecida como função seta, ou,de forma
mais comum, como arrow function. Entre as implicações práticas de
utilizá-las estão a eliminação da necessidade de escrever a palavra-
chave “function” e fazer a associação da função a uma variável.
Veja dois exemplos de como utilizar uma arrow function:
Typescript 
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
41 of 91 28/04/2024, 16:59
Na função “soma_anom_ts_1”, utilizamos a delimitação de blocos com
os símbolos de abre parênteses e fecha parênteses, além de utilizarmos
a plavra-chave return.
Na função “soma_anom_ts_2”, não fizemos uso dos delimitadores de
bloco e nem da palavra-chave return e, ainda assim, obtivemos os
mesmos resultados, como podemos ver a seguir:
Console 
Funções com expressões regulares
A utilização de expressões regulares é um conhecimento essencial
quando trabalhamos com desenvolvimento de aplicações web, como
para buscar por padrões em textos. Por meio dessas funções, podemos
procurar por substrings dentro de outras.
Observe um exemplo de uso de expressões regulares no TypeScript:
Typescript 
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
42 of 91 28/04/2024, 16:59
Para utilizar uma expressão regular, precisamos indicar que o tipo de
dado da variável é “RegExp”. No caso do exemplo, o padrão que
estamos procurando é a palavra “te” dentro do texto de teste. A seguir,
apresentamos o resultado da execução do programa:
Console 
Atividade 3
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
43 of 91 28/04/2024, 16:59
O TypeScript dá suporte ao uso de função anônimas, também
conhecidas como arrow functions. Por exemplo, vamos considerar o
trecho de código em que x deve ser, obrigatoriamente, maior do que 1:
let r = (x: number):number => x==1? 1:x+r(x-1);
console.log(r(8));
Selecione a opção correta que possui um código com uma lógica
equivalente:
A
function r2(n: number): number {
    return 36;
}
B
function r1(n: number): number {
    return (1+n)*n/2;
}
C let r3 = (x: number):number => 36;
D
function r4(n: number): number {
    if(n%2==0){
        return 36;
    }
    return 0;
}
E let r5 = (x: number):number => x%2==1? 0:36;
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
44 of 91 28/04/2024, 16:59
Parabéns! A alternativa B está correta.
Apesar de todos os códigos retornarem o mesmo valor passando como
parâmetro o valor “8”, o único que é equivalente ao código do exercício é
o da função “r1”. Para verificar isso, basta testar a chamada para outros
valores, com “5”, “9” e “20”, por exemplo. Para esses exemplos, apenas a
função “r1” produzirá os mesmos valores da função “r”.
Expressões regulares mais
interessantes
O pacote RegEx oferece diversas funcionalidades, facilitando o
desenvolvimento de uma aplicação que precisa manipular dados. Em
especial, isso é bastante útil, quando esses dados têm algum tipo de
padrão. Agora, vamos estudar um exemplo que nos mostra o potencial
do que podemos fazer com RegEx.
Neste vídeo, apresentaremos um exemplo bastante interessante de
como podemos usar as funcionalidades biblioteca RegEx para resolver
problemas reais.
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
45 of 91 28/04/2024, 16:59
Roteiro de prática
Usando a função a seguir, o conceito de expressão regular e o roteiro
apresentado no vídeo, reconheça e imprima os códigos de rastreamento
dos Correios brasileiros válidos. Os códigos têm a seguinte regra de
formação: duas letras, seguido de nove dígitos e a sigla “BR”.
Typescript 
Confira a seguir, o passo a passo!
Passo 1: Copiar a função dada para o ambiente de desenvolvimento,
alterando-a de modo a imprimir um código de rastreamento válido.
Passo 2: Criar a expressão regular que reconhece o padrão de códigos
de rastreamento dos Correios.
Passo 3: Criar um vetor de strings com os candidatos a código de
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
46 of 91 28/04/2024, 16:59
rastreamento.
Passo 4: Chamar a função que irá imprimir os códigos válidos.
Faça você mesmo!
A biblioteca RegEx é utilizada em diversas linguagens de programação.
Ela é um poderoso recurso para manipular cadeias de palavras para
identificarmos padrões, e realizar outras funcionalidades. Nós também
podemos usar RegEx no TypeScript. Assinale a alternativa correta com a
expressão RegEx capaz de identificar o seguinte padrão: o código do
estado - separado entre parênteses e começando com zero – seguido
por nove dígitos numéricos, sendo que estão separados de 5 e 4 através
do símbolo “-”. Exemplo: (095)11111-1111
A (0dd)d{5}-d{4}
B (0dd)dd {5}-d{4}
C (0dd)d{4}-d{5}
D (0dd)d{5}-d{4}
E (0dd)d{5}-d{4}
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
47 of 91 28/04/2024, 16:59
Parabéns! A alternativa D está correta.
Essa questão é muito importante para você desenvolver as habilidades
de trabalhar com a biblioteca RegEx. É necessário realizar alguns testes
no ambiente de programação do TypeScript para chegar à conclusão
correta.
Funções com parâmetros REST
Em algumas situações, quando trabalhamos com aplicações web, é
comum não sabermos com antecedência a quantidade de parâmetros
que uma função do nosso sistema vai receber. Para isso, o TypeScript
oferece funções com parâmetros REST, que nos permite lidar com essas
situações.
Neste vídeo, apresentaremos um exemplo de como utilizar parâmetros
REST para lidar com situações nas quais a função não conhece de
anteriormente a quantidade de parâmetros que ela vai receber.
REST na prática
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
48 of 91 28/04/2024, 16:59
REST na prática
Esse tipo de função permite receber uma quantidade não definida de
parâmetros. Ela é muito útil para aplicações web. A sintaxe dela é
caracterizada pelo uso de três pontos logo depois de algum parâmetro.
Uso tradicional de uma função REST
Nesse caso, temos um exemplo de uma chamada tradicional com
exceção do uso dos “três pontos” na passagem de parâmetro da função,
conforme podemos ver no código:
Typescript 
Cuja saída é dada por:
Console 
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
49 of 91 28/04/2024, 16:59
Exemplo com arrow function
Agora, vamos ver outra versão que resolve a mesma situação, com a
utilização de arrow function no código a seguir.
Typescript 
Cuja saída é dada por:
Console 
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
50 of 91 28/04/2024, 16:59
Arrow functions e RegEx: uma combinação poderosa
As saídas das duas versões são semelhantes, como era de se esperar. O
ponto fundamental que precisamos notar é que utilizamos as mesmas
chamadas da função, mas quantidades diferentes de parâmetros. Isso
se aplica muito bem em situações nas quais queremos generalizar
tratamentos de dados sem a necessidade de implementar diversas
funções para cada situação.
Atenção!
Nesse caso, se essa utilização não for bem-organizada, será difícil dar
manutenção no código.
Agora que já conhecemos os aspectos fundamentais do TypeScript e
sabemos as diversas formas de criarmos e utilizarmos funções, vamos
aprofundar os aspectos mais avançados da linguagem, como o conceito
de narrowing, que oferece mais flexibilidade na programação.
Antes, porém, fica a sugestão: execute todos os códigos que viu até
agora. Faça pequenas alterações e estude os resultados. Também crie
situações para gerar erros, pois é uma boa forma de aprender mais
sobre a linguagem.
Atividade 4
Programaçãocliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
51 of 91 28/04/2024, 16:59
Aprendemos sobre as funções REST e arrow functions no TypeScript
(TS). Ambas podem ser usadas em diferentes momentos e, de fato,
tornar a programação mais vantajosa. Nesse sentido, assinale a
alternativa correta a respeito das vantagens de utilizar funções RegEx e
arrow functions no TS:
Parabéns! A alternativa E está correta.
A
Ambas as funções são modernas e, por isso, devem ser
usadas com frequência.
B
Tanto as funções da biblioteca RegEx, como as arrow
functions possuem mecanismos de segurança que
eliminam riscos com falta de segurança.
C
O TS obriga que os desenvolvedores utilizem as funções
da biblioteca RegEx e as arrrow functions.
D
A biblioteca RegEx, por si só, possui funções muito
lentas que são otimizadas com o uso das arrow
functions.
E
Elas são otimizadas para gerenciar os dados com mais
eficiência, além de oferecerem flexibilidade.
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
52 of 91 28/04/2024, 16:59
As funções da biblioteca RegEx são extremamente úteis para manipular
listas de forma eficiente através de pouco código, mas que exige que
conheçamos bem a sintaxe dela. Já as arrow functions oferecem muita
flexibilidade de programação, além de terem melhor desempenho na
prática do que as funções tradicionais.
3 - Tipos e narrowing
Ao �nal deste módulo, você será capaz de analisar os tipos e narrowing.
Os tipos estáticos do TypeScript
e suas limitações
O TypeScript oferece um recurso chamado de narrowing, o qual permite
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
53 of 91 28/04/2024, 16:59
O TypeScript oferece um recurso chamado de narrowing, o qual permite
que a mesma função tenha um comportamento distinto no momento da
passagem de parâmetros. Isso pode ser vantajoso no ambiente de
desenvolvimento web.
Neste vídeo, apresentaremos o conceito de narrowing no TypeScript e
aprenderemos a identificar o tipo de dado com o qual está trabalhando.
De�nição de narrowing
Narrowing, traduzido para o português, significa estreitamento, e é um
recurso que o TypeScript oferece como um modo de seguir possíveis
caminhos de execução quando uma função recebe um parâmetro, ou
mesmo quando declaramos uma variável. A ideia é que uma variável
possa ter o seu tipo definido durante a execução do programa. Para
fazer isso, precisamos indicar quais são os possíveis tipos que ela pode
assumir (TYPESCRIPT HANDBOOK, 2022).
Atenção!
Há um ponto relevante para levarmos em consideração aqui. Como os
tipos das variáveis serão definidos durante a execução, então
precisamos verificar em que tipo a variável está operando, pois não
podemos utilizá-las da mesma maneira.
Para tratar essa situação o TypeScript utiliza um recurso chamado “Type
Guard” – é traduzido para o português como tipos protegidos. O objetivo
desse recurso é verificar qual o tipo em que a variável está operando
através do operador typeof.
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
54 of 91 28/04/2024, 16:59
Vamos ver, agora, alguns exemplos de como utilizar o operador typeof
com os tipos de variáveis.
Parâmetro string
Neste exemplo, para testar se o parâmetro é do tipo string, precisamos
realizar o seguinte teste:
Typescript 
Parâmetro number
Utilizamos tipos numéricos com bastante frequência em aplicações
desenvolvidas com TypeScritp. A sintaxe é dada por:
Typescript 
Parâmetro bigint
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
55 of 91 28/04/2024, 16:59
O tipo bigint é utilizado em situações nas quais precisamos manipular
números inteiros muito grandes, como identificadores de banco de
dados, e situações em que precisamos manipular data e hora. A sintaxe
para testar se um parâmetro é do tipo bigint é dada por:
Typescript 
Parâmetro boolean
Utilizar variáveis lógicas é muito comum, pois, constantemente,
deparamo-nos com situações que exigem testes. A sintaxe para testar
se uma variável é do tipo lógico é dada por:
Typescript 
Parâmetro symbol
Symbol é um tipo primitivo do TypeScript, útil para criarmos símbolos
que serão utilizados para controlar os possíveis valores de uma variável.
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
56 of 91 28/04/2024, 16:59
que serão utilizados para controlar os possíveis valores de uma variável.
A sintaxe para testar se uma variável é do tipo symbol é dada por:
Typescript 
Parâmetro unde�ned
Quando um tipo não é definido, o TypeScript utiliza o undefined. A
sintaxe básica para testar se uma variável undefined é:
Typescript 
Parâmetro object
Há situações em que trabalhamos com dados complexos. Nesse caso,
utilizamos o tipo object do TypeScript, cuja sintaxe é dada por:
Typescript 
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
57 of 91 28/04/2024, 16:59
Parâmetro function
Uma das implicações de utilizar arrow funtions é que podemos passá-
las como parâmetros para outras funções. Para testar se um parâmetro
é do tipo function, utilizamos a seguinte sintaxe:
Typescript 
Narrowing con�ável
O TypeScript oferece diversos recursos para trabalhar com narrowing.
Um desses recursos é a utilização do símbolo “?” (interrogação) para
verificar se uma variável é realmente confiável.
Veja um exemplo de como isso funciona na prática:
Typescript 
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
58 of 91 28/04/2024, 16:59
O parâmetro “y” da função está escrito “y?” que já indica para o
TypeScript que deve ser verificado se ela é ou não confiável. Além disso,
no retorno da função é utilizado “??” que indica que se a variável “y” não
for confiável, então, deve ser somado o valor “10” à variável “x”.
Confira a saída da execução do código:
Console 
Atividade 1
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
59 of 91 28/04/2024, 16:59
Uma das características que distingue o TypeScript de outras
linguagens de programação é o suporte para narrowing. Há situações
nas quais utilizar o narrowing oferece vantagens. Selecione a opção
correta que apresenta uma dessas situações:
Parabéns! A alternativa D está correta.
A utilização de narrowing no TypeScript oferece flexibilidade do código,
pois é possível verificar qualquer tipo, incluindo tipos personalizados
pelo desenvolvedor. Além disso, também auxilia na reutilização das
funções, pois permite que combinemos vários tipos de dados dentro da
mesma função.
A Eliminar erros de tipos de dados.
B Acelerar o desempenho da execução das funções.
C Implementar funções compatíveis com o JavaScript.
D Garantir a flexibilidade e reutilização de código.
E Trabalhar com vetores heterogêneos.
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
60 of 91 28/04/2024, 16:59
Narrowing através de Type
Guards
Apesar de o narrowing ser um recurso interessante em alguns casos,
precisamos ter formas de identificar a que tipo o dado se refere e como
devemos tratá-lo. Felizmente, o TypeScript oferece esse recurso através
dos Type Guards.
Neste vídeo, apresentaremos como utilizar os Type Guards do
TypeScript para se prevenir de erros em tempo de execução devido à
passagem de parâmetros para funções.
Narrowing com if (re�namento)
A forma mais comum de utilizarmos o narrowing em uma função é
definir nos parâmetros quais são os possíveis tipos que a função pode
assumir com o auxílio do símbolo “|” (barra vertical).
Veja um exemplo no qual o parâmetro da função pode ser do tipo“number”, ou “string”. O operador “typeof” é usado para garantir a
proteção do tipo.
Typescript 
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
61 of 91 28/04/2024, 16:59
Devemos perceber que a variável “t_msg” também utiliza explicitamente
o narrowint. A saída, após executar o código, é dada por:
Console 
Narrowing com switch
Outra forma de fazer a verificação da tipagem é com o comando
condicional “switch”. Esse comando é muito útil para testar situações
que envolvem enumeração.
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
62 of 91 28/04/2024, 16:59
Confira como utilizar o “switch”:
Typescript 
Como o parâmetro passado para a função “func_testar_ns” foi uma
string, o programa retornou o comprimento da frase, como podemos ver
na saída a seguir:
Console 
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
63 of 91 28/04/2024, 16:59
Atividade 2
O narrowing é uma das características do TypeScript (TS). Apesar da
flexibilidade que esse recurso oferece, ele também pode gerar dúvidas,
caso não seja bem testado. Selecione a opção correta que apresenta
uma forma eficiente de fazermos a verificação de uma variáveis que usa
narrowing:
A
Devemos utilizar a variável no código e deixar que o TS
faça o gerenciamento dos tipos.
B
O desenvolvedor deve usar a palavra-chave “default”,
pois o TS tentará usar a variável da forma padrão.
C
O desenvolvedor deve usar a palavra-chave “typeof” para
estabelecer como ele deseja que a variável se comporte
dentro do programa.
D Por meio da combinação dos comandos switch-case.
E
O desenvolvedor deve usar o símbolo “$” antes da
variável para indicar que ela pode assumir tipos distintos
dentro do programa.
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
64 of 91 28/04/2024, 16:59
Parabéns! A alternativa D está correta.
O narrowing é um recurso bastante flexível no TypeScript. No entanto,
isso faz que a responsabilidade do desenvolvedor aumente, pois é
necessário realizar testes para saber qual o comportamento esperado
da variável. Para isso, a forma mais eficiente é utilizar a combinação
“switch-case”.
Narrowing customizado
Ainda sobre o narrowing, há situações em que podemos realizar testes
personalizados e, assim, ter mais controle sobre a execução do
programa.
Neste vídeo, apresentaremos como tratar de forma personalizada
situações em que ocorre narrowing, por meio de um exemplo concreto.
Roteiro de prática
Dado o código utilizado em nosso exemplo em vídeo, modifique-o de
modo que a função possa concatenar vetores de strings ou vetores de
inteiros.
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
65 of 91 28/04/2024, 16:59
inteiros.
Typescript 
Após executarmos os testes, obtemos a seguinte saída:
Console 
Confira a seguir, o passo a passo!
Passo 1: Copia o código para o ambiente de desenvolvimento.
Passo 2: Altera o código de modo que o narrowing identifique
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
66 of 91 28/04/2024, 16:59
Passo 2: Altera o código de modo que o narrowing identifique
corretamente vetores de números inteiros ou strings.
Passo 3: Cria um conjunto de dados de teste.
Faça você mesmo!
Aplicar narrowing pode ser bastante útil, mas é necessário manter
atenção para não criar programas difíceis de entender. Por exemplo,
vamos considerar o trecho de código a seguir:
Console 
Selecione a opção correta a respeito do código ao fazer a chamada
como t(5):
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
67 of 91 28/04/2024, 16:59
Parabéns! A alternativa B está correta.
O código do exercício aplica narrowing através do tipo definido pelo
desenvolvedor que, no caso, é o alfanumérico. Dentro da função, é feito
o teste sobre o tipo do parâmetro. No exemplo dado, o parâmetro é do
tipo numérico. Apesar do laço iterativo, não é feita nenhuma alteração
do valor do parâmetro e ele é utilizado para retorno resultando, portanto,
na impressão de “o resultado é: 5”.
A Vai retornar “o resultado é: 34”.
B Vai retornar “o resultado é: 5” .
C Vai imprimir “string”.
D Vai imprimir “Os argumentos são inválidos”.
E Vai retornar “o resultado é: 15”.
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
68 of 91 28/04/2024, 16:59
4 - Classes com TypeScript
Ao �nal deste módulo, você será capaz de aplicar exemplos práticos de classes
com TypeScript.
Conceitos de programação
orientada a objetos
O TypeScript oferece suporte para a programação orientada a objetos.
Isso é uma grande vantagem no desenvolvimento de sistemas, pois
temos recursos como encapsulamento, herança e polimorfismo, o que
nos permite escrever códigos mais organizados e eficientes.
Neste vídeo, apresentaremos o desenvolvimento de aplicações no
TypeScript usando POO. Essa é uma das vantagens que o TS oferece
para auxiliar o desenvolvedor na solução de sistemas confiáveis e
organizados.
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
69 of 91 28/04/2024, 16:59
O que é programação orientada a objetos?
A programação orientada a objetos (POO) é um paradigma de
desenvolvimento de software, que tem como elemento central a
utilização de classes (TYPESCRIPT HANDBOOK, 2022).
As classes são modelos computacionais compostos por campos de
dados chamados de atributos e por funções que são chamadas de
métodos. Os métodos são responsáveis por manipular os atributos da
classe.
Aqui, deve ficar claro que as classes são modelos. Mas, para
trabalharmos no programa, precisamos de instâncias dessas classes.
Essas instâncias de classes são chamadas de objetos. O objeto é quem
gerencia os dados e aciona os métodos que vão manipulá-los.
Recomendação
Já faz algum tempo que a POO é o principal paradigma de
desenvolvimento de software que existe. Muitas linguagens de
programação são baseadas em POO, sendo que a mais conhecida é o
Java. O TypeScript também dá suporte para esse de programação e é
uma boa prática fazer uso dela, pois o programa fica muito mais legível
e fácil de manter.
Propriedades da POO
Vimos que o elemento central da POO é a utilização de classes. Outros
conceitos importantes são os de propriedades da POO. Através da
aplicação delas, podemos garantir restrição de acesso, reusabilidade de
código e adaptabilidade de execução. As três principais propriedade de
POO são:
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
70 of 91 28/04/2024, 16:59
Descreve como restringir o acesso a métodos e atributos em
uma classe. O TypeScript possui os seguintes tipos de restrição
de acesso:
• Privado: Membros desse tipo só podem ser acessados
dentro da classe em que foram definidos.
• Protegido: Membros protegidos só podem ser acessados
dentro da classe em que foram definidos, mas também
podem ser acessados pelas classes herdeiras de uma
superclasse.
• Público: Todos os membros de uma classe no TypeScript
são públicos, por padrão. Os membros públicos podem ser
acessados em qualquer lugar sem nenhum tipo de restrição.
Permite herdar os métodos e atributos de outra classe.
Possibilita ter métodos com mesmos nomes, mas com
comportamentos distintos. O modo como o método vai se
comportar vai depender de como fazemos chamadas para ele.
Encapsulamento 
Herança 
Polimorfismo 
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
71 of 91 28/04/2024, 16:59
Atividade 1
Uma das características que distingue o TypeScript do JavaScripté o
suporte à programação orientada a objetos (POO). A POO é um
paradigma de programação muito importante e ganhou muita
popularidade através das linguagens de programação como C++, C# e
Java. Selecione a opção correta que apresenta algumas das vantagens
de utilizar a POO no TypeScript:
A
Qualquer código no TypeScript deve ser desenvolvido
com POO.
B
Suporte para utilizar arrow functions nos métodos das
classes.
C As classes aceleram o processamento de um código.
D
A POO é a técnica mais moderna de desenvolvimento de
software.
E Reutilização e flexibilidade de código.
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
72 of 91 28/04/2024, 16:59
Parabéns! A alternativa E está correta.
A utilização de POO no TypeScript auxilia a depuração mais fácil do
código, na reutilização dele através da propriedade de herança, aumenta
a flexibilidade por meio do uso do polimorfismo e é mais eficaz na
resolução de problemas devido à representação que uma classe oferece
por seus atributos e métodos.
As propriedades de
encapsulamento e herança
Quando desenvolvemos um sistema, é muito importante que possamos
garantir um comportamento estável dele. Nesse sentido, a propriedade
de encasulamento permite oferecer essa robustez e controlar a
visibilidade dos métodos da classe.
Neste vídeo, apresentaremos como desenvolver uma aplicação com a
propriedade de encapsulamento.
Encapsulamento
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
73 of 91 28/04/2024, 16:59
Para aplicar o encapsulamento, o TypeScript fornece três tipos de
modificadores, que são private, protected e public que correspondem,
respectivamente, aos tipos de acesso privado, protegido e público, como
vimos.:
Observe um exemplo prático desses modificadores de acesso:
Typescript 
No final do código, definimos um objeto “pessoa” como uma classe
“Pessoa”. Apesar de os nomes serem iguais, o TypeScript os diferencia,
pois é sensível à utilização de letras maiúsculas e minúsculas. Esse
código tem vários aspectos interessantes, entre as quais destacamos
as seguintes:
• Utilização dos modificadores private, protected e public.
• Aplicação de Arrow Functions para definir os métodos da classe.
Passagem de valores para os atributos da classe através do
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
74 of 91 28/04/2024, 16:59
• Passagem de valores para os atributos da classe através do
construtor. Esse método é responsável por estabelecer o
comportamento inicial dos objetos.
Veja a saída resultante da execução do programa:
Console 
Herança
Agora, vamos apresentar um exemplo prático da propriedade de
herança. Criamos duas classes: PessoaFisica e PessoaJuridica. Ambas
herdam as características da classe Pessoa que apresentamos no
exemplo anterior. Para indicar a herança, o TypeScript utiliza a plavra-
chave “extends”.
Confira o exemplo de herança:
Typescript 
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
75 of 91 28/04/2024, 16:59
Os principais destaques desse exemplo são:
• A utilização da palavra-chave “extends” para fazer a herança das
classes.
• A implementação do método “get_dados” tanto na classe
“PessoaFisica”, como na classe “PessoaJuridica” com a
manipulação de diferentes dados.
Veja as saídas da execução do código:
Console 
Atividade 2
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
76 of 91 28/04/2024, 16:59
Uma das propriedades da programação orientada a objetos é a herança.
O TypeScript (TS) dá suporte a essa propriedade e é uma grande
vantagem utilizá-la. Selecione a opção correta a respeito das vantagens
de utilizar a propriedade herança no TS:
A
Como a programação orientada a objetos é uma técnica
recente e bastante avançada, a herança é mais uma das
propriedades que devemos usar para extrair o máximo
dessa forma de programação.
B
O TS é uma linguagem orientada a objetos que nos
obriga a utilizar os melhores padrões de
desenvolvimento como no caso da propriedade herança.
C
A herança garante que as classes filhas desenvolvam os
métodos da classe mãe fazendo com que o código fique
padronizado.
D
Além de reaproveitar códigos, podemos usar a herança
para estender comportamentos.
E
A maior vantagem de aplicar a propriedade herança no
TS é devido à documentação que ela nos obriga a fazer,
para facilitar a manutenção do código posteriormente.
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
77 of 91 28/04/2024, 16:59
Parabéns! A alternativa D está correta.
A herança é uma propriedade da programação orientada a objetos
(POO) que nos permite transferir atributos e métodos para classes
filhas. Como a linguagem TS utiliza a POO, podemos fazer uso desse
recurso para padronizar nossos códigos e reutilizá-los no
desenvolvimento de diferentes sistemas com características
semelhantes.
A propriedade de polimor�smo
O polimorfismo é uma das propriedades mais complexas da POO. No
entanto, há situações nas quais ela se encaixa muito bem. É importante
que o desenvolvedor conheça essa propriedade, pois, há casos em que
ela torna a implementação muito mais simples e de fácil manutenção.
Neste vídeo, apresentaremos como desenvolver uma aplicação com a
propriedade de polimorfismo.
Polimor�smo
A última propriedade que vamos estudar é o polimorfismo. No exemplo,
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
78 of 91 28/04/2024, 16:59
a classe “LinguaPortuguesa” herda as características da classe
“LinguaLatina”. Nas duas classes, implementamos o método
“exibir_informacao()”, mas o resultado gerado pela execução do
programa é diferente, devido ao escopo em o método é implementado.
Veja o exemplo completo:
Typescript 
Cuja saída é dada por:
Console 
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
79 of 91 28/04/2024, 16:59
Na saída, podemos perceber claramente que os métodos executados
foram diferentes.
Atividade 3
O polimorfismo é uma das propriedades da programação orientada a
objetos (POO). O uso dela não é natural como no caso das propriedades
de encapsulamento e herança, mas há situações em que ela é muito
vantajosa. O TypeScript (TS), como era de se esperar, também dá
suporte a essa propriedade. Selecione a opção correta a respeito das
vantagens de utilizar a propriedade de polimorfismo no TS:
A
O polimorfismo garante que uma classe mãe vai
padronizar o comportamento de todas as classes
herdeiras.
B
No TS, o polimorfismo aumenta o desempenho com o
qual um método será processado que, de fato, é uma
grande vantagem em aplicações web.
C
O polimorfismo elimina a necessidade de o programador
fazer chamadas a diferentes métodos, necessitando
apenas determinar a classe e os parâmetros.
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
80 of 91 28/04/2024, 16:59
Parabéns! A alternativa E está correta.
O polimorfismo é uma das propriedades da POO que deve ser usado em
situações bastante específicas, pois o uso inadequado pode criar
confusão. Por outro lado, há situações em que ele é bastante adequado.
Em especial, quando queremos tratar situações semelhantes como, por
exemplo, renderização de objetos, mas os parâmetros, obviamente, são
diferentes, apesar de o comportamento esperado para o método ser
semelhante.
Classe genérica
Um dos papéis de responsabilidade mais importantes no
desenvolvimento de um sistema é o do arquiteto de softwares. Isso
porque é ele quem deve estabelecer as diretrizes que os
desenvolvedores devem seguir para implementar as funcionalidades deD
O polimorfismo estabelece a visibilidade dos atributos
de uma classe fazendo com que apenas métodos
públicos tenham acesso aos dados dos atributos.
E
A grande vantagem de aplicar a propriedade de
polimorfismo no TS é por causa da flexibilidade de
comportamento que ela pode ter para diferentes
contextos utilizando exatamente o mesmo nome do
método.
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
81 of 91 28/04/2024, 16:59
desenvolvedores devem seguir para implementar as funcionalidades de
forma padronizada. Um importante recurso para alcançar esse objetivo
é o uso das classes genéricas que são suportadas pelo TypeScript.
Neste vídeo, apresentaremos o desenvolvimento de uma aplicação com
a propriedade de polimorfismos.
Aspectos conceituais da classe genérica
O TypeScript suporta a utilização de classes genéricas. Classes
genéricas são estruturas lógicas que generalizam comportamentos sem
ficar vinculadas a um tipo específico de dado. São úteis, especialmente,
para a construção de componentes. Para utilizá-las no código, é
necessário especificar o parâmetro de tipo genérico entre ente os
símbolos “<” (menor que) e “>” (maior que) após o nome da classe. Uma
classe genérica pode ter atributos genéricos, como métodos.
Exemplo de classe genérica
Confira um exemplo que utiliza uma classe genérica. Nesse caso, o
nome da classe genérica é “Estudante” e os parâmetros genéricos são
“U” e “T”.
Veja o código que utiliza a classe genérica:
Typescript 
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
82 of 91 28/04/2024, 16:59
Devemos notar que os tipos utilizados dentro da classe são definidos
apenas quando um objeto é instanciado.
Observe a saída da execução do código:
Console 
Com isso, concluímos o nosso estudo sobre a linguagem TypeScript.
Apesar de já termos destacado em vários momentos a importância de
executar esses códigos, reforçamos que a melhor forma de aprender
uma linguagem de programação é executando os exemplos e, a partir
deles, fazer modificações e forçar situações que possam levar a erros,
pois, na prática, situações desse tipo vão acontecer com frequência e a
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
83 of 91 28/04/2024, 16:59
pois, na prática, situações desse tipo vão acontecer com frequência e a
melhor maneira de estar preparado para tratá-las é já ter passado por
casos semelhantes.
Atividade 4
Desenvolver um sistema vai muito além da codificação em uma sintaxe
específica. Um exemplo concreto dessa afirmação são as classes
genéricas que, inclusive, são suportadas pela linguagem de
programação TypeScript (TS). Assinale a alternativa correta a respeito
da importância do uso classe genérica no TS:
A
As classes genéricas são uma forma alternativa de se
referenciar à propriedade de herança e, semelhante a
esta, ela tem a capacidade de estender seu
comportamento às classes herdeiras.
B
A classe genérica garante que as classes herdeiras
devem implementar, obrigatoriamente, os métodos dela.
C
A maior vantagem da classe genérica no TS é a clareza
que ela oferece para o código, pois utiliza uma sintaxe
muito simples de trabalhar e documentar o sistema.
D
Uma das vantagens da classe genérica é a velocidade
que ela oferece para a execução de um sistema, pois ela
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
84 of 91 28/04/2024, 16:59
Parabéns! A alternativa E está correta.
Existem várias vantagens em trabalhar com classes genéricas no TS.
Entre essas vantagens estão a organização do código, pois todas as
funcionalidades podem ficar centralizadas em apenas uma classe.
Assim, podemos garantir mais segurança para o sistema e reduzir as
chances de inserir vulnerabilidades, uma vez que a classe vai se adaptar
ao tipo de dados que vamos passar para ela, mas manterá as mesmas
funcionalidades.
Aplicando herança
Vamos ver um exemplo de aplicação de herança e, em seguida,
aplicaremos o conceito na especialização de uma classe que modela
veículos. Sua tarefa será modelar duas especializações da classe
veículos: a primeira especialização será veículos de carga (classe
carga), na qual será inserido o atributo capacidade de carga; na
segunda, veículos de transporte de pessoal (classe carga), em que será
inserido o atributo de número máximo de passageiros.
D que ela oferece para a execução de um sistema, pois ela
utiliza os recursos de forma mais eficiente.
E
As classes genéricas podem ser usadas para garantir
que todas as funcionalidades relacionadas estejam em
uma única classe facilitando, assim, a manutenção e
segurança do código.
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
85 of 91 28/04/2024, 16:59
inserido o atributo de número máximo de passageiros.
Neste vídeo, apresentaremos a modelagem do uso de herança para
especializar a classe aluno. Além disso, você vai saber como modelar
duas subclasses: aluno de graduação e aluno de pós-graduação.
Roteiro de prática
Confira a seguir, o passo a passo!
Passo 1: Abrir o ambiente de desenvolvimento.
Passo 2: Colar a classe veículo descrita no código a seguir.
Typescript 
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
86 of 91 28/04/2024, 16:59
Passo 3: Criar as subclasses pessoal e carga com: construtor, e o
método get_dados que informará: renavam, placa e carga ou renavam,
placa e passageiros, conforme o caso.
Faça você mesmo!
A utilização de programação orientada a objetos no TypeScript permite
combinar atributos e métodos em uma unidade lógica chamada de
classe. Por exemplo, vamos considerar o código a seguir:
Typescript 
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
87 of 91 28/04/2024, 16:59
Nesse sentido, selecione a opção correta a respeito da implementação
da classe Conta:
Parabéns! A alternativa B está correta.
A classe está implementada corretamente e a chamada do método
getSaldo vai retornar o valor 20, pois o atributo saldo recebeu o valor 10,
logo que o objeto c foi instanciado. Quando o método construtor não é
implementado explicitamente, o TypeScript utiliza uma implementação
implícita do construtor.
A
Para que a classe funcione corretamente é necessário
implementar o construtor.
B
A execução do comando c.getSaldo() irá retornar o valor
20.
C
Como a classe não possui construtor, o atributo saldo
recebe o valor inicial igual a 0 (zero).
D O método setDeposito retorna um valor igual a 20.
E
É necessário usar o modificador public antes do método
getSaldo.
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
88 of 91 28/04/2024, 16:59
O que você aprendeu neste
conteúdo?
• Os principais conceitos do TypeScript.
• Como desenvolver programas no TypeScript para realizar testes.
• Como declarar tipos nas variáveis.
• Como desenvolver funções no TypeScript.
• A usar as funções da biblioteca RegEx no TypeScript.
• A trabalhar com arrow functions.
• A aplicar programação orientada a objetos (POO) no TypeScript.
Explore +
• Acesse o site oficial do TypeScript, pesquise por “download” e
aprenda como instalar o TypeScript na sua máquina local, com uma
sequência de passos.
• Vá ao site oficial do nodejs e procure por procure por “Quick Start”.
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
89 of 91 28/04/2024, 16:59
Lá, você vai encontrar diversos exemplos de JavaScript e TypeScript
que vão lhe ajudar a aprofundar mais os conhecimentos nessas
linguagens de programação.
Referências
ABREU, L. Typescript: o javascript moderno para criação de aplicações.Lisboa: FCA, 2017.
FREEMAN, A. Essential TypeScript. New York: Springer, 2019.
MICROSOFT. The Typescript Handbook. Consultado na internet em: 14
maio 2023.
Material para download
Clique no botão abaixo para fazer o download do
conteúdo completo em formato PDF.
Download material
O que você achou do conteúdo?
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
90 of 91 28/04/2024, 16:59
javascript:CriaPDF()
javascript:CriaPDF()
javascript:CriaPDF()
javascript:CriaPDF()
javascript:CriaPDF()
javascript:CriaPDF()
Relatar problema
Programação cliente com TypeScript https://stecine.azureedge.net/repositorio/00212ti/07666/index.html?bra...
91 of 91 28/04/2024, 16:59