17/07/2024, 11:27 guia-typescript

guia-typescript

Sumário:

https://umporcentoprogramador.notion.site/guia-typescript-b7ac20e20d294780935e944315ef239d 1/24
17/07/2024, 11:27 guia-typescript

Sumário:
Introdução
Importante:
Sistema CPV
1. Introdução ao TypeScript
O que é TypeScript?
Por que usar TypeScript?
Um breve exemplo de código
2. Configurando um Ambiente TypeScript
Instalação do Node.js e NPM
Instalando o TypeScript
Configurando o compilador TypeScript
Exemplo de Projeto TypeScript
Utilizando o ts-node-dev
Instalação
Configuração
Executando o Projeto
3. Tipos Básicos em TypeScript
Tipos Primitivos
Exercícios para Praticar
4. Arrays em TypeScript
Definindo Arrays
Operações Comuns em Arrays
Métodos Avançados de Arrays
Exercícios para Praticar
5. Funções em TypeScript
Definindo Funções
Parâmetros Opcionais e Padrões
Tipos Avançados em Funções
Exercícios para Praticar
6. Interfaces e Tipos Customizados
Definindo Interfaces

https://umporcentoprogramador.notion.site/guia-typescript-b7ac20e20d294780935e944315ef239d 2/24
17/07/2024, 11:27 guia-typescript

Usando Tipos (Type Aliases)

Exercícios para Praticar
7. Orientação a Objetos em TypeScript
Classes em TypeScript
Encapsulamento e Modificadores de Acesso
Polimorfismo
Exercícios para Praticar
8. Generics em TypeScript
O que são Generics?
Generics com Interfaces
Generics em Classes
Generics com Restrições
Exercícios para Praticar
9. Tipos Avançados e Utilitários em TypeScript
Tipos Union e Intersection
Tipos Condicionais
Utilitários Comuns
Exercícios para Praticar

Introdução
Olá, muito obrigado por ter acessado esse guia, ele foi pensado e desenvolvido com
muito carinho com o objetivo de ajudar você que está começando na programação.

Com esse guia você vai ser capaz de dar os seus primeiros passos práticos no mundo
da programação com TypeScript.
Não esquece de me seguir no Instagram @umporcentoprog que lá eu trago
conteúdo educacional de programação todos os dias, e é por lá que eu solto esses
guias gratuitos, como esse que você está lendo!

Importante:

https://umporcentoprogramador.notion.site/guia-typescript-b7ac20e20d294780935e944315ef239d 3/24
17/07/2024, 11:27 guia-typescript

Para tirar melhor proveito desse guia, é bom que você já tenha uma boa base de
JavaScript básico, caso você não tenha, acesse agora mesmo o meu Guia Gratuito
de JavaScript e pratique lá antes de continuar com seus estudos em TypeScript.

Sistema CPV
O sistema CPV é um sistema de 3 passos para aprender programação e aplicar os
conceitos aprendidos. É o método que eu usei quando estava começando na
programação e que uso até hoje para aprender novas tecnologias.
CPV Significa:
Conceito → Aprender um conceito, a teoria;
Pratica → Praticar o conceito aprendido com exercícios ou projetos práticos;
Vitrine → Expor o que você aprendeu para o mundo, colocar em um repositório do
GitHub, fazer um post no Linkedin, enfim, faz uma vitrine do seu conhecimento.
Recomendo fortemente que você aplique esse sistema para tirar o melhor proveito
desse guia.

1. Introdução ao TypeScript
O que é TypeScript?
TypeScript é uma linguagem de programação desenvolvida pela Microsoft que
adiciona tipos estáticos ao JavaScript. Isso significa que, enquanto o JavaScript é
dinâmico e mais flexível, o TypeScript ajuda a capturar erros antes mesmo da
execução do código, durante a fase de desenvolvimento!
Com TypeScript, você pode escrever aplicações mais robustas e com menos bugs. É
especialmente útil em projetos grandes, onde a complexidade e o número de
desenvolvedores envolvidos tornam o controle de qualidade mais desafiador.

Por que usar TypeScript?

1. Segurança de tipo: Reduz os bugs em tempo de execução ao verificar os tipos
durante a compilação.

https://umporcentoprogramador.notion.site/guia-typescript-b7ac20e20d294780935e944315ef239d 4/24
17/07/2024, 11:27 guia-typescript

2. Ferramentas de desenvolvimento: Aproveite autocompletação poderosa,

refatoração e muito mais.
3. Compatibilidade com JavaScript: O TypeScript é um superset de JavaScript,
então todo código JavaScript é também um código TypeScript válido.
4. Adoção na comunidade: Grandes frameworks como Angular, React e Vue.js têm
adotado e recomendado o uso de TypeScript para projetos de grande escala.

Um breve exemplo de código

Vamos ver uma rápida comparação para entender o poder do TypeScript:
JavaScript:

function soma(a, b) { return a + b; } console.log(soma(5, "3")); // Resul

tado: "53"

TypeScript:

function soma(a: number, b: number): number { return a + b; } console.log

(soma(5, 3)); // Resultado: 8 // O TypeScript emitiria um erro se tentáss
emos passar uma string aqui.

No exemplo TypeScript, definimos tipos para os parâmetros e para o retorno da

função. Isso ajuda a evitar erros como a concatenação acidental de números e
strings, um problema comum em JavaScript.
Esse é o começo da jornada com TypeScript! Com esses fundamentos, você já
começa a perceber as vantagens de adicionar tipos ao JavaScript. No próximo
capítulo, vamos configurar o ambiente TypeScript para começar a codar.

2. Configurando um Ambiente TypeScript

Instalação do Node.js e NPM

https://umporcentoprogramador.notion.site/guia-typescript-b7ac20e20d294780935e944315ef239d 5/24
17/07/2024, 11:27 guia-typescript

Antes de instalar o TypeScript, você precisa ter o Node.js e o NPM (Node Package
Manager) instalados no seu sistema. O Node.js é um runtime de JavaScript que
permite executar código JS no seu computador, e o NPM é o gerenciador de pacotes
que usaremos para instalar o TypeScript.
1. Baixe e instale o Node.js: Visite nodejs.org e baixe a versão recomendada para a
maioria dos usuários.
2. Verifique a instalação: Abra seu terminal e digite os seguintes comandos para
verificar se o Node.js e o NPM foram instalados corretamente:
Você deverá ver as versões instaladas exibidas no terminal.

node -v npm -v

Instalando o TypeScript
Com o Node.js e o NPM prontos, instalar o TypeScript é um processo simples:

npm install -g typescript

Este comando instala o TypeScript globalmente em seu sistema, permitindo que você
o use em qualquer projeto.

Configurando o compilador TypeScript

O próximo passo é configurar o compilador TypeScript. Isso é feito através de um
arquivo chamado tsconfig.json , que define como o TypeScript compila o código
JS.
1. Crie um novo projeto: Crie uma nova pasta para o seu projeto e navegue até ela
no terminal.
2. Inicialize um projeto Node.js:
Isso cria um arquivo package.json padrão.

npm init -y

https://umporcentoprogramador.notion.site/guia-typescript-b7ac20e20d294780935e944315ef239d 6/24
17/07/2024, 11:27 guia-typescript

3. Crie um arquivo tsconfig.json :

• Você pode gerar um tsconfig.json padrão com o seguinte comando:

tsc --init

• Abra o e ajuste as configurações conforme necessário. As

tsconfig.json
mais importantes incluem:
◦ "target": "es6" : Define a versão do ECMAScript para a saída do JS.
◦ "module": "commonjs" : Define o sistema de módulos.
◦ "strict": true : Ativa todas as restrições de tipo para uma segurança
máxima.

Exemplo de Projeto TypeScript

Para garantir que tudo está funcionando, vamos criar um simples script TypeScript:
1. Crie um arquivo index.ts :
• Adicione o seguinte código:

let message: string = "Hello, TypeScript!"; console.log(message);

2. Compile seu código:

tsc index.ts

Isso deve criar um arquivo index.js compilado a partir do seu TypeScript.

3. Execute o script:

node index.js

Você deve ver "Hello, TypeScript!" sendo impresso no terminal.

Utilizando o ts-node-dev

https://umporcentoprogramador.notion.site/guia-typescript-b7ac20e20d294780935e944315ef239d 7/24
17/07/2024, 11:27 guia-typescript

O ts-node-dev combina o ts-node , que permite a execução de TypeScript

diretamente no Node.js sem compilação prévia, com a capacidade de monitorar
mudanças nos arquivos do projeto e reiniciar automaticamente. É uma ferramenta
perfeita para desenvolvimento rápido, pois você não precisa recompilar seu código
manualmente a cada mudança.

Instalação
Para começar a usar o ts-node-dev , primeiro você precisa instalá-lo. Como é uma
ferramenta de desenvolvimento, é uma boa prática instalá-la como uma dependência
de desenvolvimento em seu projeto:

npm install --save-dev ts-node-dev

Configuração
Com o ts-node-dev instalado, você pode configurá-lo para executar seu projeto.
Adicione um script no seu package.json para facilitar a execução:

"scripts": { "start": "ts-node-dev --respawn --transpile-only ./index.ts"

}

• -respawn : garante que o processo seja reiniciado após cada alteração.

• -transpile-only : acelera a execução ao pular as verificações de tipo completas
do TypeScript (que você pode querer em um ambiente de produção).

Executando o Projeto
Para rodar seu projeto com ts-node-dev , basta usar o comando:

npm run start

Isso inicia seu aplicativo e monitora qualquer alteração nos arquivos TypeScript,
reiniciando automaticamente o servidor sempre que você salvar um arquivo. Isso é
incrivelmente útil durante o desenvolvimento, pois você vê as alterações em tempo
real sem a necessidade de reiniciar manualmente o servidor.

https://umporcentoprogramador.notion.site/guia-typescript-b7ac20e20d294780935e944315ef239d 8/24
17/07/2024, 11:27 guia-typescript

Agora que seu ambiente está configurado, você está pronto para mergulhar mais
fundo no TypeScript! No próximo capítulo, vamos discutir os tipos básicos e como
usá-los para melhorar seu código.

3. Tipos Básicos em TypeScript

TypeScript traz uma camada adicional de segurança ao JavaScript através da tipagem
estática. Isso significa que você define tipos para suas variáveis e funções, o que
ajuda o compilador a detectar erros antes que seu código seja executado. Vamos
explorar os tipos básicos que você usará na maioria dos projetos.

Tipos Primitivos
1. Boolean
• O tipo mais simples, boolean , representa um valor lógico: verdadeiro ou
falso.

let estaAtivo: boolean = true;

2. Number
• Assim como no JavaScript, todos os números em TypeScript são valores de
ponto flutuante. TypeScript fornece suporte tanto para números inteiros
quanto para valores de ponto flutuante.

let total: number = 0; let pi: number = 3.14159;

3. String
• Para textos e caracteres, use o tipo . Você pode usar aspas simples ('
string
'), aspas duplas (" ") ou crases ( ) para strings que precisam de interpolação
ou múltiplas linhas.

let nome: string = "João"; let saudacao: string = `Olá, ${nome}!`;

https://umporcentoprogramador.notion.site/guia-typescript-b7ac20e20d294780935e944315ef239d 9/24
17/07/2024, 11:27 guia-typescript

4. Array
• Arrays podem ser escritos de duas formas: usando o tipo dos elementos
seguido de [] ou usando um tipo de array genérico.

let numeros: number[] = [1, 2, 3]; let frutas: Array<string> = ["maç

ã", "banana", "cereja"];

5. Tuple
• Os tuples permitem expressar um array com um número fixo de elementos
cujos tipos são conhecidos, mas não precisam ser iguais.

let endereco: [string, number] = ["Av. Paulista", 1578];

6. Enum
• Um enumpermite definir um conjunto de constantes nomeadas. O
TypeScript suporta numéricos e baseados em string.

enum Cor {Vermelho, Verde, Azul}; let c: Cor = Cor.Verde;

7. Any
• Use para capturar valores cujo tipo não é importante e sobre os quais
any
você não quer realizar checagem de tipo. Ideal para migração de JavaScript
para TypeScript.

let variavelIndefinida: any = 4; variavelIndefinida = "talvez uma stri

ng";

8. Void, Null e Undefined

• void é usado em funções que não retornam nada. null e undefined são
subtipos de todos os outros tipos.

function alerta(): void { alert("Esta é uma mensagem de alerta!"); }

https://umporcentoprogramador.notion.site/guia-typescript-b7ac20e20d294780935e944315ef239d 10/24
17/07/2024, 11:27 guia-typescript

Exercícios para Praticar

1. Trabalhando com Tipos:
• Crie variáveis para cada tipo básico e imprima-as.
• Tente atribuir valores incorretos a essas variáveis para ver o que acontece.
2. Função com Tipos:
• Escreva uma função que aceita um array de números e retorna a soma de
todos os elementos.
• Assegure-se de tipar tanto a entrada quanto a saída da função.
3. Enumerações:
• Crie um enum para representar os dias da semana e use-o em uma função
que imprime uma mensagem de acordo com o dia passado.
4. Tuplas:
• Crie uma tupla que representa um produto (com nome e preço). Use essa
tupla em uma função que imprime o nome e o preço do produto.
5. Any:
• Crie uma variável do tipo e atribua diferentes tipos de valores a ela.
any
Note como o TypeScript não emite erros nesse caso.
6. Void, Null e Undefined:
• Crie uma função que não retorna nada ( void ) e outra que retorna
undefined . Compare as duas.
Com esse conhecimento sobre tipos básicos, você está pronto para escrever código
TypeScript mais seguro e eficiente! No próximo capítulo, exploraremos como utilizar
arrays em detalhes.

4. Arrays em TypeScript
Arrays em TypeScript são utilizados para armazenar múltiplos valores em uma única
variável. Com a adição de tipos, o TypeScript permite que você defina o tipo dos
elementos dentro do array, garantindo maior controle e segurança sobre os dados
que você manipula.

https://umporcentoprogramador.notion.site/guia-typescript-b7ac20e20d294780935e944315ef239d 11/24
17/07/2024, 11:27 guia-typescript

Definindo Arrays
1. Array com Tipo Único
• Você pode declarar um array onde todos os elementos são do mesmo tipo
usando a notação de colchetes após o tipo de dado.

let numeros: number[] = [1, 2, 3, 4, 5]; let nomes: string[] = ["Ana",

"Beatriz", "Carlos"];

2. Array com Generic Array Type

• Alternativamente, TypeScript oferece a sintaxe genérica Array<tipo> para
declarar um array.

let frutas: Array<string> = ["maçã", "banana", "manga"]; let pontos: A

rray<number> = [9.5, 7.3, 8.6];

Operações Comuns em Arrays

• Adicionando Elementos
◦ Use o método .push() para adicionar elementos ao final de um array.

numeros.push(6);

• Removendo Elementos
◦ Use .pop() para remover o último elemento de um array.

let ultimoNumero = numeros.pop(); // Remove e retorna o último element

o

https://umporcentoprogramador.notion.site/guia-typescript-b7ac20e20d294780935e944315ef239d 12/24
17/07/2024, 11:27 guia-typescript

• Acessando Elementos
◦ Acesse um elemento específico pelo seu índice.

let primeiroNome = nomes[0]; // "Ana"

• Iterando sobre Elementos

◦ Arrays em TypeScript podem ser iterados usando loops como for ou
métodos como .forEach() .

numeros.forEach((numero) => { console.log(numero); });

Métodos Avançados de Arrays

• Filtrar Elementos
◦ Use .filter() para criar um novo array com elementos que satisfazem uma
condição específica.

let numerosFiltrados = numeros.filter(n => n > 2);

• Transformar Elementos
◦ O método .map() permite transformar cada elemento de um array e
retornar um novo array com os elementos transformados.

let numerosDobrados = numeros.map(n => n * 2);

• Reduzindo um Array
◦ O método .reduce() aplica uma função que resulta em um único valor
resumido de todo o array.

let soma = numeros.reduce((acumulador, atual) => acumulador + atual,

0);

https://umporcentoprogramador.notion.site/guia-typescript-b7ac20e20d294780935e944315ef239d 13/24
17/07/2024, 11:27 guia-typescript

Exercícios para Praticar

1. Criação e Acesso:
• Crie um array de strings com os nomes de cinco cidades. Em seguida,
escreva um código que imprime o nome da terceira cidade na lista.
2. Adicionando e Removendo Elementos:
• Dado o array [10, 20, 30, 40, 50] , adicione o número 35 entre 30 e 40 ,
e depois remova o número 20 do array. Imprima o array final.
3. Método .map() :
• Crie um array de números . Use o método .map() para
[1, 2, 3, 4, 5]
criar um novo array onde cada número é multiplicado por 3. Imprima o novo
array.
4. Filtrando Valores:
• Utilize o método para criar um novo array contendo apenas os
.filter()
números ímpares do array original [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] .
5. Usando .reduce() para Soma:
• Dado um array de números , utilize o método
[5, 7, 10, 12, 15]
.reduce() para calcular e imprimir a soma total dos elementos do array.

Arrays são ferramentas versáteis e poderosas em TypeScript, permitindo gerenciar e

processar conjuntos de dados com facilidade. No próximo capítulo, discutiremos
como definir e usar funções em TypeScript para realizar tarefas e manipular dados de
forma mais eficaz.

5. Funções em TypeScript
Funções são blocos fundamentais no desenvolvimento de software, permitindo
reutilizar código e criar estruturas modulares. TypeScript adiciona uma camada de
segurança adicional com a tipagem de parâmetros e valores de retorno, ajudando a
evitar muitos erros comuns.

Definindo Funções

https://umporcentoprogramador.notion.site/guia-typescript-b7ac20e20d294780935e944315ef239d 14/24
17/07/2024, 11:27 guia-typescript

1. Função com Tipos nos Parâmetros e Retorno

• Em TypeScript, você pode especificar o tipo de cada parâmetro e o tipo do
valor de retorno.

function soma(a: number, b: number): number { return a + b; }

2. Funções Anônimas e Arrow Functions

• Funções anônimas e arrow functions também suportam tipagem nos
parâmetros e no retorno.

const multiplica = (x: number, y: number): number => x * y;

Parâmetros Opcionais e Padrões

• Parâmetros Opcionais
◦ Parâmetros opcionais são marcados com um ? e devem vir após os
parâmetros obrigatórios.

function saudacao(nome: string, sobrenome?: string): string { return `

Olá, ${nome} ${sobrenome || ''}!`; }

• Parâmetros com Valores Padrão

◦ Você pode definir valores padrão para parâmetros, que serão usados caso
nenhum valor seja fornecido.

function potencia(base: number, expoente: number = 2): number { return

base ** expoente; }

Tipos Avançados em Funções

https://umporcentoprogramador.notion.site/guia-typescript-b7ac20e20d294780935e944315ef239d 15/24
17/07/2024, 11:27 guia-typescript

• Tipos de Função
◦ Você pode criar um tipo específico para uma função, que define a assinatura
da função.

type OperacaoMatematica = (x: number, y: number) => number; const subt

rai: OperacaoMatematica = (x, y) => x - y;

• Overloads de Função
◦ TypeScript permite definir múltiplas assinaturas para uma função, conhecidas
como overloads, permitindo que a função aceite diferentes tipos de
parâmetros e retorne diferentes tipos de valores.

function ajustarValor(valor: number): number; function ajustarValor(va

lor: string): string; function ajustarValor(valor: any): any { return
typeof valor === 'number' ? valor.toFixed(2) : valor.trim(); }

Exercícios para Praticar

1. Implementando Funções:
• Escreva uma função que recebe dois parâmetros,
concatenaNomes nome e
sobrenome , e retorna o nome completo.

2. Uso de Arrow Functions:

• Converta a função soma para uma arrow function e implemente a mesma
lógica.
3. Explorando Parâmetros Opcionais:
• Modifique a função para incluir um parâmetro opcional
saudacao titulo ,
que se usado, precederá o nome no cumprimento.
4. Trabalhando com Overloads:
• Crie uma função que pode receber tanto um
ajustar number quanto uma
string , retornando o valor ajustado conforme o tipo.

5. Função com Valor Padrão:

• Implemente uma função que recebe um número e um valor de
incrementa
incremento opcional, que, se não fornecido, será 1 .

https://umporcentoprogramador.notion.site/guia-typescript-b7ac20e20d294780935e944315ef239d 16/24
17/07/2024, 11:27 guia-typescript

Essas informações e exercícios ajudarão a dominar o uso de funções em TypeScript,

tornando seu código mais seguro e reutilizável. No próximo capítulo, mergulharemos
em interfaces e tipos customizados para estruturar ainda melhor seu código.

6. Interfaces e Tipos Customizados

TypeScript oferece poderosas ferramentas para a definição de estruturas de dados
complexas e contratos de função através de interfaces e tipos customizados. Neste
capítulo, vamos explorar como essas definições podem ser usadas para tipar
parâmetros de funções, garantindo que os dados passados e retornados sejam
rigorosamente verificados.

Definindo Interfaces
1. Interface para Parâmetros de Função
• Defina uma interface que especifique a estrutura esperada para os
parâmetros de uma função.

interface Usuario { nome: string; idade: number; } function imprimeUsu

ario(usuario: Usuario): void { console.log(`Nome: ${usuario.nome}, Ida
de: ${usuario.idade}`); }

2. Interface com Método Opcional

• Interfaces podem incluir métodos opcionais, o que aumenta a flexibilidade na
implementação.

interface Produto { nome: string; preco: number; descrever?(): string;

} function etiquetaProduto(produto: Produto): string { return produto.
descrever ? produto.descrever() : `${produto.nome} custa R$${produto.p
reco}`; }

Usando Tipos (Type Aliases)

https://umporcentoprogramador.notion.site/guia-typescript-b7ac20e20d294780935e944315ef239d 17/24
17/07/2024, 11:27 guia-typescript

• Type Alias para Funções

◦ Type aliases podem ser usados para definir assinaturas de funções, tornando
o código mais limpo e organizado.

type ProcessadorPagamento = (quantia: number, conta: string) => boolea

n; function processarPagamento(processador: ProcessadorPagamento, quan
tia: number, conta: string) { return processador(quantia, conta); }

• Combinando Tipos com Uniões

◦ Utilize uniões para criar tipos que podem aceitar múltiplas formas de dados.

type EntradaFormulario = string | number; function entradaDados(campo:

string, valor: EntradaFormulario) { console.log(`Entrada para ${camp
o}: ${valor}`); }

Exercícios para Praticar

1. Interface para Funções:
• Defina uma interface com propriedades para email e telefone .
Contato
Crie uma função que aceite um Contato e imprima os detalhes de contato.
2. Usando Type Alias em Funções:
• Crie um type alias que define uma função que aceita
OperacaoMatematica
dois números e retorna um número. Implemente funções para soma,
subtração, multiplicação e divisão usando este alias.
3. Interface com Métodos Opcionais:
• Crie uma interface com uma propriedade opcional
Configuracao
background (string). Escreva uma função que defina a configuração de um
aplicativo e trate a ausência de background .
4. Funções com Type Alias de União:
• Implemente uma função que aceite ou string[] como entrada e
string
retorne uma string sempre, tratando adequadamente a entrada caso seja um
array.

https://umporcentoprogramador.notion.site/guia-typescript-b7ac20e20d294780935e944315ef239d 18/24
17/07/2024, 11:27 guia-typescript

5. Parâmetros Complexos com Interfaces:

• Defina uma interface com nome , preco e um método opcional
Jogo
jogar . Crie uma função que aceite um Jogo e imprima uma descrição ou
convide o usuário a jogar, se disponível.
Este capítulo mostra como interfaces e tipos customizados podem ser integrados em
funções para criar aplicações robustas e tipicamente seguras em TypeScript. No
próximo capítulo, abordaremos conceitos de orientação a objetos em maior
profundidade.

7. Orientação a Objetos em TypeScript

TypeScript é uma linguagem que suporta os conceitos fundamentais de orientação a
objetos como classes, interfaces, herança, e polimorfismo. Vamos detalhar como
esses conceitos são implementados e utilizados em TypeScript para ajudar a
organizar e estruturar melhor seu código.

Classes em TypeScript
1. Definindo e Instanciando Classes
• Classes são usadas como moldes para criar objetos. Aqui está um exemplo
de como definir e instanciar uma classe.

class Pessoa { nome: string; idade: number; constructor(nome: string,

idade: number) { this.nome = nome; this.idade = idade; } descrever():
string { return `Nome: ${this.nome}, Idade: ${this.idade}`; } } // Ins
tanciando a classe Pessoa let pessoa1 = new Pessoa("Maria", 30); conso
le.log(pessoa1.descrever());

https://umporcentoprogramador.notion.site/guia-typescript-b7ac20e20d294780935e944315ef239d 19/24
17/07/2024, 11:27 guia-typescript

2. Herança e Instanciação
• Demonstração de como uma classe pode herdar de outra e como instanciar
a classe derivada.

class Empregado extends Pessoa { salario: number; constructor(nome: st

ring, idade: number, salario: number) { super(nome, idade); // Chama o
construtor da classe base this.salario = salario; } descrever(): strin
g { return `${super.descrever()}, Salário: R$${this.salario}`; } } //
Instanciando a classe Empregado let empregado1 = new Empregado("João",
45, 5000); console.log(empregado1.descrever());

Encapsulamento e Modificadores de Acesso

• Classes com Encapsulamento
◦ Exemplo de como encapsular propriedades e permitir acesso controlado
através de métodos.

class Conta { private saldo: number; constructor(saldoInicial: number)

{ this.saldo = saldoInicial; } depositar(valor: number): void { if (va
lor > 0) { this.saldo += valor; } } obterSaldo(): number { return thi
s.saldo; } protected calcularJuros(taxa: number): void { this.saldo +=
this.saldo * taxa; } } // Instanciando e usando a classe Conta let min
haConta = new Conta(1000); minhaConta.depositar(500); console.log(`Sal
do atual: R$${minhaConta.obterSaldo()}`);

Polimorfismo
• Polimorfismo com Métodos Sobrescritos
◦ Como classes derivadas podem sobrescrever métodos de suas classes base.

class ContaPoupanca extends Conta { calcularJuros(): void { super.calc

ularJuros(0.02); // Aplica uma taxa de juros específica } } // Instanc
iando e usando a classe ContaPoupanca let poupanca = new ContaPoupanca
(2000); poupanca.calcularJuros(); console.log(`Saldo com juros: R$${po
upanca.obterSaldo()}`);

https://umporcentoprogramador.notion.site/guia-typescript-b7ac20e20d294780935e944315ef239d 20/24
17/07/2024, 11:27 guia-typescript

Exercícios para Praticar

1. Criando e Instanciando Classes:
• Defina uma classe com propriedades para marca , modelo , e
Carro ano .
Adicione um método que imprime uma descrição do carro.
2. Explorando Herança:
• Crie uma classe que herda de
CarroEletrico Carro e adiciona uma
propriedade para a capacidade da bateria.
3. Uso de Modificadores de Acesso:
• Modifique a classe para prevenir acesso direto ao saldo, fornecendo
Conta
métodos para depositar e obter o saldo atual.
4. Implementando Polimorfismo:
• Crie uma classe que sobrescreve o método
ContaCorrente calcularJuros
com uma taxa específica para contas correntes.
5. Classes com Interfaces:
• Implemente uma interface Motorizavel com um método ligarMotor . Crie
classes Barco e Motocicleta que implementam esta interface.

Este capítulo fornece uma visão geral sólida sobre como utilizar conceitos de
orientação a objetos em TypeScript para construir aplicações mais robustas e
organizadas. No próximo tópico, vamos explorar Generics, outro recurso poderoso
do TypeScript.

8. Generics em TypeScript
Generics são uma das características mais poderosas em linguagens de tipagem
estática como TypeScript. Eles permitem que você crie componentes que são
capazes de trabalhar com qualquer tipo de dado, mantendo a segurança dos tipos.

O que são Generics?

https://umporcentoprogramador.notion.site/guia-typescript-b7ac20e20d294780935e944315ef239d 21/24
17/07/2024, 11:27 guia-typescript

1. Introdução aos Generics

• Generics permitem que você defina uma função, uma classe ou uma interface
que pode trabalhar com qualquer tipo de dado que você especificar mais
tarde.

function identidade<T>(arg: T): T { return arg; }

2. Usando Generics em Funções

• Você pode passar qualquer tipo de dado para funções que usam generics, o
que as torna extremamente versáteis.

let saidaString = identidade<string>("minhaString"); let saidaNumero =

identidade<number>(100);

Generics com Interfaces

• Interfaces que Usam Generics
◦ Generics podem ser usados em interfaces para definir propriedades ou
métodos que serão determinados quando a interface for implementada.

interface ParGenerico<K, V> { chave: K; valor: V; } let item: ParGener

ico<number, string> = { chave: 1, valor: "Teste" };

Generics em Classes
• Classes com Generics
◦ Classes também podem ser definidas com generics, permitindo que você
crie estruturas de dados dinâmicas que trabalham com qualquer tipo de
dado.

class Caixa<T> { conteudo: T; constructor(valor: T) { this.conteudo =

valor; } } let caixaString = new Caixa<string>("Hello World"); let cai
xaNumero = new Caixa<number>(123);

https://umporcentoprogramador.notion.site/guia-typescript-b7ac20e20d294780935e944315ef239d 22/24
17/07/2024, 11:27 guia-typescript

Generics com Restrições

• Restringindo Generics
◦ Você pode restringir os tipos que um generic pode aceitar, usando a palavra-
chave extends .

function tamanho<T extends { length: number }>(arg: T): number { retur

n arg.length; } let tamanhoString = tamanho("Teste"); // Ok let tamanh
oArray = tamanho([1, 2, 3, 4]); // Ok // let tamanhoNumero = tamanho(1
0); // Erro: 'number' não tem 'length'

Exercícios para Praticar

1. Funções Generics:
• Crie uma função generic primeiroElemento que retorna o primeiro elemento
de um array de qualquer tipo.
2. Generics com Interfaces:
• Defina uma interface que suporte operações de 'push' e 'pop'.
Pilha<T>
Implemente esta interface em uma classe.
3. Classes com Generics:
• Implemente uma classe que simule a funcionalidade de um
Mapa<K, V>
objeto Map, permitindo adicionar e buscar pares de chave-valor.
4. Generics com Restrições:
• Crie uma função que aceite somente arrays ou strings como argumento,
fazendo uso de generics com restrições.
5. Generics Complexos:
• Escreva uma função que combine dois objetos e retorne um
mergeObjects
novo objeto que combine as propriedades de ambos, usando generics.

Generics são essenciais para criar software robusto e reutilizável em TypeScript,

oferecendo a flexibilidade para trabalhar com diversos tipos enquanto mantém as
garantias de tipo. No próximo tópico, exploraremos tipos avançados e utilitários que
TypeScript oferece para facilitar ainda mais a manipulação de dados.

https://umporcentoprogramador.notion.site/guia-typescript-b7ac20e20d294780935e944315ef239d 23/24
17/07/2024, 11:27 guia-typescript

9. Tipos Avançados e Utilitários em

TypeScript
TypeScript oferece uma variedade de tipos avançados e utilitários que ajudam a lidar
com situações mais complexas de tipagem, permitindo uma maior flexibilidade e
reusabilidade do código.

Tipos Union e Intersection

1. Union Types
• Union types permitem que uma variável aceite mais de um tipo de dado.

type NumeroOuString = number | string; function exibirId(id: NumeroOuS

tring) { console.log(`ID: ${id}`); } exibirId(101); // Válido exibirId
("202"); // Válido

2. Intersection Types
• Intersection types combinam múltiplos tipos em um só, juntando suas
propriedades.

interface Negocio { nome: string; fundacao: Date; } interface Empregad

os { quantidade: number; } type Empresa = Negocio & Empregados; let mi
nhaEmpresa: Empresa = { nome: "TechCorp", fundacao: new Date(), quanti
dade: 100 };

Tipos Condicionais
• Conditional Types
◦ Tipos condicionais permitem a criação de tipos que dependem de condições.

type PequenoOuGrande<T> = T extends "pequeno" ? number : string; let t

amanhoPequeno: PequenoOuGrande<"pequeno"> = 10; // number let tamanhoG
rande: PequenoOuGrande<"grande"> = "muito grande"; // string

Utilitários Comuns
T S i tf ái f õ tilitá i j d i l ti d

https://umporcentoprogramador.notion.site/guia-typescript-b7ac20e20d294780935e944315ef239d 24/24