├── 00_typescript ├── Funcoes.ts ├── HelloWorld.ts ├── Indefinido.ts ├── Interfaces.ts ├── Nulo.ts ├── README.md ├── Rest.ts ├── Somar.ts ├── Spread01.ts ├── Spread02.ts ├── Tabuada.ts ├── package-lock.json └── package.json ├── 01_carrossel └── README.md ├── 02_carrinho └── README.md ├── 03_decimal_nest └── README.md ├── 04_form_contato └── README.md ├── 05_busca_nome └── README.md └── README.md /00_typescript/Funcoes.ts: -------------------------------------------------------------------------------- 1 | /*Cria uma função tipada (number), que recebe 2 | dois parâmetros number (obrigatorios) e 3 | um terceiro parâmetro number (opcional) 4 | A ? indica que o parâmetros é Opcional*/ 5 | function somar(numero1: number, numero2: number, numero3?: number): number{ 6 | 7 | if(numero3 != undefined) 8 | return numero1 + numero2 + numero3; 9 | 10 | return numero1 + numero2; 11 | } 12 | 13 | //Cria duas Constantes para testar a Função 14 | const resultado2 = somar(10, 20); 15 | console.log(resultado2); 16 | 17 | const resultado3 = somar(10, 20, 30); 18 | console.log(resultado3); 19 | 20 | export{} -------------------------------------------------------------------------------- /00_typescript/HelloWorld.ts: -------------------------------------------------------------------------------- 1 | //Exibir dados na Tela 2 | console.log("Hello World!"); 3 | -------------------------------------------------------------------------------- /00_typescript/Indefinido.ts: -------------------------------------------------------------------------------- 1 | function teste(): void { 2 | //A variável aceita dois tipos de valores 3 | // Null ou Undefined 4 | let variavel: number | undefined; 5 | 6 | if (variavel === undefined) { 7 | console.log('Variável sem valor definido.'); 8 | } else if (variavel === null) { 9 | console.log('Variável com valor nulo'); 10 | } 11 | } 12 | 13 | teste(); -------------------------------------------------------------------------------- /00_typescript/Interfaces.ts: -------------------------------------------------------------------------------- 1 | //Cria uma Interface (um modelo de dados) 2 | interface Pessoa{ 3 | nome: string; 4 | sobrenome: string; 5 | } 6 | 7 | //Cria 2 Objetos da Interface Pessoa 8 | let pessoa1 = { 9 | nome: 'João', 10 | sobrenome: 'Moreira' 11 | } 12 | 13 | let pessoa2 = { 14 | nome: 'Pedro', 15 | sobrenome: 'Silva' 16 | } 17 | 18 | //Cria uma função que retorna os dados do Objeto Pesssoa 19 | function listarDados(pessoa: Pessoa){ 20 | return `${pessoa.nome} ${pessoa.sobrenome}`; 21 | } 22 | 23 | //Executa a Função 24 | const listarPessoa1 = listarDados(pessoa1) 25 | console.log(listarPessoa1); 26 | 27 | console.log(listarDados(pessoa2)) 28 | 29 | export{} -------------------------------------------------------------------------------- /00_typescript/Nulo.ts: -------------------------------------------------------------------------------- 1 | function dividir(numero1: number, numero2: number) { 2 | if (numero2 === 0) { 3 | return { 4 | error: 'Não existe divisão por zero.', 5 | result: null 6 | }; 7 | } else { 8 | return { 9 | error: null, 10 | result: numero1 / numero2 11 | }; 12 | } 13 | } 14 | 15 | console.log(dividir(10, 2)); 16 | console.log(dividir(10, 0)); -------------------------------------------------------------------------------- /00_typescript/README.md: -------------------------------------------------------------------------------- 1 |

Introdução ao TypeScript

2 | 3 | 4 | 5 | TypeScript é uma linguagem criada pela Microsoft e nada mais é que um _superset_ do ECMAScript que, por sua vez, é um _superset_ do JavaScript Clássico. Isso significa que praticamente qualquer código JavaScript também é um código TypeScript. Na prática, o código TypeScript é transpilado e convertido para ECMAScript. Por isso, pode ser utilizado normalmente em qualquer projeto JavaScript. 6 | 7 | > **Transpiler** é um programa que **traduz um código escrito em uma Linguagem de Programação para o código de uma outra Linguagem de Programação**. 8 | > 9 | > **ECMAScript**: Toda a Linguagem de Programação precisa de uma padronização para reger as regras e o nivelamento da linguagem ao nível global, e para o JavaScript o ECMAScript é a sua padronização, ou seja, a versão oficial da linguagem. O nome JavaScript, na verdade, é uma tradição do mercado de desenvolvimento, porque o nome oficial da linguagem é ECMAScript. 10 | 11 | O TypeScript foi construído sobre o JavaScript. Primeiro, você escreve o código TypeScript, e em seguida, você transpila (traduz) o código TypeScript em código JavaScript, através do transpiler do TypeScript. Depois de gerar o código JavaScript, você pode utilizar em qualquer ambiente que execute JavaScript, como o seu navegador, por exemplo. 12 | 13 | Os arquivos TypeScript usam a extensão `.ts`, ao invés da extensão `.js`, utilizada pelos arquivos JavaScript. O diagrama a seguir mostra o processo de Transpilação do TypeScript para o JavaScript: 14 | 15 |
16 | 17 | O TypeScript usa a mesma sintaxe do JavaScript e adiciona sintaxes adicionais para tipos de suporte. Se você tiver um programa JavaScript que não tenha nenhum erro de sintaxe, ele também poderá ser executado como um programa TypeScript. 18 | 19 | Outro ponto importante a ser destacado no TypeScript, é que ele permite que a pessoa desenvolvedora crie aplicações 100% JavaScript desde o Backend (utilizando Node e Nest, por exemplo) até o Frontend (utilizando React e Angular, por exemplo). Além disso, também é possível desenvolver um App Mobile, que consome a API desenvolvida no Backend, através do React Native. 20 | 21 |
22 | 23 |
Documentação: TypeScript
24 | 25 |
26 | 27 |

1. Instalação

28 | 29 | 30 | 31 | Para utilizar o TypeScript, precisamos ter o Node instalado na máquina. Através do Gerenciador de Pacotes do Node faremos a instalação do Transpiler do TypeScript: 32 | 33 | 1. Crie uma pasta na **Área de Trabalho**, chamada **typescript**. 34 | 2. Abra esta pasta no VSCode, clicando com o botão direito do mouse sobre a pasta **typescript** e no menu que será aberto, clique na opção **Abrir com o Code**. 35 | 3. Abra o Terminal do VSCode e digite o comando abaixo para instalar o **TypeScript**: 36 | 37 | ```bash 38 | npm install -g typescript 39 | ``` 40 | 41 | 4. Na sequência, digite o comando abaixo para checar se o TypeScript foi instalado corretamente: 42 | 43 | ```bash 44 | tsc -v 45 | ``` 46 | 47 | 5. Será exibido na tela a versão do TypeScript: 48 | 49 | ```bash 50 | Version 5.0.4 51 | ``` 52 | 53 | *A versão instalada na sua máquina pode ser dieferente.* 54 | 55 | > Caso apareça a mensagem: 56 | > 57 | > ```bash 58 | > "tsc is not recognized as an internal or external command". 59 | > ``` 60 | > 61 | > 1. Na Barra de Pesquisar do Windows, localize o app **Editar as Variáveis de Ambiente do Sistema**. 62 | > 2. Será aberta a janela abaixo. Clique no botão **Variáveis de Ambiente** 63 | > 3. No item **Variáveis de Ambiente do Usuário**, dê um duplo clique no item **path** 64 | > 4. Verifique se existe o caminho para a pasta do NPM (**c:\users\seu_usuario\AppData\Roaming\npm**), como mostra a imagem abaixo: 65 | > 5. Se não existir, adicione este caminho através do botão **Novo**. 66 | 67 | 6. TypeScript instalado, vamos instalar a Biblioteca **ts-node**, para simplificar o uso do **TypeScript**, através do comando: 68 | 69 | ```bash 70 | npm install -g ts-node 71 | ``` 72 | 7. Na sequência, digite o comando abaixo para checar se o ts-node foi instalado corretamente: 73 | 74 | ```bash 75 | ts-node -v 76 | ``` 77 | 78 | 8. Será exibido na tela a versão do ts-node: 79 | 80 | ```bash 81 | v10.9.1 82 | ``` 83 | 84 | *A versão instalada na sua máquina pode ser dieferente.* 85 | 86 |
87 | 88 |

2. Exemplo de código: Hello World!

89 | 90 | 91 | 92 | 1. Crie um novo arquivo, na pasta **typescript**, chamado **HelloWorld.ts**. 93 | 2. Insira o código abaixo: 94 | 95 | ```typescript 96 | console.log("Hello World!") 97 | ``` 98 | 99 | 3. No Terminal do VSCode, execute o comando abaixo: 100 | 101 | ```bash 102 | ts-node HelloWorld.ts 103 | ``` 104 | 105 | **Resultado do Código:** 106 | 107 | ```bash 108 | Hello World! 109 | ``` 110 | 111 |
112 | 113 |
Documentação - TypeScript: Instalação
114 | 115 |
116 | 117 |

3. Tipos de dados

118 | 119 | 120 | 121 | O TypeScript dispõe de inúmeros recursos que complementam o JavaScript. Provavelmente o recurso mais importante do TypeScript são os tipos. Você pode definir qual será o tipo que uma variável deve receber, que uma função deve retornar, entre outros. Os principais tipos de dados são: 122 | 123 |

3.1. Any

124 | 125 | ```typescript 126 | let variavel: any = 'qualquer coisa' 127 | console.log("Valor da varíavel any:", variavel) 128 | 129 | variavel = 22 130 | console.log("Valor da varíavel any:", variavel) 131 | 132 | variavel = true 133 | console.log("Valor da varíavel any:", variavel) 134 | ``` 135 | 136 | É o equivalente a uma variável escrita em JavaScript. O tipo _any_ pode receber qualquer valor que você quiser. 137 | 138 |

3.2.Boolean

139 | 140 | ```typescript 141 | let variavel: boolean = true 142 | console.log("Valor da varíavel boolean:", variavel) 143 | ``` 144 | 145 | São variáveis do tipo true ou false. 146 | 147 |

3.3.Number

148 | 149 | ```typescript 150 | let variavel: number = 10 151 | console.log("Valor da varíavel number:", variavel) 152 | 153 | variavel = 10.2 154 | console.log("Valor da varíavel number:", variavel) 155 | 156 | variavel = 0x01 157 | console.log("Valor da varíavel number:", variavel) 158 | ``` 159 | 160 | O tipo Number é um pouco diferente do que se vê em outras linguagens. O TypeScript não dispõe de números inteiros, sem sinal ou algo do tipo. Todos os números são definidos como números reais e podem ser representados, inclusive, por binários, hexadecimais, entre outros. Número é número. 161 | 162 |

3.4.String

163 | 164 | ```typescript 165 | let variavel: string = 'Eu sou uma String' 166 | ``` 167 | 168 | Strings têm uma variação muito interessante, que são os _Template Strings_. Você pode quebrar linhas e inserir variáveis muito mais facilmente que no JavaScript. Para isso, basta abrir a _string_ com o caractere acento grave (`). 169 | 170 | ```typescript 171 | let mensagem: string = 'Hello, World.' 172 | let mensagemRecebida: string = ` 173 |
174 |

${mensagem}

175 |
176 | ` 177 | ``` 178 | 179 |

3.5.Array

180 | 181 | Há duas formas de se utilizar uma _array_. 182 | 183 | ```typescript 184 | let vetor1: any[] 185 | let vetor2: Array 186 | ``` 187 | 188 | Ambas representam a mesma coisa. 189 | 190 |
191 | 192 |

3.6. Tupla

193 | 194 | ```typescript 195 | let tupla: [string, any] = ['key', 'value'] 196 | ``` 197 | 198 | Outro tipo bem comum em outras linguagens são as _tuples_ (tuplas). Elas são muito semelhantes a um array, porém com tamanhos e valores de tipos bem definidos. São bastante úteis, porém pouco exploradas. _Tuplas_ são muito flexíveis. 199 | 200 | ```typescript 201 | const tupla: [string, number] = ['Márcia da Silva', 30]; 202 | ``` 203 | 204 |
205 | 206 |
Documentação - TypeScript: Tipos de dados
207 | 208 |
209 | 210 |

4. Functions

211 | 212 | 213 | 214 | Com o TypeScript nós podemos definir os tipos dos parâmetros e quais valores uma função deve retornar. 215 | 216 | ```typescript 217 | function somar(numero1: number, numero2: number): number { 218 | return numero1 + numero2 219 | } 220 | 221 | let resultado: number = somar(20, 10); 222 | 223 | console.log(resultado); 224 | 225 | export {} 226 | ``` 227 | 228 | Quando queremos que uma função não retorne nada, temos o tipo especial _void_. 229 | 230 | ```typescript 231 | function tabuada(numero: number): void { 232 | 233 | for (var contador = 1; contador <= 10; contador++){ 234 | 235 | let resultado = numero * contador; 236 | console.log(`${numero} x ${contador} = ${resultado}`); 237 | 238 | } 239 | 240 | } 241 | 242 | tabuada(5); 243 | ``` 244 | **Resultado do Código:** 245 | 246 | ```bash 247 | 5 x 1 = 5 248 | 5 x 2 = 10 249 | 5 x 3 = 15 250 | 5 x 4 = 20 251 | 5 x 5 = 25 252 | 5 x 6 = 30 253 | 5 x 7 = 35 254 | 5 x 8 = 40 255 | 5 x 9 = 45 256 | 5 x 10 = 50 257 | ``` 258 | 259 | 260 | A nossa função também pode ter parâmetros opcionais. Veja o exemplo abaixo: 261 | 262 | ```typescript 263 | function somar(numero1: number, numero2: number, numero3?: number): number{ 264 | 265 | if(numero3 != undefined) 266 | return numero1 + numero2 + numero3; 267 | 268 | return numero1 + numero2; 269 | } 270 | 271 | const resultado2 = somar(10, 20); 272 | console.log(resultado2); 273 | 274 | const resultado3 = somar(10, 20, 30); 275 | console.log(resultado3); 276 | 277 | export{} 278 | ``` 279 | 280 | **Resultado do Código:** 281 | 282 | ```bash 283 | 30 284 | 60 285 | ``` 286 | 287 | Perceba que o caractere interrogação (?) foi adicionado no terceiro parâmetro da função. A interrogação é o operador _elvis_, que serve para indicar que uma variável, atributo, Objeto ou parâmetro é opcional. 288 | 289 |
290 | 291 |
Documentação - TypeScript: Funções
292 | 293 |
294 | 295 |

5. Null e Undefined

296 | 297 | A convenção no TypeScript indica que `undefined`os valores da variável ou objeto ainda não foram definidos, enquanto `null` indica que os valores da variável ou objeto foram intencionalmente definidos sem um valor. 298 | 299 | A função abaixo mostra como `null`pode ser usada retornando um objeto que sempre tem a mesma estrutura, mas com valores **intencionalmente atribuídos** `null` quando a função não retorna um `error`ou `resultado`: 300 | 301 | ```typescript 302 | function dividir(numero1: number, numero2: number) { 303 | if (numero2 === 0) { 304 | return { 305 | error: 'Não existe divisão por zero.', 306 | result: null 307 | }; 308 | } else { 309 | return { 310 | error: null, 311 | result: numero1 / numero2 312 | }; 313 | } 314 | } 315 | 316 | console.log(dividir(10, 2)); 317 | console.log(dividir(10, 0)); 318 | ``` 319 | 320 |
321 | 322 | **Resultado do Código:** 323 | 324 | ```bash 325 | Variável sem valor definido. 326 | ``` 327 | 328 | Por outro lado, `undefined`representa a ausência de qualquer valor. É um valor que é **atribuído automaticamente** a uma variável quando nenhum outro valor é atribuído. Geralmente indica que uma variável foi declarada, mas não inicializada. Também pode significar um erro de programação, como quando um parâmetro de propriedade ou função não foi fornecido: 329 | 330 | ```typescript 331 | function teste(): void { 332 | 333 | let variavel: number | undefined; 334 | 335 | if (variavel === undefined) { 336 | console.log('Variável sem valor definido.'); 337 | } else if (variavel === null) { 338 | console.log('Variável com valor nulo'); 339 | } 340 | } 341 | 342 | teste(); 343 | ``` 344 | 345 |
346 | 347 | **Resultado do Código:** 348 | 349 | ```bash 350 | { error: null, result: 5 } 351 | { error: 'Não existe divisão por zero.', result: null } 352 | ``` 353 | 354 |
355 | 356 |
Documentação - TypeScript: Null e Undefined
357 | 358 |
359 | 360 |

6. Parâmetros Rest

361 | 362 | 363 | 364 | Para nos ajudar a criar funções mais flexíveis, o TypeScript implementa os **Parâmetros Rest** como argumentos de uma função. Os Parâmetros Rest surgiram no ES6 (ECMAScript 6), nome oficial da versão 6 do JavaScript, com o objetivo de criar funções que aceitam um número variável de argumentos. Esses argumentos são armazenados em uma matriz que pode ser acessada posteriormente de dentro da função. A sintaxe Parâmetro Rest é composta por 3 pontos (...) antes do nome do Array: 365 | 366 | ```typescript 367 | function funcao(...parametroRest: tipo[]): tipo { 368 | ... 369 | } 370 | ``` 371 | 372 | **Exemplo:** 373 | 374 | ```typescript 375 | function somarNumeros(...numbers: number[]): number { 376 | let total = 0; 377 | numbers.forEach((num) => total += num); 378 | return total; 379 | } 380 | 381 | console.log(somarNumeros()); 382 | console.log(somarNumeros(10, 20)); 383 | console.log(somarNumeros(10, 20, 30)); 384 | ``` 385 | 386 | **Resultado do Código:** 387 | 388 | ```bash 389 | 0 390 | 30 391 | 60 392 | ``` 393 | 394 | Com o **Parâmetro Rest** , observe que enviamos um array como parâmetro da função, que pode ser de qualquer tamanho, que o Parâmetro Rest se encarregará de capturar todos os elementos do array. Observe que em cada chamada da função todos os elementos do Array foram somados. 395 | 396 |
397 | 398 |
Documentação - TypeScript: Parâmetros Rest
399 | 400 |
401 | 402 |

7. Spread

403 | 404 | 405 | 406 | O TypeScript também implementa o **Operador Spread (propagação)**, outra feature do ES6, que nos permite expandir arrays e outras expressões em locais onde vários parâmetros ou elementos são esperados. A sintaxe do Operador Spread é semelhante a sintaxe dos Parâmetros Rest, composta por 3 pontos (...) antes do nome do Array ou Expressão: 407 | 408 | ```typescript 409 | const constante = funcao(...arr); 410 | ``` 411 | 412 | O Operador Spread nos permite, por exemplo copiar rapidamente um array ou parte dele para outro array: 413 | 414 | ```typescript 415 | const array01 = [1, 2, 3]; 416 | const array02 = [4, 5, 6]; 417 | const arrayCombinado = [...array01, ...array02]; 418 | 419 | console.log(arrayCombinado); 420 | ``` 421 | 422 | **Resultado do Código:** 423 | 424 | ```typescript 425 | [ 1, 2, 3, 4, 5, 6 ] 426 | ``` 427 | 428 | Observe que os dois arrays foram combinados. 429 | 430 | O operador spread também é muito utilizado para extrair apenas o que é necessário de um array: 431 | 432 | ```typescript 433 | const numeros = [1, 2, 3, 4, 5, 6]; 434 | 435 | const [um, dois, ...resto] = numeros; 436 | 437 | console.log(numeros) 438 | ``` 439 | 440 | **Resultado do Código:** 441 | 442 | ```bash 443 | [ 1, 2, 3, 4, 5, 6 ] 444 | ``` 445 | 446 | Observe que no terceiro parâmetro do array, o operador spread indica que o array numeros será composto pelos 2 primeiros elementos do array e na sequência os demais elementos do array. 447 | 448 | O Operador Spread também pode ser utilizado com Tuplas e Objetos: 449 | 450 | ```typescript 451 | function listarPessoa(nome: string, idade: number) { 452 | return { 453 | nome, 454 | idade, 455 | }; 456 | } 457 | 458 | const tupla: [string, number] = ['Márcia da Silva', 30]; 459 | 460 | const resultado = listarPessoa(...myTuple); 461 | 462 | console.log(resultado); 463 | 464 | ``` 465 | 466 | **Resultado do Código:** 467 | 468 | ```bash 469 | { nome: 'Márcia da Silva', idade: 30 } 470 | ``` 471 | 472 | Observe que nós declaramos uma tupla com 2 elementos (string e number), que correspondem exatamente aos argumentos que a função espera receber, portanto, podemos usar o operador de propagação na chamada da função. Usamos o operador de propagação para desempacotar a Tupla. 473 | 474 |
475 | 476 |
Documentação - TypeScript: Operador Spread
477 | 478 |
479 | 480 |

8. Interfaces

481 | 482 | 483 | 484 | Interface é uma estrutura que define um contrato em seu aplicativo. Ela define a sintaxe para as classes. As classes derivadas de uma interface devem seguir a estrutura fornecida por sua interface. O compilador TypeScript não converte interface em JavaScript. Ele usa interface para verificação de tipo. Isso também é conhecido como "subtipagem estrutural". 485 | 486 | Uma interface é definida com a palavra-chave `interface`e pode incluir propriedades e declarações de métodos usando uma função ou uma Arrow Function. 487 | 488 | ```typescript 489 | interface Pessoa{ 490 | nome: string; 491 | sobrenome: string; 492 | } 493 | ``` 494 | 495 | No exemplo acima, a interface inclui duas propriedades `nome`e `sobrenome`. Isso significa que qualquer objeto do tipo `Pessoa` deve definir as duas propriedades. 496 | 497 | ```typescript 498 | let pessoa1 = { 499 | nome: 'Maria', 500 | sobrenome: 'Simões' 501 | } 502 | 503 | let pessoa2 = { 504 | nome: 'Juliana', 505 | sobrenome: 'Silva' 506 | } 507 | ``` 508 | 509 |
510 | 511 |
Documentação - TypeScript: Interfaces
512 | 513 |
514 | 515 | Neste conteúdo, vimos um resumo com algumas das principais features do TypeScript. Há muito mais para conhecer e explorar, mas com este conteúdo, você conseguirá das os primeiros passos com o TypeScript, que oferece muitos recursos para o Desenvolvimento WEB. 516 | -------------------------------------------------------------------------------- /00_typescript/Rest.ts: -------------------------------------------------------------------------------- 1 | function somarNumeros(...numbers: number[]): number { 2 | let total = 0; 3 | numbers.forEach((num) => total += num); 4 | return total; 5 | } 6 | 7 | console.log(somarNumeros()); 8 | console.log(somarNumeros(10, 20)); 9 | console.log(somarNumeros(10, 20, 30)); 10 | -------------------------------------------------------------------------------- /00_typescript/Somar.ts: -------------------------------------------------------------------------------- 1 | function somar(numero1: number, numero2: number): number { 2 | return numero1 + numero2 3 | } 4 | 5 | let resultado: number = somar(20, 10); 6 | 7 | console.log(resultado); 8 | 9 | export {} -------------------------------------------------------------------------------- /00_typescript/Spread01.ts: -------------------------------------------------------------------------------- 1 | const array01 = [1, 2, 3]; 2 | const array02 = [4, 5, 6]; 3 | const arrayCombinado = [...array01, ...array02]; 4 | 5 | console.log(arrayCombinado); 6 | 7 | const numeros = [1, 2, 3, 4, 5, 6]; 8 | 9 | const [um, dois, ...rest] = numeros; 10 | 11 | console.log(numeros) -------------------------------------------------------------------------------- /00_typescript/Spread02.ts: -------------------------------------------------------------------------------- 1 | function listarPessoa(nome: string, idade: number) { 2 | return { 3 | nome, 4 | idade, 5 | }; 6 | } 7 | 8 | const tupla: [string, number] = ['Márcia da Silva', 30]; 9 | 10 | const resultado = listarPessoa(...tupla); 11 | 12 | console.log(resultado); 13 | -------------------------------------------------------------------------------- /00_typescript/Tabuada.ts: -------------------------------------------------------------------------------- 1 | function tabuada(numero: number): void { 2 | 3 | for (var contador = 1; contador <= 10; contador++){ 4 | 5 | let resultado = numero * contador; 6 | console.log(`${numero} x ${contador} = ${resultado}`); 7 | 8 | } 9 | 10 | } 11 | 12 | tabuada(5); -------------------------------------------------------------------------------- /00_typescript/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "typescript", 3 | "lockfileVersion": 3, 4 | "requires": true, 5 | "packages": { 6 | "": { 7 | "dependencies": { 8 | "typescript": "^5.0.4" 9 | } 10 | }, 11 | "node_modules/typescript": { 12 | "version": "5.0.4", 13 | "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz", 14 | "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==", 15 | "bin": { 16 | "tsc": "bin/tsc", 17 | "tsserver": "bin/tsserver" 18 | }, 19 | "engines": { 20 | "node": ">=12.20" 21 | } 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /00_typescript/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "typescript": "^5.0.4" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /01_carrossel/README.md: -------------------------------------------------------------------------------- 1 |

Projeto Integrador - Criando um Carrossel de Imagens com Swiper

2 | 3 | 4 | 5 | Um **carrossel de imagens** é uma ferramenta visual poderosa para exibir conteúdo de forma interativa em um website. Ele pode ser utilizado de diversas maneiras, desde a apresentação de produtos até a criação de chamadas para ação. 6 | 7 | No React, um carrossel de imagens é um componente que permite **exibir várias imagens ou coponentes** em uma sequência deslizante. Essas imagens ou componentes são apresentados em uma área específica da página, geralmente em formato de **slide show**. 8 | 9 | O carrossel alterna automaticamente entre as imagens e/ou Componentes, criando um efeito de **rotação**, mas também podem **navegar manualmente** pelas imagens e/ou Componentes usando setas ou botões. 10 | 11 | Carrossel de imagens são muito utilizados na construção de: 12 | - **Galerias de fotos**: Exibir várias imagens em um espaço limitado. 13 | - **Banners promocionais**: Destacar produtos, ofertas ou eventos. 14 | - **Depoimentos**: Mostrar avaliações de clientes em rotação. 15 | - **Notícias em destaque**: Apresentar manchetes ou destaques. 16 | 17 | **Vantagens**: 18 | 19 | - **Economia de espaço**: Permite mostrar várias informações em um espaço reduzido. 20 | - **Interatividade**: Os usuários podem explorar o conteúdo de forma dinâmica. 21 | - **Atratividade visual**: O movimento das imagens chama a atenção dos visitantes. 22 | 23 | Carrosséis podem ser criados com **HTML, CSS e JavaScript**, ou através de Bibliotecas e Frameworks prontos. O React oferece muitas Bibliotecas voltadas para a construção de Carrosséis, neste guia, nós escolhemos a Biblioteca **Swiper**. 24 | 25 |
26 | 27 |
Documentação do Swiper JS - Carrossel de Imagens
28 | 29 |
30 | 31 |

👣 Passo 01 - Instalar o Swiper

32 | 33 | 34 | 35 | Para instalar o pacote **Swiper**, no Terminal do VSCode digite o comando abaixo: 36 | 37 | ```bash 38 | yarn add swiper 39 | ``` 40 | 41 |
42 | 43 |

Passo 02 - Criar o Componente Slide01.tsx

44 | 45 | 46 | 47 | Vamos criar o Componente **Slide01**, que será o primeiro Slide do Carrossel, mas antes, vamos criar a pasta **carrossel**, para armazenar o Componente: 48 | 49 | 1. Na pasta **components**, clique com o botão direito do mouse e clique na opção **New Folder** (Nova Pasta). 50 | 51 | 2. O nome da pasta será **carrossel** (letras minúsculas). 52 | 53 | 3. Clique com o botão direito do mouse sobre a pasta **carrossel**, que foi criada dentro da pasta **components** e clique na opção **New File** (Novo Arquivo). 54 | 55 | 4. O nome do arquivo será **Slide01.tsx**. 56 | 57 | 5. Copie o código do Componente **Home** (tudo que estiver dentro do fragment `<> `, exceto o Componente **ListarProdutos**) e insira dentro do método **return()** do Componente **Slide01.tsx**. Veja o exemplo abaixo: 58 | 59 | ```tsx 60 | import ModalProduto from "../produtos/modalprodutos/ModalProduto"; 61 | 62 | function Slide01() { 63 | return ( 64 | 65 |
70 |
76 |
84 |

88 | Seja bem vinde! 89 |

90 |

Aqui você encontra os melhores Games!

91 | 92 |
93 | 102 |
103 |
104 | 105 |
106 | Imagem Página Home 111 |
112 |
113 |
114 | ) 115 | } 116 | 117 | export default Slide01 118 | ``` 119 | 120 |
121 | 122 |

Passo 03 - Criar o Componente Carrossel.tsx

123 | 124 | 125 | 126 | Vamos criar o Componente **Carrossel**, que será o Carrossel propriamente dito: 127 | 128 | 1. Clique com o botão direito do mouse sobre a pasta **carrossel**, que foi criada dentro da pasta **components** e clique na opção **New File** (Novo Arquivo). 129 | 2. O nome do arquivo será **Carrossel.tsx** 130 | 3. Insira o Código abaixo no Componente **Carrossel**: 131 | 132 | ```tsx 133 | import { Autoplay, Navigation, Pagination } from "swiper/modules"; 134 | import { Swiper, SwiperSlide } from "swiper/react"; 135 | 136 | import "swiper/css"; 137 | import "swiper/css/navigation"; 138 | import "swiper/css/pagination"; 139 | 140 | import "./Carrossel.css"; 141 | import Slide01 from "./Slide01"; 142 | 143 | function Home() { 144 | return ( 145 | <> 146 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | Carrossel - Slide 02 172 | 173 | 174 | 175 | Carrossel - Slide 03 180 | 181 | 182 | 183 | 184 | ) 185 | } 186 | 187 | export default Home 188 | ``` 189 | 190 |
191 | 192 | > [!TIP] 193 | > 194 | > Para obter um melhor resultado, utilize imagens grandes em termos de dimensão e não em resolução. Neste exemplo, as imagens estão com as seguintes dimensões: 2560 x 1600 pixels. 195 | > 196 | > Caso as imagens estejam com uma resolução muito alta (arquivos grandes), uma alternativa é compactar as imagens antes de utilizá-las no Carrossel. Para compactar imagens, você pode utilizar os sites: 197 | > 198 | >
199 | > 200 | >
Compactar Imagens JPG
201 | > 202 | >
Compactar Imagens PNG
203 | > 204 | >
205 | 206 |
207 | 208 |

Passo 04 - Criar a Folha de Estilos Carrossel.css

209 | 210 | 211 | 212 | Vamos criar uma Folha de Estlos CSS chamada **Carrossel.css**, que será utilizada para customizar o Componente Carrossel: 213 | 214 | 1. Clique com o botão direito do mouse sobre a pasta **carrossel**, que foi criada dentro da pasta **components** e clique na opção **New File** (Novo Arquivo). 215 | 216 | 2. O nome do arquivo será **Carrossel.css**, como mostra a figura abaixo. 217 | 218 | 3. Insira o Código abaixo no arquivo **Carrossel.css**: 219 | 220 | ```css 221 | /*Cor dos botões de Navegação*/ 222 | :root { 223 | --swiper-theme-color: #ffffff; 224 | } 225 | 226 | /*Tamanho e o posicionamento do Carrossel*/ 227 | .swiper { 228 | height: 70vh; 229 | margin: 0; 230 | } 231 | 232 | /*Estiliza a imagem do slide*/ 233 | .swiper-slide-img { 234 | display: block; 235 | width: 100%; 236 | height: 100%; 237 | object-fit: cover; 238 | } 239 | ``` 240 | 241 |
242 | 243 |

Passo 05 - Atualizar o Componente Home.tsx

244 | 245 | 246 | 247 | 1. Abra o Componente **Home.tsx**, localizado na pasta **src/pages/home**. 248 | 2. Substitua o conteúdo do arquivo **Home.tsx** pelo código abaixo: 249 | 250 | ```tsx 251 | import Carrossel from "../../components/carrossel/Carrossel" 252 | import ListarProdutos from "../../components/produtos/listarprodutos/ListarProdutos" 253 | 254 | function Home() { 255 | return ( 256 | <> 257 |
258 | 259 |
260 | 261 | 262 | ) 263 | } 264 | 265 | export default Home 266 | ``` 267 | 268 |
269 | 270 |

Passo 06 - Testar os Componentes

271 | 272 | 273 | 274 | 1. Abra o Terminal do **VSCode**. 275 | 2. Execute o projeto através do comando abaixo: 276 | 277 | ```bash 278 | yarn dev 279 | ``` 280 | 281 | 3. Pressione a combinação de teclas **o + enter** do seu teclado para abrir o Projeto no Navegador. 282 | 4. Com o projeto aberto no seu Navegador, faça o login na aplicação, informando o **Usuário** e a **Senha**: 283 | 284 |
285 | 286 | 5. O seu Projeto React será aberto no Navegador e o Carrossel será exibido na tela. 287 | 288 |
289 | 290 |
291 | 292 | | | **DESAFIO:** *Chegou a hora de Explorar a sua criatividade! Consulte a Documentação do Swiper e personalize o seu Carrossel.* | 293 | | ------------------------------------------------------------ | :----------------------------------------------------------- | 294 | 295 |
296 | 297 |
Documentação do Swiper JS - Carrossel de Imagens
298 | 299 |
300 | -------------------------------------------------------------------------------- /02_carrinho/README.md: -------------------------------------------------------------------------------- 1 |

Projeto Integrador - Simulador - Carrinho de Compras

2 | 3 | 4 | 5 | Vamos criar um Simulador de Carrinho de Compras no React, utilizando a **API Context** para armazenar os produtos do Carrinho. 6 | 7 |
8 | 9 | > [!WARNING] 10 | > 11 | > **Este conteúdo apresentará como criar um Simulador bem simples de um Carrinho de Compras. Para criar um Carrinho de Compras Real, seria necessário fazer diversas mudanças no Backend do projeto, criar diversas tabelas no Banco de dados, além de ter acesso a uma API de Transações Bancárias.** 12 | 13 |
14 | 15 |

👣 Passo 01 - Criar a Context CartContext

16 | 17 | 18 | 19 | Vamos criar o Componente **CartContext**, dentro da pasta **src/contexts**, que será utilizada para criar a Context do Carrinho, criando e compartilhando o Carrinho com toda a aplicação: 20 | 21 |
22 | 23 | > [!WARNING] 24 | > 25 | > Caso você já tenha criado a pasta **contexts**, ignore o passo da criação da pasta. 26 | 27 |
28 | 29 | 1. Na pasta **src**, clique com o botão direito do mouse e clique na opção **New Folder** (Nova Pasta). 30 | 2. O nome da pasta será **contexts**. Após digitar o nome da pasta, pressione a tecla **enter** do seu teclado para concluir. 31 | 32 | 1. Na pasta **contexts**, que foi criada dentro da pasta **src**, clique com o botão direito do mouse e clique na opção **New File** (Novo Arquivo). 33 | 2. O nome do arquivo será **CartContext.tsx**. Após digitar o nome do arquivo, pressione a tecla **enter** do seu teclado para concluir. 34 | 3. Adicione o código abaixo no Componente **CartContext**: 35 | 36 | ```tsx 37 | import { createContext, ReactNode, useState } from "react"; 38 | import Produto from "../models/Produto"; 39 | 40 | // Cria o tipo Items, como uma herança do tipo Produto 41 | export interface Items extends Produto{ 42 | quantidade: number; 43 | } 44 | 45 | // Define os Atributos, Estados e Funções que serão compartilhados pelo Contexto 46 | interface CartContextProps { 47 | adicionarProduto: (produto: Produto) => void; 48 | adicionarItem: (id: number) => void; 49 | removerItem: (id: number) => void; 50 | limparCart: () => void; 51 | items: Items[]; 52 | quantidadeItems: number; 53 | valorTotal: number; 54 | } 55 | 56 | interface CartProviderProps { 57 | children: ReactNode; 58 | } 59 | 60 | export const CartContext = createContext({} as CartContextProps); 61 | 62 | export function CartProvider({ children }: CartProviderProps) { 63 | 64 | // Inicializa o Estado items, que armazenará os produtos adicionados no carrinho 65 | const [items, setItems] = useState([]); 66 | 67 | // Calcula o número total de itens no carrinho (quantidade acumulada) 68 | const quantidadeItems = items.reduce((acc, item) => acc + item.quantidade, 0); 69 | 70 | // Calcula o valor total da compra em Reais 71 | const valorTotal = items.reduce((acc, item) => acc + item.preco * item.quantidade, 0); 72 | 73 | // Função para adicionar produtos ao carrinho 74 | function adicionarProduto(produto: Produto) { 75 | 76 | // Localiza o produto no array items e guarda o indice 77 | const itemIndex = items.findIndex(item => item.id === produto.id); 78 | 79 | if (itemIndex !== -1) { 80 | // Produto já está no carrinho, aumenta a quantidade 81 | const novoCart = [...items]; 82 | novoCart[itemIndex].quantidade += 1; 83 | setItems(novoCart); 84 | alert('01 item adicionado!'); 85 | } else { 86 | // Produto não está no carrinho, adiciona novo item 87 | setItems(itensAtuais => [...itensAtuais, { ...produto, quantidade: 1 }]); 88 | alert('Produto adicionado ao carrinho!'); 89 | } 90 | } 91 | 92 | function adicionarItem(id: number) { 93 | 94 | // Localiza o produto no array items e guarda o indice 95 | const itemIndex = items.findIndex(item => item.id === id); 96 | 97 | if (itemIndex !== -1) { 98 | const novoCart = [...items]; 99 | novoCart[itemIndex].quantidade += 1; 100 | setItems(novoCart); 101 | alert('01 item adicionado!'); 102 | } else { 103 | alert('Produto não encontrado no carrinho!'); 104 | } 105 | } 106 | 107 | // Função para remover produtos do carrinho (reduz a quantidade ou remove) 108 | function removerItem(id: number) { 109 | 110 | // Localiza o produto no array items e guarda o indice 111 | const itemIndex = items.findIndex(item => item.id === id); 112 | 113 | if (itemIndex !== -1) { 114 | const novoCart = [...items]; 115 | 116 | if (novoCart[itemIndex].quantidade > 1) { 117 | // Reduz a quantidade do produto 118 | novoCart[itemIndex].quantidade -= 1; 119 | setItems(novoCart); 120 | alert('01 Item removido!'); 121 | } else { 122 | // Remove o produto se a quantidade for 1 123 | novoCart.splice(itemIndex, 1); 124 | setItems(novoCart); 125 | alert('Produto removido!'); 126 | } 127 | } 128 | } 129 | 130 | // Função para limpar o carrinho 131 | function limparCart() { 132 | alert('Compra efetuada com sucesso!'); 133 | setItems([]); 134 | } 135 | 136 | return ( 137 | 140 | {children} 141 | 142 | ); 143 | } 144 | 145 | ``` 146 | 147 |
148 | 149 |

👣 Passo 02 - Criar o Componente CardCart

150 | 151 | 152 | 153 | Vamos criar o Componente **CardCart**, dentro da pasta **src/components/carrinho/cardcart**, que será utilizado para exibir os dados e a quantidade de cada produto, que foi adicionado no carrinho: 154 | 155 | 1. Na pasta **components**, dentro da pasta **src**, clique com o botão direito do mouse e clique na opção **New Folder** (Nova Pasta). 156 | 2. O nome da pasta será **carrinho**. Após digitar o nome da pasta, pressione a tecla **enter** do seu teclado para concluir. 157 | 3. Na pasta **carrinho**, que foi criada dentro da pasta **src/components**, clique com o botão direito do mouse e clique na opção **New Folder** (Nova Pasta). 158 | 4. O nome da pasta será **cardcart**. Após digitar o nome da pasta, pressione a tecla **enter** do seu teclado para concluir. 159 | 5. Na pasta **cardcart**, que foi criada dentro da pasta **src/components/carrinho**, clique com o botão direito do mouse e clique na opção **New File** (Novo Arquivo). 160 | 6. O nome do arquivo será **CardCart.tsx**. Após digitar o nome do arquivo, pressione a tecla **enter** do seu teclado para concluir. 161 | 7. Adicione o código abaixo no Componente **CardCart**: 162 | 163 | ```tsx 164 | import { Minus, Plus } from "@phosphor-icons/react" 165 | import { useContext } from "react" 166 | import { CartContext, Items } from "../../../contexts/CartContext" 167 | 168 | interface CardProdutosProps { 169 | item: Items 170 | } 171 | 172 | function CardCart({ item }: CardProdutosProps) { 173 | 174 | const { adicionarItem, removerItem } = useContext(CartContext) 175 | 176 | return ( 177 |
178 |
179 | 180 | {item.nome} 181 | 182 |
183 |

{item.nome}

184 |

185 | {Intl.NumberFormat('pt-BR', { 186 | style: 'currency', 187 | currency: 'BRL' 188 | }).format(item.preco)} 189 |

190 |

Categoria: {item.categoria?.tipo}

191 |

192 | Quantidade: {item.quantidade} 193 |

194 |
195 |
196 |
197 | 202 | 207 |
208 |
209 | ) 210 | } 211 | 212 | export default CardCart 213 | ``` 214 | 215 | O Componente **CardCart**, basicamente irá exibir os dados de cada produto adicionado no carrinho. Além disso, ele possui 2 botões: 216 | 217 | - Botão **+**, para aumentar o número de itens do produto 218 | - Botão **-**, para diminuir o número de itens do produto 219 | 220 | Observe que acessamos as funções **adicionarItem** e **removerItem** do Componente **CartContext** (Context), através do Hook **useContext**, que permitirá aumentar e diminuir a quantidade de itens de um produto adicionado no Carrinho. 221 | 222 | Note que adicionamos o evento **onClick** nos botões **+** e **-**, que executarão respectivamente as funções **adicionarItem** e **removerItem**. 223 | 224 |
225 | 226 |

👣 Passo 03 - Criar Componente Cart

227 | 228 | 229 | 230 | Vamos criar o Componente **Cart**, dentro da pasta **src/components/carrinho/cart**, que será utilizado para listar os produtos adicionados no carrinho: 231 | 232 | 1. Na pasta **src/components/carrinho**, clique com o botão direito do mouse e clique na opção **New Folder** (Nova Pasta). 233 | 2. O nome da pasta será **cart**. Após digitar o nome da pasta, pressione a tecla **enter** do seu teclado para concluir. 234 | 3. Na pasta **cart**, que foi criada dentro da pasta **src/components/carrinho**, clique com o botão direito do mouse e clique na opção **New File** (Novo Arquivo). 235 | 4. O nome do arquivo será **Cart.tsx**. Após digitar o nome do arquivo, pressione a tecla **enter** do seu teclado para concluir. 236 | 5. Adicione o código abaixo no Componente **Cart**: 237 | 238 | ```tsx 239 | import { useContext } from 'react' 240 | import { CartContext } from '../../../contexts/CartContext' 241 | import CardCart from '../cardcart/CardCart' 242 | 243 | function Cart() { 244 | const { items, quantidadeItems, valorTotal, limparCart } = 245 | useContext(CartContext) 246 | 247 | return ( 248 | <> 249 |
257 |

258 | Carrinho de Compras 259 |

260 | 261 |

262 | {items.length === 0 ? 'O Carrinho está vazio!' : ''} 263 |

264 | 265 |
269 | {items.map((produto) => ( 270 | 271 | ))} 272 |
273 | 274 | {quantidadeItems > 0 && ( 275 |
276 |
277 |

278 | Resumo da Compra 279 |

280 |

281 | 282 | Total de items adicionados:{' '} 283 | 284 | {quantidadeItems} 285 |

286 |

287 | 288 | Subtotal:{' '} 289 | 290 | {Intl.NumberFormat('pt-BR', { 291 | style: 'currency', 292 | currency: 'BRL', 293 | }).format(valorTotal)} 294 |

295 |

296 | 297 | Desconto:{' '} 298 | 299 | {Intl.NumberFormat('pt-BR', { 300 | style: 'currency', 301 | currency: 'BRL', 302 | }).format(0.0)} 303 |

304 |

305 | Frete: 306 | {Intl.NumberFormat('pt-BR', { 307 | style: 'currency', 308 | currency: 'BRL', 309 | }).format(0.0)} 310 |

311 |
312 |

313 | Total: 314 | {Intl.NumberFormat('pt-BR', { 315 | style: 'currency', 316 | currency: 'BRL', 317 | }).format(valorTotal)} 318 |

319 |
320 |
321 | 330 |
331 |
332 | )} 333 |
334 | 335 | ) 336 | } 337 | 338 | export default Cart 339 | 340 | ``` 341 | 342 | O Componente **Cart**, basicamente exibirá todos os produtos adicionados no carrinho. 343 | 344 | Observe que acessamos o estado **itens** (lista de produtos do carrinho), a função **limparCart** (limpa o carrinho), o atributo **quantidadeItems** (armazena o total de itens adicionados no Carrinho) e o atributo **valorTotal** (armazena o valor total da Compra) do Componente **CartContext** (Context), através do Hook **useContext**. 345 | 346 | Note que adicionamos o evento **onClick** no botão **Finalizar Compra**, que executará a função **limparCart**. 347 | 348 |
349 | 350 |

👣 Passo 04 - Atualizar o Componente CardProdutos

351 | 352 | 353 | 354 | Vamos atualizar o Componente **CardProdutos**, localizado na pasta **/src/components/produtos/cardprodutos**, adicionando a Lógica necessária para o botão **Comprar** interagir com o Carrinho: 355 | 356 | 1. Substitua o código do Componente **CardProdutos**, pelo código abaixo: 357 | 358 | ```tsx 359 | import { Pencil, Trash } from "@phosphor-icons/react" 360 | import { useContext } from "react" 361 | import { Link } from "react-router-dom" 362 | import { CartContext } from "../../../contexts/CartContext" 363 | import Produto from "../../../models/Produto" 364 | 365 | interface CardProdutoProps { 366 | produto: Produto 367 | } 368 | 369 | function CardProdutos({ produto }: CardProdutoProps) { 370 | 371 | const { adicionarProduto } = useContext(CartContext) 372 | 373 | return ( 374 |
375 |
376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 |
386 | 387 |
388 | 389 | {produto.nome} 390 | 391 |
392 |

{produto.nome}

393 |

394 | {Intl.NumberFormat('pt-BR', { 395 | style: 'currency', 396 | currency: 'BRL' 397 | }).format(produto.preco)} 398 |

399 |

Categoria: {produto.categoria?.tipo}

400 |
401 |
402 |
403 | 407 |
408 |
409 | ) 410 | } 411 | 412 | export default CardProdutos 413 | ``` 414 | 415 | Observe que acessamos a função **adicionarProduto** do Componente **CartContext** (Context), através do Hook **useContext**. 416 | 417 | Adicionamos o evento **onClick** no botão **Comprar**, que executará a função **adicionarProduto**. 418 | 419 |
420 | 421 |

👣 Passo 05 - Atualizar o Componente App

422 | 423 | 424 | 425 | Vamos atualizar o Componente **App**, adicionando o Componente **CartContext** (torná-lo disponível para todos os Componentes) e Criando uma rota para o Componente **Cart**: 426 | 427 | ```tsx 428 | import { BrowserRouter, Route, Routes } from 'react-router-dom'; 429 | import './App.css'; 430 | import DeletarCategoria from './components/categorias/deletarcategorias/DeletarCategoria'; 431 | import FormCategoria from './components/categorias/formcategoria/FormCategoria'; 432 | import ListarCategorias from './components/categorias/listarcategorias/ListarCategorias'; 433 | import Footer from './components/footer/Footer'; 434 | import Navbar from './components/navbar/Navbar'; 435 | import Home from './pages/home/Home'; 436 | import DeletarProduto from './components/produtos/deletarprodutos/DeletarProduto'; 437 | import FormularioProduto from './components/produtos/formproduto/FormularioProduto'; 438 | import ListarProdutos from './components/produtos/listarprodutos/ListarProdutos'; 439 | import Cart from './components/carrinho/cart/Cart'; 440 | import { CartProvider } from './contexts/CartContext'; 441 | 442 | function App() { 443 | 444 | return ( 445 | <> 446 | 447 | 448 | 449 |
450 | 451 | } /> 452 | } /> 453 | } /> 454 | } /> 455 | } /> 456 | } /> 457 | } /> 458 | } /> 459 | } /> 460 | } /> 461 | } /> 462 | 463 |
464 |