*/}
--------------------------------------------------------------------------------
/src/exemplos/any-vs-unknown-e-never.ts:
--------------------------------------------------------------------------------
1 | let valor: unknown; // unknown é um tipo que pode receber qualquer valor
2 | valor = 5;
3 | valor = 'Max';
4 | let nome: string;
5 |
6 | // nome = valor; Isso não vai funcionar. O tipo unknown não pode ser arbitrariamente atribuído
7 | if (typeof valor === 'string') {
8 | nome = valor; // Isso funciona. Esse tipo só pode ser atribuido se uma validação for feita
9 | }
10 |
11 | let valorAny: any; // Como já foi visto, o any também recebe qualquer valor
12 | valorAny = true;
13 | valorAny = 10
14 | nome = valorAny; // O perigo é que o any pode ser atribuído a qualquer variável tipada sem que seu tipo seja verificado
15 |
16 | // Não é uma prática ruim usar unknown, já que ele força uma validação de tipos. Diferente do any, que como já vimos pode ser usado sem se preocupar com tipage.
17 |
18 | function geradorDeErro(mensagem: string, codigoDeErro: number): never { // never quer dizer que o script pode ser interrompido ou nunca chegar a um fim
19 | throw {message: mensagem, errorCode: codigoDeErro }; // Nesse caso ele foi interrompido
20 | }
21 |
22 | geradorDeErro('Um erro ocorreu!', 500); // O mesmo tipo poderia ser usado se fosse usado um while loop que nunca é finalizado
--------------------------------------------------------------------------------
/src/exemplos/any.ts:
--------------------------------------------------------------------------------
1 | // O any é uma notação que diz que a propriedade pode ter qualquer tipo
2 | let cpf: any;
3 | // Aqui ela recebe uma string
4 | cpf = '01620445000';
5 | // Aqui recebe um boolean
6 | cpf = true;
7 | // E agora um número
8 | cpf = 10;
9 | // O uso de any faz com que typescript trate suas variáveis como JS
10 |
11 | // Essa função abaixo espera uma string
12 | function apresentarCPF(cpf: string) {
13 | console.log(cpf)
14 | }
15 |
16 | // E aqui passamos a variável cpf que contém um number, mas como ela é um any, o TS não reclama porque ela pode conter qualquer atributo, inclusive uma string
17 | apresentarCPF(cpf);
18 | /**
19 | Usar any tira poder do typescript e pode criar incoerências no seu projeto
20 | O any é comumente usado quando um objeto desconhecido é manipulado, ou quando uma refatoração de JS para TS é aplicada rapidamente sem tipar os objetos utilizados
21 | É uma má prática que reduz a velocidade dos times no longo prazo e foge do propósito do typescript
22 | Com o uso do ESLint é possível configurar seu projeto para não permitir o uso explícito de any
23 | */
--------------------------------------------------------------------------------
/src/exemplos/basico.ts:
--------------------------------------------------------------------------------
1 | const button = document.getElementById('button');
2 | const input1 = document.getElementById('input1') as HTMLInputElement;
3 | const input2 = document.getElementById('input2') as HTMLInputElement;
4 |
5 | /**
6 | * Exemplo de função com parâmetros tipados
7 | */
8 | function somaValidaComPrint(numero1: number, numero2: number, printarResultado: boolean, frase: string) {
9 | const resultado = numero1 + numero2;
10 | if (printarResultado) {
11 | console.log(frase + resultado);
12 | }
13 | return resultado;
14 | }
15 |
16 | // A variável abaixo tem seu tipo inferido pelo valor inicial
17 | let printarResultado = true;
18 | // já nesse caso estamos dizendo explicitamente qual é o seu tipo
19 | let frase: string;
20 | // E só depois iniciamos ela com um valor
21 | frase = "O número é ";
22 |
23 | // Como a busca pelo button na linha 1 pode trazer um null (já que esse id pode não estar presente no index.html), é importante confirmar se ele tem um valor
24 | if (button) {
25 | button.addEventListener('click', () => {
26 | console.log(somaValidaComPrint(Number(input1.value), Number(input2.value), printarResultado, frase));
27 | });
28 | }
--------------------------------------------------------------------------------
/src/exemplos/combinando.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Quando tipamos podemos passar mais de um tipo, como no caso abaixo em que cada parâmetro contém o tipo input, que é igual aos tipos number ou string
3 | * No exemplo abaixo também ocorre um tratamento interno na função para que ela lide com os diferentes tipos de cada parâmetro
4 | */
5 |
6 | // Também é possível criar tipos! E combinar tipos com esses tipos!
7 | type input = number | string;
8 |
9 | function juntar(input1: input, input2: input) {
10 | let resultado: input;
11 | if (typeof input1 === 'string' || typeof input2 === 'string') {
12 | resultado = input1.toString() + input2.toString();
13 | } else {
14 | resultado = input1 + input2
15 | }
16 | return resultado;
17 | }
18 |
19 | // E aqui temos dois exemplos de uma chamada para essa função, um com strings e um com números
20 | console.log(juntar('bom ', 'dia'));
21 | console.log(juntar(1, 2));
22 |
--------------------------------------------------------------------------------
/src/exemplos/enum.ts:
--------------------------------------------------------------------------------
1 | const sarah = {
2 | name: 'Sarah',
3 | idade: 26,
4 | casado: true,
5 | trabalho: 'Engenheira' // Nesse campo é dito que a sarah trabalha como 'Engenheira'
6 | }
7 |
8 | const maria = {
9 | name: 'Maria',
10 | idade: 23,
11 | casado: false,
12 | trabalho: 'engenheira' // E aqui é dito que maria trabalha como 'engenheira'.
13 | }
14 |
15 | // Isso está correto? Existe diferença entre 'Engenheira' e 'engenheira'? Acredito que não. Isso deve ter sido um erro cometido em desenvolvimento.
16 |
17 | // Para resolver isso vamos usar a feature Enum do TypeScript para criar o enum Profissao
18 | enum Profissao {
19 | Professor,
20 | Engenheiro,
21 | Pintor,
22 | Porteiro
23 | }
24 |
25 | // E para garantir que o enum vai ser usado corretamente, vamos criar um tipo Pessoa também
26 | type Pessoa = {
27 | name: string,
28 | idade: number,
29 | casado: boolean,
30 | trabalho: Profissao // Aqui inserimos o enum como um tipo
31 | }
32 |
33 | const gabriel: Pessoa = {
34 | name: 'Gabriel',
35 | idade: 26,
36 | casado: false,
37 | trabalho: Profissao.Engenheiro // E aqui usamos ele para definir de forma padronizada a profissão de cada objeto do tipo Pessoa
38 | }
39 |
40 | const mario: Pessoa = {
41 | name: 'Mario',
42 | idade: 26,
43 | casado: false,
44 | trabalho: Profissao.Engenheiro // Tudo padronizado e consistente
45 | }
--------------------------------------------------------------------------------
/src/exemplos/exemplo-validacao.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Caso algum dos Ids abaixo não esteja presente no index.html, a função não vai retornar os itens e isso pode causar erros no resto do arquivo.
3 | */
4 | const button = document.getElementById('button');
5 | const input1 = document.getElementById('input1');
6 | const input2 = document.getElementById('input2');
7 |
8 | /**
9 | * A função abaixo não valida se os itens somados são número. Logo situações inesperadas podem ocorrer.
10 | * Por exemplo, somarSemValidar(1, "3") vai devolver "13"
11 | */
12 | function somarSemValidar(numero1, numero2) {
13 | return numero1 + numero2;
14 | }
15 |
16 | button.addEventListener('click', () => {
17 | console.log(somarSemValidar(input1.value, input2.value));
18 | });
19 |
20 | /**
21 | * Na função abaixo uma validação é feita para confirmar se os itens são números e é feita uma conversão caso não sejam.
22 | */
23 | function somarValidando(numero1, numero2) {
24 | if (typeof numero1 !== 'number' || typeof numero2 !== 'number') {
25 | return +numero1 + +numero2;
26 | } else {
27 | return numero1 + numero2;
28 | }
29 | }
30 |
31 | button.addEventListener('click', () => {
32 | console.log(printarSomaValida(input1.value, input2.value));
33 | });
--------------------------------------------------------------------------------
/src/exemplos/functions.ts:
--------------------------------------------------------------------------------
1 | // Como já vimos antes, O typescript infere bastante. Nesse caso ele infere que o retorno dessa função é do tipo number
2 | function adicionar(n1: number, n2: number) {
3 | return n1 + n2;
4 | }
5 |
6 | let resultado: number;
7 | // Por ter inferido que o retorno é um number, a função pode ser usada para atribuir valor para resultado, que é do mesmo tipo.
8 | resultado = adicionar(1, 4);
9 |
10 | /**
11 | * Aqui temos uma função que retorna uma string por causa do uso de toString(). Ela é praticamente igual a função acima, com apenas uma pequena alteração diferindo as duas
12 | * Como o dia a dia dos desenvolvedores é corrido, pequenas mudanças como essa podem ocorrer o tempo todo alterando uma função
13 | * Essa estrutura parece frágil e suscetível a erros e não é isso que queremos com typescript
14 | */
15 | function adicionarNumeros(n1: number, n2: number) {
16 | return n1.toString() + n2;
17 | }
18 | /**
19 | * resultado = adicionarNumeros(1, 4);
20 | * No caso acima um erro vai ser apresentado porque, por inferência, o retorno de adicionarNumeros é do tipo string e resultado espera um number
21 | * Então temos um problema aqui, porque funções podem ser alteradas e isso pode implicar em erros em outras partes do código.
22 | */
23 |
24 | // Uma solução para isso é explicitamente tipar o retorno de uma função. Se algo for modificado dentro dela, o próprio TS pode reclamar caso o retorno não seja number
25 | function adicionarExplicitamenteNumber(n1: number, n2: number): number {
26 | return n1 + n2;
27 | }
28 |
29 | resultado = adicionarExplicitamenteNumber(1, 4);
30 |
31 | // Funções também podem não retornar nada, que é o caso do tipo void
32 | function printarValor(num: number): void {
33 | console.log('O valor é '+ num)
34 | }
35 |
36 | printarValor(3);
37 |
38 | function multiplicarValorPor2(numero: number) {
39 | return numero * 2;
40 | }
41 | /**
42 | * Funções também podem ser passadas como parâmetro. O tipo delas é estruturado assim:
43 | * (parâmetro: tipo do parâmetro) => tipo do retorno
44 | */
45 | function adicionarETratar(n1: number, n2: number, callback: (num: number) => void) {
46 | resultado = n1 + n2;
47 | callback(resultado); // Aqui ela é chamada
48 | }
49 |
50 | adicionarETratar(1, 5, printarValor);
51 | console.log(adicionarETratar(1, 5, multiplicarValorPor2));
--------------------------------------------------------------------------------
/src/exemplos/objetos.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * A inferência de tipo também funciona para objetos.
3 | * Se estiver usando o visual studio code, tente passar o mouse por cima de um objeto não tipado e veja a mágica.
4 | */
5 | const desenvolvedor = {
6 | name: 'Marco',
7 | idade: 25,
8 | salario: 15000
9 | }
10 |
11 | /**
12 | * desenvolvedor.salario = "não tem" devolveria um erro, pois foi inferido que desenvolvedor.salario é do tipo number
13 | * Assim percebemos que enquanto o objeto pode ser escrito de qualquer forma, o uso posterior tem que respeitar a forma como ele foi inicializado
14 | */
15 |
16 | // Nesse caso abaixo a tipagem foi explícita, então é necessário respeitar o tipo durante a criação do objeto.
17 | const carro: {cor: string, numeroDoPneu: number, conversivel: boolean} = {
18 | cor: 'vermelho',
19 | numeroDoPneu: 10,
20 | conversivel: true
21 | }
22 |
23 | /**
24 | * Com esses dois exemplos percebemos que objetos seguem as mesmas regras de variáveis comuns
25 | * Ambos podem ser inicializadas de qualquer forma, mas depois precisam respeitar o tipo
26 | * E caso sejam tipados no início, seu primeiro valor tem que respeitar esse tipo
27 | */
28 |
29 | // Vamos usar pela primeira vez o tipo lista
30 | const estudante: {nome: string, idade: number, materias: string[]} = {
31 | nome: 'Amanda',
32 | idade: 24,
33 | materias: ['Algoritmos', 'Lógica para computação']
34 | }
35 |
36 | function listar(lista: string[]) {
37 | for (const item of lista) {
38 | console.log('- ' + item)
39 | }
40 | }
41 |
42 | // A função reconhece estudante.materias como string[]
43 | listar(estudante.materias)
44 |
--------------------------------------------------------------------------------
/src/respostas/desafio1.ts:
--------------------------------------------------------------------------------
1 | // Resposta 1
2 | const funcionario = {
3 | codigo: 10,
4 | nome: 'João'
5 | };
6 |
7 | // Resposta 2
8 | const funcionario2: {codigo: number, nome: string} = {
9 | codigo: 10,
10 | nome: 'joao'
11 | }
12 |
13 | // Respostas 3 e 4
14 | interface Funcionario { // Já conhece interfaces? https://blog.logrocket.com/types-vs-interfaces-in-typescript/
15 | codigo: number,
16 | nome: string
17 | };
18 |
19 | const funcionarioObj = {} as Funcionario;
20 | funcionarioObj.codigo = 10;
21 | funcionarioObj.nome = 'João';
22 |
23 | const funcionarioObj2: Funcionario = {
24 | codigo: 10,
25 | nome: 'João'
26 | }
--------------------------------------------------------------------------------
/src/respostas/desafio2.ts:
--------------------------------------------------------------------------------
1 |
2 | enum Trabalho {
3 | Atriz,
4 | Padeiro
5 | }
6 |
7 | type Humano = {
8 | nome: string,
9 | idade: number,
10 | profissao: Trabalho
11 | }
12 |
13 | let pessoa1: Humano = {
14 | nome: 'maria',
15 | idade: 29,
16 | profissao: Trabalho.Atriz
17 | };
18 |
19 | let pessoa2: Humano = {
20 | nome: 'roberto',
21 | idade: 19,
22 | profissao: Trabalho.Padeiro
23 | };
24 |
25 | let pessoa3: Humano = {
26 | nome: 'laura',
27 | idade: 32,
28 | profissao: Trabalho.Atriz
29 | };
30 |
31 | let pessoa4: Humano = {
32 | nome: "carlos",
33 | idade: 19,
34 | profissao: Trabalho.Padeiro
35 | }
--------------------------------------------------------------------------------
/src/respostas/desafio3.ts:
--------------------------------------------------------------------------------
1 | export {} // Para não reclamar de variáveis duplicadas
2 | /**
3 | Em todos os casos abaixo de uso do getElementById(), o elemento é potencialmente nulo e ifs são necessários para garantir que seu código vai funcionar da melhor forma.
4 | No entanto, vão existir situações em que o desenvolvedor vai ter certeza de que o campo está lá e ele pode escrever o código da seguinte maneira:
5 | document.getElementById('limpar-saldo')!;
6 | A exclamação no fim é um sinal de que aquele campo não é nulo e que essa função realmente vai trazer algo. Assim, os ifs não são necessários.
7 | Como exemplo, vou seguir essa metodologia no campo 'botaoLimpar'.
8 | */
9 | let botaoAtualizar = document.getElementById('atualizar-saldo');
10 | let botaoLimpar = document.getElementById('limpar-saldo')!;
11 | let soma = document.getElementById('soma')! as HTMLInputElement;
12 | let campoSaldo = document.getElementById('campo-saldo');
13 |
14 | let saldoTotal = 0
15 |
16 | limparSaldo()
17 |
18 | function somarAoSaldo(soma: number) {
19 | if (campoSaldo) {
20 | saldoTotal += soma
21 | campoSaldo.innerHTML = saldoTotal.toString();
22 | limparCampoSoma();
23 | }
24 | }
25 |
26 | function limparCampoSoma() {
27 | soma.value = "";
28 | }
29 |
30 | function limparSaldo() {
31 | if (campoSaldo) {
32 | saldoTotal = 0;
33 | campoSaldo.innerHTML = saldoTotal.toString();
34 | }
35 | }
36 |
37 | if (botaoAtualizar) {
38 | botaoAtualizar.addEventListener('click', () => {
39 | somarAoSaldo(Number(soma.value));
40 | });
41 | }
42 | botaoLimpar.addEventListener('click', () => { // Percebam que aqui o typescript não acusou o botao de ser nulo e não precisei do if. Caso queiram fazer o teste, retirem a exclamação.
43 | limparSaldo();
44 | });
45 |
46 | /**
47 |