O assunto de hoje é: TypeScript!

Prontos para aprender mais um pouquinho?

5 min readAug 10, 2024

Nada melhor do que começar definindo o que é TypeScript, então vamos lá! TypeScript é uma linguagem de programação criada pela Microsoft, baseada em JavaScript. Para utilizar o TypeScript, é necessário ter o Node.js e o próprio TypeScript instalados em seu ambiente.

O TypeScript é um conjunto adicional de instruções para o JavaScript. Mas como assim, como funciona isso?

Funciona da seguinte forma: você escreve um código em JavaScript (sim, o TypeScript aceita 100% da sintaxe do JavaScript!), esse código pode conter diversas regras extras e, logo depois, ele é transpilado (convertido) para JavaScript.

Ah, mas se o código final será em JavaScript, para que utilizar TypeScript? A resposta curta é: Detecte erros mais cedo!
Porque ao desenvolver algo em TypeScript, você pode, por exemplo, definir tipos específicos para funções, variáveis e retornos, o que proporciona um código melhor e mais seguro. O JavaScript puro não é capaz de fornecer isso, sendo conhecido como “fracamente tipado”.
Daí a vantagem de um código ser transpilado (o erro é identificado no momento do desenvolvimento) em vez de utilizar somente o JavaScript puro, que é interpretado (o erro é identificado somente no momento da execução).

Principais tipos primitivos no Typescript

Tipos primitivos são os tipos de dados mais básicos e fundamentais em uma linguagem de programação. Veja alguns dos tipos primitivos que são oferecidos pelo TypeScript:

Number
Representa números, tanto inteiros quanto de ponto flutuante. Exemplo:

let exemplo: number = 25;

String
Representa cadeias de caracteres (textos). Exemplo:

let exemplo: string = "Luke";

Boolean
Representa valores lógicos, que podem ser true ou false. Exemplo:

let exemplo: boolean = true;

Esses são os tipos primitivos mais fundamentais que você encontrará no TypeScript. Vamos explorar alguns dos outros tipos disponíveis e ver como eles podem ser úteis em seu código.

Outros tipos no TypeScript

Além dos tipos principais citados anteriormente, os seguintes tipos são bastante utilizados no TypeScript:

Union
O union (união) permite que uma variável, parâmetro de função ou propriedade aceite valores de mais de um tipo. Exemplo:

let exemplo: number | string;

exemplo = 80;      // válido, pois é um número
exemplo = "80";   // válido, pois é uma string

// exemplo= true;  // inválido, pois o tipo boolean não faz parte dos tipos permitidos

Array
Enquanto um tipo primitivo, como number ou string, armazena um único valor, um array pode armazenar vários valores juntos. Por exemplo, um array de números (number[]) pode conter vários números, enquanto uma variável de tipo number armazena apenas um único número. Exemplo:

let numeros: number[] = [10, 20, 30, 40];

console.log(numeros);  // Output: [10, 20, 30, 40]

Se desejar ver mais sobre tipos, consulte a documentação aqui.

Funções no TypeScript

Uma função é um bloco de código que realiza uma tarefa específica e pode ser reutilizado em diferentes partes do seu programa. Em TypeScript, você pode definir uma função para aceitar certos tipos de valores (parâmetros) e retornar um valor de um tipo específico. Isso ajuda a garantir que o código seja mais seguro e previsível. Veja o exemplo a seguir:

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

let resultado = somar(5, 3);
console.log(resultado);  // Output: 8

Parâmetros tipados: a e b são definidos como number, o que significa que essa função só aceita números.
Retorno tipado: A função é definida para retornar um valor do tipo number.

Se você tentar passar valores de tipos errados para a função somar, o TypeScript vai te alertar durante o desenvolvimento. Por exemplo:

let resultadoErro = somar(5, "3");  // Isso causará um erro porque "3" é uma string, não um número.

Aproveitando que estamos falando de funções, e se você quiser que um parâmetro seja opcional, ou seja, que ele não precisa ser passado quando a função é chamada? Simples, para fazer isso você usa um ? após o nome do parâmetro. Exemplo:

function somarOpcional(a: number, b?: number): number {
    if (b !== undefined) {
        return a + b;
    } else {
        return a;
    }
}

let resultado1 = somarOpcional(5, 3);
console.log(resultado1);  // Output: 8

let resultado2 = somarOpcional(5);
console.log(resultado2);  // Output: 5

Quando você passa dois números (somarOpcional(5, 3)), a função soma a e b normalmente.
Quando você passa apenas um número (somarOpcional(5)), a função só retorna o valor de a, já que b não foi fornecido.

Direto a prática, mas de forma simples:

Os arquivos TypeScript têm a extensão .ts. Exemplo de código em TypeScript:

let frutas: string []= ['banana', 'maçã', 'pera', 'uva']

No exemplo acima, foi definida uma variável “frutas” que será um array que aceitará apenas strings. Agora observe: se for inserido um item do tipo number em vez de string, o TypeScript irá reportar um erro, pois não é esperado um valor desse tipo na definição.

Para corrigir esse problema, você pode remover o valor "80" do array ou definir que o array aceite tanto string quanto number. A definição ficaria assim:

let frutas: (string | number) []= ['banana', 'maçã', 'pera', 'uva', 80]

Na minha máquina funciona, quer testar na sua?

Faça o download e instale o Node.js e TypeScript.
Em seguida, crie um diretório no local e com o nome de sua preferência.
Acesse o diretório recém-criado e crie um arquivo com a extensão “.ts” e escreva o código desejado.
Para fazer o processo de transpilação do código, execute o comando tsc ou npx tsc no terminal. Quando você executa npx tsc, você está dizendo ao npx para rodar o compilador TypeScript (tsc). Ele usará as configurações padrão do TypeScript.

Ao fazer isso, você verá que um novo arquivo será gerado, com o mesmo nome, mas com a extensão “.js”. Incrível, não? Mas qual é a diferença entre o arquivo .ts original e o novo arquivo .js transpilado?
No arquivo .ts, você define a variável "frutas" com uma tipagem específica:

let frutas: string[] = ['banana', 'maçã', 'pera', 'uva'];

Agora, quando o TypeScript transpila esse código para JavaScript, ele remove as informações de tipo, resultando em algo assim:

let frutas = ['banana', 'maçã', 'pera', 'uva'];

Observe que no arquivo transpilado .js, a informação de tipo (: string[]) foi removida, pois o JavaScript puro não suporta tipagem estática. Apesar disso, o TypeScript já garantiu que, até o momento da transpilação, todos os tipos foram validados e qualquer erro potencial foi identificado. Ou seja, o arquivo .ts te ajudou a desenvolver com mais segurança.

Vai uma analogia?

Imagine que o JavaScript é como um carro esporte sem cintos de segurança. Você pode dirigir rápido e livremente, mas corre o risco de bater em algo se não tomar cuidado. O TypeScript, por outro lado, é o mesmo carro, mas com cintos de segurança e sensores que te alertam sobre possíveis problemas na estrada, como um pedestre ou um obstáculo. Ele te permite dirigir com a mesma velocidade, mas com a confiança de que será avisado antes que algo dê errado.
Assim, você pode programar com mais confiança e segurança, sabendo que tem uma proteção extra.

Espero que tenha entendido, aprendido algo novo ou reforçado algo que já sabia. Dúvida ou sugestão? Sinta-se à vontade para comentar. Sua dúvida pode ser a mesma de outra pessoa (inclusive a minha). Vamos juntos, porque unidos somos melhores!