Article image
Gefferson Souza
Gefferson Souza10/11/2023 15:44
Compartilhe

Typescript? Você já deveria saber usar! Um guia para iniciantes.

  • #Programação para Internet
  • #JavaScript
  • #TypeScript

Se você chegou até aqui, é porque está pronto para dar um salto em sua jornada de programação. Seja você um novato ou alguém que já domina algumas linguagens, Typescript é uma ferramenta que definitivamente merece a sua atenção. Neste guia, vamos explorar o mundo do Typescript e por que ele se tornou essencial para o desenvolvimento web.

O que é Typescript?

Typescript é uma linguagem de programação de código aberto desenvolvida pela Microsoft que se destaca por adicionar tipagem estática ao JavaScript. Em termos simples, ele oferece uma camada adicional de segurança e clareza ao seu código, garantindo que erros sejam detectados antes mesmo de você executar o programa.

Benefícios do Typescript

  1. Segurança no Código: A adição de tipos torna mais fácil detectar e corrigir erros durante o desenvolvimento, proporcionando uma experiência de codificação mais segura.
  2. Melhor Manutenção: Com a tipagem estática, a manutenção do código torna-se mais fácil. Você terá uma compreensão mais clara da estrutura do seu programa.
  3. Integração Suave com o JavaScript: Como o Typescript é uma extensão do JavaScript, você pode incorporá-lo gradualmente em seus projetos existentes sem problemas.

Como Começar

Agora que entendemos por que o Typescript é valioso, vamos orientá-lo sobre como começar a utilizá-lo em seus projetos.

Instalação

Para começar, você precisa ter o Node.js instalado em sua máquina. Em seguida, instale o Typescript globalmente usando o seguinte comando no terminal:

npm install -g typescript

Seu Primeiro Arquivo Typescript

Crie um arquivo chamado app.ts e adicione o seguinte código:

let saudacao: string = "Olá Mundo!";

console.log(saudacao);
// Olá Mundo!

O código Typescript precisa ser compilado antes de ser executado, abra o terminal e execute o comando:

tsc app.ts

Em seguida execute o comando:

node app.js

Parabéns! Você acabou de criar e exercutar o seu primeiro programa Typescript.

Tipos de Dados do TypeScript e Como Utilizá-los

Se você está mergulhando no universo do desenvolvimento web, é essencial compreender os tipos de dados do TypeScript.

String: Texto

O tipo de dado string é fundamental em qualquer linguagem de programação, e no TypeScript não é diferente. Representando sequências de caracteres, as strings desempenham um papel crucial no armazenamento e manipulação de texto.

let saudacao: string = "Olá, mundo!"; 

Number: Além dos Números Básicos

Quando se trata de lidar com valores numéricos, o TypeScript oferece o tipo de dado number. No entanto, este tipo vai além dos inteiros e decimais, abrangendo também valores hexadecimais e octais. Isso proporciona uma flexibilidade adicional ao lidar com diferentes contextos numéricos em seu código.

let idade: number = 25; 
let hex: number = 0xf00d; 
let binario: number = 0b1010; 

Boolean: A Base da Tomada de Decisões

Para controle de fluxo e tomada de decisões, o tipo de dado boolean é essencial. Este tipo representa valores lógicos, como verdadeiro ou falso, e é crucial para estruturas condicionais em seu código TypeScript.

let isAtivo: boolean = true;
let isLogado: boolean = false;

Array: Coleções Dinâmicas

Ao lidar com conjuntos de dados, o TypeScript oferece o tipo de dado array. Este tipo permite criar coleções dinâmicas de elementos do mesmo tipo, proporcionando uma maneira eficiente de organizar e manipular dados em listas.

let numeros: number[] = [1, 2, 3, 4, 5];
let frutas: string[] = ["maçã", "banana", "laranja"]; 

Tuple: Sequências com Estrutura

As tuples no TypeScript são sequências ordenadas de elementos com tipos específicos. Ao contrário dos arrays, as tuples podem conter diferentes tipos de dados e são úteis quando você precisa de uma sequência com uma estrutura definida.

let infoUsuario: [string, number] = ["João", 25]; 

Any: Flexibilidade com Responsabilidade

Embora o TypeScript seja conhecido por sua tipagem estática, há momentos em que a flexibilidade é necessária. O tipo de dado any oferece essa flexibilidade, permitindo que variáveis aceitem qualquer tipo de valor. No entanto, use-o com cautela, pois perde parte da segurança proporcionada pela tipagem estática.

let variavelQualquer: any = "Posso ser qualquer coisa!"; 

Union: Quando um ou Outro é Suficiente

O tipo de dado union permite combinar tipos diferentes em uma única variável. Isso é especialmente útil quando você precisa lidar com situações em que um valor pode ser de um tipo ou de outro.

let idadeOuNome: number | string = 30;
idadeOuNome = "Maria";

Void: Quando a Função Não Retorna Nada

O tipo de dado void no TypeScript é empregado para indicar que uma função não retorna nenhum valor. É comumente utilizado em funções que executam ações, mas não produzem um resultado específico. Ao definir uma função como void, você comunica de forma clara e concisa a natureza da operação.

function imprimirMensagem(): void {
console.log("Esta função não retorna nenhum valor."); 
} 

Null: Representando a Ausência de Valor

O tipo de dado null é utilizado para representar a ausência de valor ou a intencionalidade de ausência. Em situações em que uma variável pode ter um valor ou nenhum valor, o null se torna útil. No entanto, é importante manusear cuidadosamente, evitando erros de referência nula.

let valorNulo: null = null; 
let numero: number | null = 10; 

Undefined: Quando a Variável Ainda Não Tem Valor

O undefined é atribuído a variáveis que foram declaradas, mas ainda não receberam um valor. Ele indica a falta de valor atribuído explicitamente. Utilizado em conjunto com o null, o undefined oferece uma maneira de lidar com variáveis que podem não ter um valor definido inicialmente.

let variavelNaoDefinida: undefined = undefined; 
let preco: number | undefined;

Estes são apenas alguns dos tipos de dados básicos em TypeScript. A linguagem também inclui tipos avançados como Intersection, Type Aliases, String Literal Types, Numeric Literal Types, Enum Member Types, Discriminated Unions, Index Types, Conditional Types e muito mais. Esses tipos avançados permitem expressar ainda mais cenários de programação de maneira segura e fácil de entender.

Funções no Typescript

O TypeScript, oferece poderosas funcionalidades, e entender como utilizar funções é essencial para aproveitar ao máximo essa linguagem de programação. Neste guia vamos explorar de maneira detalhada como trabalhar com funções no TypeScript, proporcionando insights valiosos para desenvolvedores em ascensão.

Declarando Funções no TypeScript

Em TypeScript, a declaração de funções segue um padrão claro e conciso. Para criar uma função, utilizamos a palavra-chave function, seguida pelo nome da função e seus parâmetros. Por exemplo:

function saudacao(nome: string): string {
return `Olá, ${nome}!`; 
}

No exemplo acima, a função saudacaorecebe um parâmetro do tipo string chamado nomee retorna uma saudação personalizada.

Parâmetros Opcionais e Padrão

O TypeScript permite a definição de parâmetros opcionais e padrão em funções, oferecendo flexibilidade no desenvolvimento. Vejamos como implementar isso:

function boasVindas(nome: string, idade?: number): string {
if (idade) {
   return `Bem-vindo, ${nome}! Você tem ${idade} anos.`; 
} else {
   return `Bem-vindo, ${nome}! Idade não informada.`; 
} 
} 

Neste exemplo, ao utilizar o simbolo ? , o parâmetro idadese torna opcional, permitindo que a função seja chamada com ou sem esse argumento.

Funções de Setas (Arrow Functions)

As funções de setas são uma característica moderna do JavaScript e TypeScript, proporcionando uma sintaxe mais concisa. Veja como criar uma função de seta:

const dobrarNumero = (numero: number): number => numero * 2;

A função dobrarNumero recebe um parâmetro numero do tipo number e retorna o dobro desse número.

Funções como Parâmetros

Em TypeScript, é possível passar funções como parâmetros para outras funções. Isso é especialmente útil em cenários de programação funcional. Um exemplo prático seria:

function executarOperacao(numero: number, operacao: (x: number) => number): number {
return operacao(numero); 
} 

const quadrado = (x: number): number => x * x;
const resultado = executarOperacao(5, quadrado); // Retorna 25 
  

Neste caso, a função executarOperacao recebe um número e uma função de operação, aplicando essa função ao número fornecido.

Recursividade em Funções

A recursividade é uma técnica poderosa que permite que uma função chame a si mesma. No contexto do TypeScript, isso pode ser implementado da seguinte forma:

function fatorial(n: number): number {
if (n === 0 || n === 1) {
  return 1; 
} else { 
  return n * fatorial(n - 1); 
} 
} 
                              

A função fatorialcalcula o fatorial de um número usando recursividade.

Dominar o uso de funções no TypeScript é fundamental para desenvolver código eficiente, exploramos aspectos essenciais, desde a declaração básica de funções até conceitos avançados como funções de setas e recursividade. Ao aplicar esses conhecimentos, os desenvolvedores estarão mais capacitados para criar aplicações robustas em TypeScript.

Conclusão

Neste guia, exploramos os fundamentos do Typescript, desde sua definição até a criação de programas simples e o uso de recursos avançados. Integrar o Typescript em seu arsenal de desenvolvimento é um passo crucial para aprimorar a qualidade e a eficiência do seu código. Lembre-se, a jornada de aprendizado é contínua. Continue explorando, praticando e expandindo seus horizontes no universo do desenvolvimento de software.

Referências:

Documentação oficial do TypeScript: https://www.typescriptlang.org/docs/
Formação Full-Stack Typescript: https://www.dio.me/curso-typescript

#FocoNosEstudos #BoraPraCima #ForçaDev #Typescript

Compartilhe
Comentários (4)
Gefferson Souza
Gefferson Souza - 11/11/2023 15:24

@Bianca Soares, Obrigado! Acredito que sim, da para conciliar tranquilamente, mas não recomendo que o faça. No começo tentei fazer isso, acabei odiando o Typescript e achando desnecessário, até que alguns meses depois eu fiz um projeto de uma API REST usando javascript / node.js. Um belo dia a minha aplicação simplemente parou de funcionar, tentei depurar o código, mas em um código mal escrito e com várias funções anônimas, era quase impossível, tentei com ESLint, sem resultado. Passei quase uma semana tentando 'descobrir' um erro.

Então a minha dica é: Passa raiva primeiro com Javascript depois migre para o Typescript se necessário.

Gefferson Souza
Gefferson Souza - 11/11/2023 15:09

Os navegadores WEB não 'entendem' diretamente o Typescript, eles interpretam apenas o Javascript, para usar o Typescript 'diretamente' você pode usar o comando tsc arquivo.ts --watch . Com isso, sempre que você salvar o arquivo Typescript, ele será "automagicamente" transpilado para Javascript.

Obs: O Typescript precisa estar instalado globalmente.

Exemplo:

<script src="caminho/para/script.js"></script>

tsc script.ts --watch

image

No Node.js você pode usar a extensão ts-node-dev .

Carlos Anjos
Carlos Anjos - 11/11/2023 12:24


Gefferson, muito bom seu texto. Achei bastante útil.

Só uma dúvida:

Posso utilizar o Typescript dentro da tag <script></script> que foi declarada em um arquivo HTML ou PHP?

Como vi aí que precisa de uma compliação prévia e ser usado em um arquivo de tipo .TS, estou imaginando que isso não seja possível. É isso mesmo?

Bianca Soares
Bianca Soares - 10/11/2023 18:31

Oi Gefferson!

Achei o seu texto muito bem escrito e de fácil entendimento.

Você acha que da para conciliar o aprendizado em JavaScript com o aprendizado em TypeScript?

Abraço e #FocoNosEstudos