Assunto 02 - TypeScript

Prévia do material em texto

<p>TypeScript</p><p>Apresentação</p><p>O TypeScript é uma linguagem de programação de código aberto mantida pela Microsoft. Uma das</p><p>suas principais funções é inserir os conceitos da orientação a objetos na linguagem JavaScript,</p><p>permitindo que os desenvolvedores trabalhem em um nível mais alto de abstração. Após a</p><p>codificação com o TypeScript, o código é convertido para o JavaScript, podendo ser utilizado em</p><p>qualquer navegador ou framework que suporte a linguagem JavaScript.</p><p>Nesta Unidade de Aprendizagem, você verá como compilar código TypeScript e os principais</p><p>conceitos relacionados à linguagem, incluindo: classes, interfaces e tipos de dados básicos. Além</p><p>disso, aprenderá a declarar variáveis e atribuir valores, realizar operações condicionais e produzir</p><p>laços de repetição.</p><p>Bons estudos.</p><p>Ao final desta Unidade de Aprendizagem, você deve apresentar os seguintes aprendizados:</p><p>Descrever as características do TypeScript, suas classes e seus tipos.•</p><p>Explicar como utilizar o TypeScript.•</p><p>Operacionalizar o TypeScript.•</p><p>Desafio</p><p>As vendas pela Internet vêm crescendo de forma surpreendente, a cada dia mais lojas estão</p><p>ingressando no mercado on-line. É dever da tecnologia prover o suporte para a inserção digital das</p><p>organizações, permitindo que mais pessoas tenham acesso aos melhores serviços e produtos.</p><p>Dentro da sua empresa, na qual você atua como o responsável por novas tecnologias, houve uma</p><p>demanda para inserir a empresa no meio digital, utilizando um site de vendas. Entre as suas</p><p>atribuições, está a criação de um protótipo para mostrar aos acionistas da organização. Você foi</p><p>solicitado em sua empresa para fazer as seguintes tarefas:</p><p>a) Crie uma classe usando o TypeScript para representar um produto de um site de vendas; o</p><p>produto deve conter pelo menos 5 atributos que o caracterizem, assim como os seus respectivos</p><p>valores.</p><p>b) Crie uma classe Venda que recebe um array de produtos no construtor e tem um método para</p><p>somar todos os valores dos produtos adicionados no objeto criado a partir da dessa classe.</p><p>c) Crie pelo menos dois produtos para inserir no objeto Venda criado e realizar a soma dos valores.</p><p>Utilize os tipos de dados disponíveis no TypeScript para definir os atributos.</p><p>Infográfico</p><p>A programação orientada a objetos é muito utilizada em sistemas web, principalmente na parte do</p><p>servidor. A linguagem TypeScript surgiu para acrescentar a orientação a objetos na linguagem</p><p>JavaScript, permitindo a transformação de código TypeScript para JavaScript.</p><p>Essa melhoria auxilia os programadores a desenvolverem softwares em TypeScript, utilizando o</p><p>conversor para ter o código JavaScript (geralmente maior e mais complexo), o qual é usado nos</p><p>diversos navegadores e sistemas web.</p><p>Neste Infográfico, você vai ver as etapas para instalar, compilar e executar código TypeScript.</p><p>Conteúdo interativo disponível na plataforma de ensino!</p><p>Conteúdo do livro</p><p>A linguagem TypeScript é uma alternativa de linguagem orientada a objetos para o</p><p>desenvolvimento de sistemas baseados na web. A linguagem TypeScript permite a modelagem de</p><p>sistemas utilizando os conceitos da orientação a objetos, como herança e polimorfismo. Após a</p><p>modelagem do sistema, é possível converter o código TypeScript para o JavaScript de forma fácil e</p><p>automatizada.</p><p>Entender os tipos de dados disponíveis na linguagem TypeScript é essencial para o uso da</p><p>linguagem para resolver problemas reais. A partir do entendimento dos tipos de dados, é possível</p><p>modelar uma solução de forma otimizada, utilizando os recursos da linguagem de forma correta.</p><p>No capítulo TypeScript, da obra Desenvolvimento para dispositivos móveis, base teórica desta</p><p>Unidade de Aprendizagem, você vai aprender como declarar os diferentes tipos de dados do</p><p>TypeScript, usando as palavras-chave let, var e const, identificando as principais diferenças entre</p><p>cada tipo de declaração de variável. Por fim, vai ver, por meio de teoria e exemplos, como declarar</p><p>interfaces, classes, funções, condicionais e laços de iteração usando a linguagem TypeScript.</p><p>Boa leitura.</p><p>DESENVOLVIMENTO</p><p>PARA DISPOSITIVOS</p><p>MÓVEIS</p><p>Sidartha Azevedo Lobo de Carvalho</p><p>TypeScript</p><p>Objetivos de aprendizagem</p><p>Ao final deste texto, você deve apresentar os seguintes aprendizados:</p><p>� Descrever as características do TypeScript, suas classes e seus tipos.</p><p>� Explicar como utilizar o TypeScript.</p><p>� Operacionalizar o TypeScript.</p><p>Introdução</p><p>A linguagem TypeScript é bastante utilizada em sistemas de software</p><p>baseados na web, permitindo a construção destes no mais alto nível e</p><p>sendo convertido para o JavaScript, suportado por diversos sistemas na</p><p>internet.</p><p>Neste capítulo, você estudará as principais características da lingua-</p><p>gem TypeScript, como utilizá-la, suas classes orientadas a objetos e interfa-</p><p>ces, bem como seus tipos de dados. Você ainda aprenderá como declarar</p><p>variáveis, atribuir valores e realizar a construção de condicionais e laços</p><p>de repetição usando o TypeScript, tornando-se capaz de criar funções</p><p>diversificadas e objetos com os tipos de dados básicos dessa linguagem.</p><p>Linguagem TypeScript e tipos de dados</p><p>A linguagem TypeScript é um conjunto do JavaScript que permite uma melhor</p><p>usabilidade ao programador que já está acostumado a trabalhar com orientação</p><p>a objetos e faz sua conversão para o JavaScript de forma automática e segura</p><p>(NPM..., 2019, documento on-line). Já o JavaScript é usado amplamente na</p><p>internet e em dispositivos móveis para garantir a operacionalidade das aplica-</p><p>ções tanto no desktop como nos demais dispositivos (LEE, 2011). Como nas</p><p>demais linguagens, os principais tipos de dados foram preservados, como o</p><p>booleano, a string, os vetores (arrays), as enumerações, entre outros. A seguir,</p><p>você verá cada um dos tipos disponíveis e seu uso (MICROSOFT, 2019).</p><p>A linguagem TypeScript é utilizada em diversos frameworks de desenvolvimento, como</p><p>o Ionic, o angular e o React.</p><p>O tipo booleano é utilizado para representar somente um de dois valores,</p><p>o verdadeiro ou o falso, e segue a sintaxe a seguir:</p><p>let nomeVarBooleana: boolean = false;</p><p>A palavra-chave let é usada para definir uma variável com menor escopo,</p><p>apenas em um bloco de código. Por não estarem presentes de forma global</p><p>nesse código, as variáveis do tipo let permitem ao compilador otimizá-lo</p><p>(DOCUMENTATION..., 2019, documento on-line). Sua sintaxe é a seguinte:</p><p>let nomeDaVariavel:tipoDaVariavel;</p><p>let nomeDaVariavel:tipoDaVariavel = valor;</p><p>Outro tipo de dado que existe no TypeScript é o number, utilizado para</p><p>representar os números decimais, hexadecimais, binários e octais. A seguir,</p><p>veja um exemplo de cada:</p><p>let numInteiro: number = 23;</p><p>let numFlutuante: number = 499.99;</p><p>let numHexadecimal: number = 0xf00d;</p><p>let numBinario: number = 0b1010;</p><p>let numOctal: number = 0o744;</p><p>Um tipo de dado essencial em qualquer sistema é a string, utilizada para</p><p>representar uma sequência de caracteres, como nomes, endereços, alfabeto,</p><p>descrições, entre outros. No TypeScript, você pode usar tanto as aspas duplas</p><p>como a aspas simples para defini-la, conforme os seguintes exemplos:</p><p>let nomeF: string = "Maria";</p><p>let nomeM: string = 'Joao';</p><p>TypeScript2</p><p>Além das formas anteriores, é possível usar uma template string, podendo</p><p>juntar várias linhas e variáveis para formar uma única sequência de caracteres,</p><p>como o exemplo a seguir:</p><p>let nomeCompleto: string = 'Maria das Dores';</p><p>let idade: number = 55;</p><p>let sentencaLonga: string = 'Oi, meu nome é ${ nomeCompleto</p><p>}. Eu estou fazendo aniversário no próximo mês, estou fazendo</p><p>${ idade + 1 }';</p><p>No código anterior, repare na aspas simples no começo da frase ('Oi, meu</p><p>nome é ${ nomeCompleto}.) e na outra somente no final (Eu estou</p><p>fazendo aniversário no próximo mês, estou fazendo ${</p><p>idade + 1 }';) essa criação é equivalente a uma notação bastante utilizada,</p><p>com a concatenação.</p><p>let sentencaLonga: string = "Oi, meu nome é " + nomeCompleto +</p><p>". Eu estou fazendo aniversário no próximo mês, estou fazendo"</p><p>+ (idade + 1);</p><p>Outro tipo de dado muito</p><p>importante é o array de dados, que pode ser</p><p>representado de duas formas:</p><p>let listaArray: number[] = [1, 2, 3, 4, 5];</p><p>ou</p><p>let listaArray: Array<number> = [1, 2, 3, 4, 5];</p><p>As duas alternativas mostradas anteriormente estão corretas, você pode</p><p>especificar o tipo do dado usando number[] ou Array<number> (DOCU-</p><p>MENTATION..., 2019, documento on-line). Já para acessar e inserir valores</p><p>nos elementos de um array, utiliza-se a notação a seguir, na qual os elementos</p><p>são acessados a partir do 0:</p><p>let primeiroElemento = listaArray[0];</p><p>listaArray[1] = 100;</p><p>3TypeScript</p><p>Já o tipo tupla não é tão comum nas linguagens C e Java, sendo represen-</p><p>tado por tupla (do inglês, tuple) no TypeScript e restringindo os tipos de dados</p><p>que podem ser usados dentro do array de dados. Veja um exemplo a seguir:</p><p>let tupla: [string, number];</p><p>tupla = ["ola", 23]; (Correto!)</p><p>tupla = [23, "ola"]; (Erro!)</p><p>Perceba no exemplo anterior que, na linha 1, realiza-se a declaração da</p><p>variável tupla, com dois atributos, uma string e um número. Na inicialização</p><p>dessa variável (linha 2), são passados como parâmetro uma string e um número,</p><p>que estão corretos, porque eles foram definidos na declaração. Porém, na linha</p><p>3, há um erro na inicialização, pois a definição usada foi string seguida de</p><p>um número, e não um número seguido de uma string.</p><p>Por exemplo, se você tentar acessar a substring do primeiro elemento da</p><p>variável tupla com o comando: tupla[0].substr(1), estará correto,</p><p>porque o tipo string tem esse método; porém, caso faça isso com o número,</p><p>usando: tupla[1].substr(1), será lançado um erro, pois o tipo número</p><p>não possui método para extrair uma substring.</p><p>Na sequência, há o tipo de dado enumeração, citado no TypeScript pela</p><p>enum, que é utilizada para prover um array de elementos conhecidos pre-</p><p>viamente, que não podem ser alterados e servem como referência no código</p><p>(DOCUMENTATION..., 2019, documento on-line). Veja um exemplo a seguir:</p><p>enum Cores {Vermelho, Azul, Branco}</p><p>let corPreferida: Cores = Cores.Vermelho; //Irá guardar o valor</p><p>0, referente a posição Vermelho na enumeração.</p><p>No exemplo anterior, criou-se a enumeração Cores, que tem os valores:</p><p>Vermelho, Azul e Branco. Logo após, é feita a variável corPreferida para</p><p>resgatar o valor da enumeração, extraindo o vermelho. Outra forma de acessar</p><p>seus valores é usar o index da enumeração, começando no 0:</p><p>let corPreferida: string = Cores[1]; //Escolheu a cor Azul.</p><p>Já o any é utilizado na linguagem TypeScript quando não se consegue</p><p>decidir o tipo do dado. Em alguns cenários, nos quais as variáveis são providas</p><p>por um ambiente dinâmico, como o meio Web, pode acontecer de não se saber</p><p>TypeScript4</p><p>o tipo da variável que será recebida dentro de uma requisição, por exemplo.</p><p>Para prosseguir com a produção do sistema, mesmo sem ter essa informação,</p><p>usa-se o any, conforme o seguinte exemplo:</p><p>let variavel: any = 4;</p><p>variavel = "Agora eh uma string!";</p><p>variavel = true; // Agora é um booleano</p><p>O tipo de dado any pode ser utilizado em um cenário no qual o sistema</p><p>já está em operação e precisa ser alterado para o TypeScript gradualmente,</p><p>possibilitando que não haja erros durante a compilação do código. Parece</p><p>que o object tem a mesma função que o any, mas há diferenças, pois este</p><p>permite invocar qualquer método, que pode existir em tempo de execução</p><p>do sistema, por exemplo, o método toFixed() é usado para converter um</p><p>número fracionado para um inteiro, logo, utiliza-se o seguinte comando:</p><p>let variavel: any = 4;</p><p>variavel.toFixed(); // Este método pode existir em tempo de</p><p>execução, o compilador não irá checar!</p><p>Contudo, se for declarado um tipo object, o compilador saberá anteci-</p><p>padamente que ele não tem o método toFixed(), logo, será lançado um</p><p>erro, conforme o exemplo a seguir:</p><p>let variavel: Object = 4;</p><p>variavel.toFixed(); // Erro, pois o método invocado não existe</p><p>no tipo Object.</p><p>Também é possível usar o tipo any para situações em que não se sabe o</p><p>tipo correto de um atributo, como mostra o seguinte exemplo:</p><p>let variavel: any[] = [1, true, "Maria"];</p><p>variavel [1] = 100;</p><p>Durante a execução do programa, o atributo que era booleano foi usado</p><p>como um inteiro, se o tipo tivesse sido fixado na declaração da variável, isso</p><p>não seria possível e o compilador iria lançar um erro no momento da chamada</p><p>ao trecho do código.</p><p>5TypeScript</p><p>Para conhecer todos os tipos de dados disponíveis na linguagem TypeScript, consulte</p><p>sua página oficial no link a seguir.</p><p>https://qrgo.page.link/G47rD</p><p>Declaração de variáveis com o TypeScript</p><p>O TypeScript permite a criação de funções usando a palavra reservada</p><p>function, como no exemplo a seguir:</p><p>function nomeDaFuncao()</p><p>{</p><p>//Conteúdo da função: declaração de variáveis, chamada de outros</p><p>métodos, implementação da lógica do negócio, etc.</p><p>}</p><p>Além disso, ele permite criar objetos de tipos personalizados, definindo um</p><p>tipo especializado, agregando diversos tipos básicos ou outros especializados.</p><p>A seguir, veja um exemplo de criação do objeto Pessoa:</p><p>Pessoa = {</p><p>nomeVariavel1: valorDaVar1,</p><p>nomeVariavel2: valorDaVar2</p><p>}</p><p>Assim, ao criar o objeto Pessoa, é possível acessar os elementos utilizando</p><p>Pessoa.nomeVariavel1, bem como alterar seu valor.</p><p>As variáveis no TypeScript são definidas com as palavras reservadas let,</p><p>var e const, e você pode aprender as principais características de cada tipo</p><p>de declaração a seguir. Já o JavaScript usa comumente a declaração com a</p><p>palavra-chave var, conforme o seguinte exemplo:</p><p>var numeroSorte = 23;</p><p>TypeScript6</p><p>No exemplo anterior, foi declarada uma variável que armazena o número</p><p>23, porém, você também pode declarar variáveis dentro de uma função.</p><p>function getNumeroSorte() {</p><p>var numeroSorte = 23;</p><p>return numeroSorte;</p><p>}</p><p>Veja mais um exemplo de declaração dentro de uma função:</p><p>function getNumeroSorte() {</p><p>var a = 23;</p><p>return function gerarNumeroAleatorio() {</p><p>var b = a + 1;</p><p>return b;</p><p>}</p><p>}</p><p>var fun = getNumeroSorte();</p><p>console.log("getNumeroSorte:" + fun());</p><p>No exemplo anterior, há uma função dentro de outra função, assim, a variá-</p><p>vel a é declarada na função getNumeroSorte(), mas pode ser acessada</p><p>também na gerarNumeroAleatorio(), pois ela foi declarada como</p><p>var. O retorno de getNumeroSorte() é a chamada à função gerar-</p><p>NumeroAleatorio(), que utiliza a variável b e a variável a, declarada</p><p>na função anterior. Na sequência, cria-se a variável fun, que chama a função</p><p>getNumeroSorte(), previamente declarada.</p><p>A última linha imprime na tela do dispositivo o resultado da variável</p><p>fun, que é uma função, logo, deve-se usar fun() para chamar. Lembre-se</p><p>que getNumeroSorte() retorna uma função, não um valor fixo, e que</p><p>as alterações na variável a que forem feitas dentro da função gerarNume-</p><p>roAleatorio() serão permanentes. O resultado impresso no console é o</p><p>valor 24. Veja o exemplo a seguir que mostra as alterações de variáveis em</p><p>diferentes escopos de funções.</p><p>function valorProduto() {</p><p>var a = 100;</p><p>7TypeScript</p><p>a = 110;</p><p>var b = valorMinimo();</p><p>a = 300;</p><p>return b;</p><p>function valorMinimo() {</p><p>return a;</p><p>}</p><p>}</p><p>console.log("Valor produto:" + valorProduto());</p><p>Neste exemplo, imagine que o sistema possui uma função que retorna o</p><p>valor de um produto antes de ser vendido para um cliente (Figura 1). Dentro</p><p>dessa função, há outra que retorna o valor mínimo desse produto (geralmente</p><p>valor de compra, encargos e transporte), logo, ele é utilizado para calcular</p><p>o valor final. Ao ser definido o valor 110 da variável a, cria-se a variável</p><p>b e chama-se a função valorMinimo(), retornando o valor de a (110 no</p><p>momento da chamada).</p><p>Figura 1. Ilustração de compras na internet.</p><p>Fonte: LDProd/Shutterstock.com.</p><p>TypeScript8</p><p>Depois, o valor de a é alterado para o valor mínimo do produto, sendo que</p><p>o valor de b já foi definido e será retornado pela função valorProduto().</p><p>Já o valor impresso no console é 110, logo, o vendedor teve prejuízo na venda</p><p>devido a um erro de programação.</p><p>Pessoa) {</p><p>//Realiza as operações necessárias.</p><p>}</p><p>let usuario23 = {RG: "123456789", nome: "Maria"};</p><p>resgataDadosBancoDados (usuario23);</p><p>No exemplo anterior, a interface Pessoa foi criada exigindo que suas</p><p>classes ou seus objetos tenham pelo menos um atributo chamado Nome do</p><p>tipo string. Depois, gerou-se uma função para resgatar os dados de um</p><p>usuário do banco de dados e que recebe como parâmetro qualquer objeto que</p><p>implemente essa interface, definida previamente. Ao criar um usuário chamado</p><p>usuario23, que possui os atributos RG e nome, cumpre-se a exigência da</p><p>interface, na qual há um atributo chamado nome do tipo string.</p><p>No Quadro 1, você pode ver uma síntese dos comandos TypeScript.</p><p>Palavra-chave Descrição</p><p>let Declarar variáveis com escopo reduzido.</p><p>var Declarar variáveis com escopo maior.</p><p>const Declarar variáveis com escopo maior e que</p><p>não se pretende alterar os valores.</p><p>interface Declarar uma interface.</p><p>class Declarar uma classe.</p><p>Quadro 1. Comandos básicos do TypeScript</p><p>(Continua)</p><p>15TypeScript</p><p>Palavra-chave Descrição</p><p>function Declarar uma função.</p><p>if..else Condicional.</p><p>while Laço while().</p><p>for Laço for().</p><p>for...in Laço das chaves do array.</p><p>for...of Laço dos valores do array.</p><p>Quadro 1. Comandos básicos do TypeScript</p><p>DOCUMENTATION - TypeScript. Microsoft, Redmond, 2019. Disponível em: https://www.</p><p>typescriptlang.org/docs/home.html. Acesso em: 14 jun. 2019.</p><p>LEE, W. M. Beginning Android tablet application development. Indianapolis: Wrox, 2011.</p><p>288 p.</p><p>NPM Documentation. npm, Inc., Oakland, 2019. Disponível em: https://docs.npmjs.</p><p>com/. Acesso em: 14 jun. 2019.</p><p>Leituras recomendadas</p><p>DOCS | Node.js. OpenJS Foundation, [S. l.], 2019. Disponível em: https://nodejs.org/en/</p><p>docs/. Acesso em: 14 jun. 2019.</p><p>FLANAGAN, D. JavaScript: o guia definitivo. Porto Alegre: Bookman; O’Reilly, 2013. 1080 p.</p><p>(Continuação)</p><p>TypeScript16</p><p>Dica do professor</p><p>A herança é um conceito pertinente às linguagens orientadas a objetos, sendo uma ferramenta</p><p>muito utilizada para a reutilização de funcionalidades de classes mais genéricas, permitindo que as</p><p>especificações sejam feitas em alto e implementadas em baixo nível.</p><p>Nesta Dica do Professor, você vai aprender sobre o conceito de herança, além de como</p><p>implementar a herança na linguagem TypeScript.</p><p>Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.</p><p>https://fast.player.liquidplatform.com/pApiv2/embed/cee29914fad5b594d8f5918df1e801fd/2f41239221372e81767ee570ec98e5b0</p><p>Exercícios</p><p>1) A declaração de variáveis é uma importante etapa em qualquer linguagem de programação,</p><p>e saber utilizar esse recurso é essencial para o desenvolvimento de qualquer sistema.</p><p>Dito isso, quais das palavras reservadas no TypeScript são utilizadas para declarar variáveis?</p><p>A) Int, float e double.</p><p>B) Public, private e const.</p><p>C) Let, var e const.</p><p>D) Interface, class e function.</p><p>E) Class, let e var.</p><p>2) Os vetores são elementos essenciais na construção de sistemas complexos, permitindo o</p><p>sequenciamento de elementos em uma mesma variável.</p><p>Dado o exposto, qual é a sintaxe correta para declarar um array de strings no TypeScript?</p><p>A) let listaArray: Array<string>.</p><p>B) var listaArray: Array<” ”>.</p><p>C) const listaArray: Array<”string”>.</p><p>D) let listaArray: Array<number>.</p><p>E) let listaArray: Array = string.</p><p>Entender o funcionamento adequado do código-fonte escrito é essencial para o</p><p>desenvolvimento de software de qualidade, permitindo que o programador entenda em</p><p>detalhes todo o fluxo de execução do algoritmo criado.</p><p>Dito isso, qual é o valor impresso no console a partir do trecho de código a seguir:</p><p>function acao(qntIteracoes: number) {</p><p>while (qntIteracoes > 0)</p><p>3)</p><p>{</p><p>if (qntIteracoes % 2 != 0) {</p><p>alert(qntIteracoes);</p><p>}</p><p>qntIteracoes--;</p><p>}</p><p>}</p><p>acao(10); //Chamada à função criada passando o número 10 como parâmetro.</p><p>A) 9, 7, 5, 3 e 1.</p><p>B) 10, 8, 6, 4 e 2.</p><p>C) 9, 5, 5, 1 e 0.</p><p>D) 10, 7, 5, 3 e 1.</p><p>E) 10, 8, 6, 4, 2 e 0.</p><p>4) Há diversos elementos na linguagem JavaScript que são utilizados para prover um código-</p><p>fonte mais legível, além de permitir a manutenção de forma barata.</p><p>Qual é a função de uma interface no TypeScript?</p><p>A) Essencial para declarar uma classe.</p><p>B) Utilizada para definir um conjunto de variáveis reutilizáveis.</p><p>C) Atuar como uma função.</p><p>D) Mesma utilidade de uma classe.</p><p>E) Servir como conjunto de exigências que uma classe deve seguir.</p><p>5) O uso de laços de repetição é necessário em praticamente todos os sistemas</p><p>computadorizados desde o seu surgimento. Saber utilizar os laços é um diferencial do</p><p>profissional que pode codificar economizando recursos como tempo e memória.</p><p>Diante do exposto, qual é a diferença do for..in e do for..of, respectivamente?</p><p>A) São usados de forma equivalente.</p><p>B) Iterar entre as chaves e os valores.</p><p>C) Iterar entre números e strings.</p><p>D) Percorrer vetores de números e strings.</p><p>E) Somente a sintaxe, não há diferença semântica.</p><p>Na prática</p><p>A não padronização de código-fonte é uma das principais causas na produção de software de má</p><p>qualidade, implicando em altos custos com manutenções futuras e muito tempo para reaprender o</p><p>comportamento do sistema a partir do código-fonte.</p><p>Neste Na Prática, você vai aprender a utilizar as interfaces na linguagem TypeScript para criar</p><p>código de qualidade, com maior legibilidade, coerencia e coesão entre os componentes de software.</p><p>Aponte a câmera para o</p><p>código e acesse o link do</p><p>conteúdo ou clique no</p><p>código para acessar.</p><p>https://statics-marketplace.plataforma.grupoa.education/sagah/1ed261f7-d4b3-4988-baeb-05b891fe2506/9898cd74-85d5-4cc2-960e-3629bde41465.jpg</p><p>Saiba +</p><p>Para ampliar o seu conhecimento a respeito desse assunto, veja abaixo as sugestões do professor:</p><p>Node Js</p><p>No site da Node Js você pode baixar a versão para Windows, Mac e Linux utilizada para</p><p>desenvolvimento em TypeScript. Lá, você também pode fazer o download do código-fonte do</p><p>software.</p><p>Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.</p><p>TypeScript</p><p>No link a seguir, você vai ver um vídeo que explica o que é, assim como os principais benefícios da</p><p>linguagem TypeScript.</p><p>Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.</p><p>Android 6 para programadores: uma abordagem baseada em</p><p>aplicativos</p><p>Como o TypeScript se relaciona com os dispositivos móveis? Confira os conceitos relacionados ao</p><p>desenvolvimento móvel no livro a seguir.</p><p>Conteúdo interativo disponível na plataforma de ensino!</p><p>Documentation</p><p>Aprenda a desenvolver mais funções, classes e herança na documentação oficial do TypeScript.</p><p>https://nodejs.org/en/download/</p><p>https://www.youtube.com/embed/gmupEp468lY</p><p>Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.</p><p>JavaScript: o guia definitivo</p><p>O seguinte livro fornece uma visão detalhada da linguagem JavaScript, auxiliando no entendimento</p><p>e na reutilização de comandos e funções para o TypeScript.</p><p>Conteúdo interativo disponível na plataforma de ensino!</p><p>https://www.typescriptlang.org/docs/home.html?v=912243938</p>Pessoa) {
 //Realiza as operações necessárias.
}
let usuario23 = {RG: "123456789", nome: "Maria"};
resgataDadosBancoDados (usuario23);
No exemplo anterior, a interface Pessoa foi criada exigindo que suas 
classes ou seus objetos tenham pelo menos um atributo chamado Nome do 
tipo string. Depois, gerou-se uma função para resgatar os dados de um 
usuário do banco de dados e que recebe como parâmetro qualquer objeto que 
implemente essa interface, definida previamente. Ao criar um usuário chamado 
usuario23, que possui os atributos RG e nome, cumpre-se a exigência da 
interface, na qual há um atributo chamado nome do tipo string.
No Quadro 1, você pode ver uma síntese dos comandos TypeScript.
Palavra-chave Descrição
let Declarar variáveis com escopo reduzido.
var Declarar variáveis com escopo maior.
const Declarar variáveis com escopo maior e que 
não se pretende alterar os valores.
interface Declarar uma interface.
class Declarar uma classe.
Quadro 1. Comandos básicos do TypeScript
(Continua)
15TypeScript
Palavra-chave Descrição
function Declarar uma função.
if..else Condicional.
while Laço while().
for Laço for().
for...in Laço das chaves do array.
for...of Laço dos valores do array.
Quadro 1. Comandos básicos do TypeScript
DOCUMENTATION - TypeScript. Microsoft, Redmond, 2019. Disponível em: https://www.
typescriptlang.org/docs/home.html. Acesso em: 14 jun. 2019.
LEE, W. M. Beginning Android tablet application development. Indianapolis: Wrox, 2011. 
288 p.
NPM Documentation. npm, Inc., Oakland, 2019. Disponível em: https://docs.npmjs.
com/. Acesso em: 14 jun. 2019.
Leituras recomendadas
DOCS | Node.js. OpenJS Foundation, [S. l.], 2019. Disponível em: https://nodejs.org/en/
docs/. Acesso em: 14 jun. 2019.
FLANAGAN, D. JavaScript: o guia definitivo. Porto Alegre: Bookman; O’Reilly, 2013. 1080 p.
(Continuação)
TypeScript16
Dica do professor
A herança é um conceito pertinente às linguagens orientadas a objetos, sendo uma ferramenta 
muito utilizada para a reutilização de funcionalidades de classes mais genéricas, permitindo que as 
especificações sejam feitas em alto e implementadas em baixo nível.
Nesta Dica do Professor, você vai aprender sobre o conceito de herança, além de como 
implementar a herança na linguagem TypeScript.
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
https://fast.player.liquidplatform.com/pApiv2/embed/cee29914fad5b594d8f5918df1e801fd/2f41239221372e81767ee570ec98e5b0
Exercícios
1) A declaração de variáveis é uma importante etapa em qualquer linguagem de programação, 
e saber utilizar esse recurso é essencial para o desenvolvimento de qualquer sistema. 
Dito isso, quais das palavras reservadas no TypeScript são utilizadas para declarar variáveis?
A) Int, float e double.
B) Public, private e const.
C) Let, var e const.
D) Interface, class e function.
E) Class, let e var.
2) Os vetores são elementos essenciais na construção de sistemas complexos, permitindo o 
sequenciamento de elementos em uma mesma variável. 
Dado o exposto, qual é a sintaxe correta para declarar um array de strings no TypeScript?
A) let listaArray: Array<string>.
B) var listaArray: Array<” ”>.
C) const listaArray: Array<”string”>.
D) let listaArray: Array<number>.
E) let listaArray: Array = string.
Entender o funcionamento adequado do código-fonte escrito é essencial para o 
desenvolvimento de software de qualidade, permitindo que o programador entenda em 
detalhes todo o fluxo de execução do algoritmo criado. 
Dito isso, qual é o valor impresso no console a partir do trecho de código a seguir:
function acao(qntIteracoes: number) { 
 while (qntIteracoes > 0) 
3) 
 { 
 if (qntIteracoes % 2 != 0) { 
 alert(qntIteracoes); 
 } 
 qntIteracoes--; 
 } 
 } 
acao(10); //Chamada à função criada passando o número 10 como parâmetro.
A) 9, 7, 5, 3 e 1.
B) 10, 8, 6, 4 e 2.
C) 9, 5, 5, 1 e 0.
D) 10, 7, 5, 3 e 1.
E) 10, 8, 6, 4, 2 e 0.
4) Há diversos elementos na linguagem JavaScript que são utilizados para prover um código-
fonte mais legível, além de permitir a manutenção de forma barata. 
Qual é a função de uma interface no TypeScript?
A) Essencial para declarar uma classe.
B) Utilizada para definir um conjunto de variáveis reutilizáveis.
C) Atuar como uma função.
D) Mesma utilidade de uma classe.
E) Servir como conjunto de exigências que uma classe deve seguir.
5) O uso de laços de repetição é necessário em praticamente todos os sistemas 
computadorizados desde o seu surgimento. Saber utilizar os laços é um diferencial do 
profissional que pode codificar economizando recursos como tempo e memória. 
Diante do exposto, qual é a diferença do for..in e do for..of, respectivamente?
A) São usados de forma equivalente.
B) Iterar entre as chaves e os valores.
C) Iterar entre números e strings.
D) Percorrer vetores de números e strings.
E) Somente a sintaxe, não há diferença semântica.
Na prática
A não padronização de código-fonte é uma das principais causas na produção de software de má 
qualidade, implicando em altos custos com manutenções futuras e muito tempo para reaprender o 
comportamento do sistema a partir do código-fonte.
Neste Na Prática, você vai aprender a utilizar as interfaces na linguagem TypeScript para criar 
código de qualidade, com maior legibilidade, coerencia e coesão entre os componentes de software.
Aponte a câmera para o 
código e acesse o link do 
conteúdo ou clique no 
código para acessar.
https://statics-marketplace.plataforma.grupoa.education/sagah/1ed261f7-d4b3-4988-baeb-05b891fe2506/9898cd74-85d5-4cc2-960e-3629bde41465.jpg
Saiba +
Para ampliar o seu conhecimento a respeito desse assunto, veja abaixo as sugestões do professor:
Node Js
No site da Node Js você pode baixar a versão para Windows, Mac e Linux utilizada para 
desenvolvimento em TypeScript. Lá, você também pode fazer o download do código-fonte do 
software.
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
TypeScript
No link a seguir, você vai ver um vídeo que explica o que é, assim como os principais benefícios da 
linguagem TypeScript.
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
Android 6 para programadores: uma abordagem baseada em 
aplicativos
Como o TypeScript se relaciona com os dispositivos móveis? Confira os conceitos relacionados ao 
desenvolvimento móvel no livro a seguir.
Conteúdo interativo disponível na plataforma de ensino!
Documentation
Aprenda a desenvolver mais funções, classes e herança na documentação oficial do TypeScript.
https://nodejs.org/en/download/
https://www.youtube.com/embed/gmupEp468lY
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
JavaScript: o guia definitivo
O seguinte livro fornece uma visão detalhada da linguagem JavaScript, auxiliando no entendimento 
e na reutilização de comandos e funções para o TypeScript.
Conteúdo interativo disponível na plataforma de ensino!
https://www.typescriptlang.org/docs/home.html?v=912243938