Um momento
Aula 06
Cursos / Aprenda TypeScript - Tutorial Básico Vindo do JavaScript
Funções no TypeScript e a Possibilidade de Detectar Bugs na Hora de Compilação

Summary

Adicionando Tipos de Dados em Funções no TypeScript

Resumo da Aula

Nesta aula, o foco é aprender como adicionar tipos de dados a funções no TypeScript, para evitar erros comuns que podem ocorrer em tempo de execução.

Criando uma Função Simples

  1. Criação do Arquivo:

    • Um novo arquivo chamado funções.ts é criado na pasta src.
  2. Definição da Função:

    • Uma função básica somar é definida:
      function somar(a, b) {
        return a + b;
      }
      
  3. Compilação:

    • O comando tsc é usado para compilar o TypeScript em JavaScript, gerando o arquivo funções.js.

Problemas Sem Tipos Definidos

  • Ao chamar a função somar(3, 5), tudo parece funcionar corretamente. Mas se a função for chamada com somar("3", 5), o resultado será 35 ao invés de 8. Isso ocorre porque a string "3" é concatenada com o número 5, resultando em uma string.

Importância dos Tipos

  • No JavaScript padrão, a chamada com uma string é aceita sem erros, mas no TypeScript, a falta de definição de tipos permite esse comportamento indesejado.
  • Para evitar esses bugs, é essencial definir os tipos de entrada e saída da função, o que ajudaria a detectar erros durante a compilação em vez de esperar pelo tempo de execução.

Conclusão

Adicionar tipos às funções no TypeScript é uma prática importante que ajuda a prevenir erros comuns e melhora a robustez do código. É recomendado definir os tipos para as variáveis e os retornos das funções para garantir que o código esteja livre de erros lógicos antes mesmo de ser executado.

Video Transcript

Olá pessoal, na esta aula vamos falar de como adicionar tipos dos dados na funções aqui no TypeScript. Vamos supor que a gente tenha uma função bem básica, eu vou escrever no meu novo arquivo aqui que eu chamei de funções.ts na pasta src. Então vamos falar de como adicionar tipos a uma função function, vou falar aqui a palavra chave function para criar uma função. Vou criar uma função bem simples para somar dois números a e b, bem simples, retorna a mais o b. Uma função bem trivial assim. Então se a gente escrever assim, vamos ver que tscfunções src barra funções. Nem preciso mais dizer src, que a gente criou nosso arquivo tsconfig, é só falar tsc agora. Então foi gerado o arquivo aqui, funções.js, deixa eu pôr no lado direito da tela, o arquivo gerado está no lado direito, o arquivo do TypeScript.ts do lado esquerdo, e note que é a mesma coisa, só muda um espaço aqui e ali. Então legal, mas como a gente adiciona os tipos aqui, vamos supor que a gente chama a função somar aqui com... Normalmente os tipos tem que ser número, 3 e 5, soma 3 e 5 vai dar 8, note nenhum, uma diferença do copilador aqui, ele chama da mesma maneira, mas agora se você fizer isso no seu código, você chama com 3 dentro de uma string e 5. No JavaScript normal isso é perfeitamente aceito, não vai ter nenhum problema. Até o TypeScript vai deixar você fazer isso, porque você não definiu nenhum tipo, para o A, para o B e para o retorno do valor. Então vamos ver no que dá se a gente falar somar 3 e 5, vou dar o console log aqui, somar 3 e 5, vamos dar copilador. Legal, agora se você quiser rodar o meu arquivo, esse script funcione.ts, você tem que usar o node que eu estou no lado do servidor, node.txt, que é o arquivo.ts que a gente vai rodar, funcione.ts. E a gente obtive o que? 35, mas está errado, 3 e 5 é 8. Então esse tipo de problema que parece bem trivial, que às vezes dá muito bug assim, a gente vai pensar que tem um número, tipo número, mas na verdade é o número dentro de uma string, o 3 dentro de aspas, que na verdade não é number, é string, tipo string. Então se você somar uma string do lado esquerdo com um number do lado direito, ele vai pensar que você quer fazer concatenação. Isto é, pego 3 como a string, converte o 5 para a string e combine os caracteres 3 e 5, formando 35, que está errado. Então para poder aliviar isso, corrigir esse problema na hora de compilação cedo, antes da gente ir até rodar o programa, que eu já rodei, eu só soube do erro na hora que eu rodei, na hora do runtime, mas seria muito, muito bom se a gente pudesse ver se o erro aconteceria, se o erro se fosse detectado na hora de compilação do TSC.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: