Tipagem no TypeScript

Um dos principais recursos que o TypeScript traz é a utilização da tipagem estática para o JavaScript, que trabalha com tipagem dinâmica. Desta forma o desenvolvedor tem a responsabilidade de declarar qual o tipo da variável que será utilizada. Entre os tipos disponíveis, nós temos:

• number
• string
• boolean
• undefined
• null
• symbols
• any

Curso Node.js - Fundamentos Conhecer o curso

Tipagem no TypeScript: Variáveis.

Primeiramente, para declarar variáveis utilizando o TypeScript, podemos utilizar a seguinte sintaxe:

let numero: number;
let texto: string;
let status: boolean;

Também podemos declarar e atribuir um valor:

let idade: number =  25;
let nome: string = 'TreinaWeb';
let statusPublicacao: boolean = true;

Neste caso a tipagem garante que as variáveis devem conter dados dos seus respectivos tipos. Utilizando o Visual Studio Code (por exemplo) podemos ver que, caso alguma variável receba algum valor diferente do seu tipo declarado anteriormente, o TypeScript apresentará um aviso:

Tipagem no TypeScript: Constantes.

Agora, seguindo a mesma maneira que declaramos as variáveis no TypeScript, precisamos apontar o tipo das constantes, com a sintaxe:

const PI: number = 3.14

Vale lembrar que, no caso das constantes, devemos inicializar a constante com o valor definido, ou seja, não é possível alterar seu valor posteriormente.

Tipagem no TypeScript: arrays.

Quando vamos trabalhar com arrays no TypeScript é preciso se atentar para algumas particularidades, primeiramente, podemos trabalhar com os arrays que recebem dados de apenas um tipo, da seguinte forma:

let carros: string[] = [];
carros.push('Gol');
carros.push('Fiesta');

Ou podemos inicializar o array com os valores:

let animais: string[] = ['Cachorro', 'Gato'];

Agora perceba que em ambos os casos, se tentarmos adicionar algum valor de um tipo diferente do que foi declarado anteriormente, vamos obter um aviso:

Neste caso tentamos adicionar um valor ao nosso array “carros” utilizando o método push(), porém não podemos pois o array só aceita strings e não numbers.

Array com mais de um tipo

O TypeScript traz este recurso, onde podemos trabalhar com arrays que recebem mais de um tipo, neste caso ao declarar o array é necessário passar quais tipos de dados que esse array estará apto a receber:

let carros: (string | number)[] = ['Gol', 2014,'Fiesta', 2018];

Também é possível definir exatamente qual o conteúdo que o array estará apto a receber, além do tipo:

let cursos: ('TreinaWeb' | number)[] = ['TreinaWeb', 2018];

Neste exemplo acima, o array cursos não irá aceitar nenhuma string exceto “TreinaWeb”.

Criando tipos personalizados

Existe a possibilidade de criarmos tipos para trabalhar com a nossa aplicação. Seguindo o exemplo dos arrays, podemos criar um array com tipo para usá-lo quantas vezes quisermos, facilitando o desenvolvimento:

type Cursos = ('TreinaWeb' | number)[];

let curso: Cursos = ['TreinaWeb', 200];
let curso2: Cursos = ['TreinaWeb', 700, 'TreinaWeb', 800];

Podemos criar tipos para trabalhar com objetos também, da seguinte forma:

type Animal = {
    nome: string;
    idade: number;
}

let cachorro: Animal = {
    nome: 'Rex',
    idade: 3
}

Neste caso criamos o tipo Animal, que possui as propriedades nome (string) e idade (number) e declaramos um objeto “cachorro” para este tipo. Caso alguma propriedade não esteja de acordo com o tipo, o TypeScript irá apresentar um aviso, como a seguir:

Foi declarado um objeto “gato” do tipo “Animal”. Porém na propriedade “idade” passamos a string “dois” no lugar de um number (2), e então, o TypeScript apresenta um aviso que a propriedade idade declarada no tipo Animal espera um number.

Desta forma é possível criar tipos conforme a necessidade da aplicação que está sendo desenvolvida, tanto para a utilização de arrays como em objetos.

Conclusão

A tipagem estática nos ajuda a desenvolver um código mais confiável e robusto, diminui possíveis erros futuros e ainda pode tornar nossa IDE mais inteligente com recursos de autocomplete apresentando assim maior eficiência.

Claro que tudo deve ser colocado no papel, afinal, para equipes acostumadas a trabalhar com JavaScript e em projetos que não são tão complexos, devemos considerar se realmente há a necessidade de alguma migração e levar em conta toda a curva de aprendizagem que a equipe terá para aplicar o TypeScript.

Mas, é inegável que o TypeScript é uma tecnologia muito importante atualmente, já que está sendo muito utilizada e requisitada no mercado de trabalho.

Curso TypeScript - Fundamentos Conhecer o curso

Por fim, caso queira aprender mais sobre TypeScript saiba que aqui na TreinaWeb temos o curso TypeScript - Fundamentos que possui 01h31 de vídeos e um total de 30 exercícios. Conheça também nossos outros cursos de TypeScript.

Veja quais são os tópicos abordados durante o curso de TypeScript - Fundamentos:

• Compreender melhor as vantagens que a utilização do TypeScript pode trazer;
• Utilizar a tipagem estática que o TypeScript traz;
• Utilizar o conceito de type assertion;
• Aplicar construção e desconstrução (ou decomposição) de objetos no TypeScript;
• Aplicar conceitos típicos de orientação a objetos, como classes, métodos acessores, interfaces e herança com o TypeScript;
• Verificar qual seria o código JavaScript que teria que ser produzido para se obter um efeito análogo à utilização do TypeScript.