TheLazy.Dev
Portfolio GitHub

Blog

typescript |beginners |programming |braziliandevs

TypeScript - Tipagem Estática e Generics

gabrielhsilvestre

Gabriel_Silvestre

Posted on May 10, 2022

TypeScript - Tipagem Estática e Generics

Tabela de Conteúdos

Enum

O que é?

É uma estrutura de dados não natural do JavaScript, ela é um conjunto de valores relacionados, o que possibilita a criação de um conjunto de constantes para uso.

Funcionamento

Como dito em sua definição, a estrutura Enum é um conjunto de valores, esses que podem ser comparados aos valores de um objeto JS, pois tem a estrutura de chave/valor.

A maior diferença entre Enum e objetos JS, é que a Enumeração tem uma atribuição automática de valores, similar aos índices de um Array, ou seja, a primeira chave terá o valor 0, a segunda o valor 1 e assim por diante, isso caso não houver uma atribuição explícita de outro valor.

Também é possível alterar o valor de início de uma Enum, basta atribuir ao primeiro elemento o número desejado, assim caso atribuímos o valor 10 ao primeiro elemento, o segundo terá o valor 11 e assim por diante.

Sintaxe

Criação

Para criarmos uma Enum utilizamos uma sintaxe muito simples, na qual usamos a palavra reservada enum, seguida do nome desejado para a enumeração e por fim abrimos e fechamos chaves, sendo que os valores da Enum devem ser colocados dentro dessas chaves.

enum SomeEnum {
  FirstValue, // o valor será igual a 0
  SecondValue, // o valor será igual a 1
  ThirdValue, // o valor será igual a 2
}
Enter fullscreen mode Exit fullscreen mode

Podemos também alterar o valor inicial, adequando-o para as nossas necessidades, para isso basta atribuir o número desejado ao primeiro elemento.

enum OtherEnum {
  FirstValue = 12,
  SecondValue, // o valor será igual a 13
  ThirdValue, // o valor será igual a 14
}
Enter fullscreen mode Exit fullscreen mode

Também há a possibilidade de definirmos os valores um a um, basta utilizar a atribuição, lembrando que a Enum pode receber outros tipos fora o Number.

enum AnotherEnum {
  FirstValue = 'Gabriel',
  SecondValue = 'Matheus',
  ThirdValue = 'Daniel',
}
Enter fullscreen mode Exit fullscreen mode

Atribuição

Para utilizarmos a estrutura Enum criada devemos definir que a variável será do tipo da Enumeração e que ela recebe determinado valor da Enum. Lembrando que o modo de criação de variável permanece o mesmo, ou seja, podemos optar por utilizar let ou const.

const someVariable: SomeEnum = SomeEnum.FirstValue;
let someVariable: SomeEnum = SomeEnum.FirstValue;
Enter fullscreen mode Exit fullscreen mode

Podemos atribuir o valor da Enum a variável não apenas através da dot notation como também da bracket notation.

const someVariable: SomeEnum = SomeEnum['FirstValue'];
Enter fullscreen mode Exit fullscreen mode

Além disso também é possível atribuir a variável não apenas o valor, como também a chave, para isso basta utilizar a bracket notation passando o valor da chave em questão entre colchetes.

const someVariable: SomeEnum = SomeEnum[0];
Enter fullscreen mode Exit fullscreen mode

Voltar ao topo

Tipos de Coleção

O que são?

São as formas que podemos agrupar dados, ou seja, criar um coleção de dados.

Quais são?

As duas estruturas disponibilizadas pelo TS para agrupar valores são os Arrays e as Tuplas.

Os Arrays no TypeScript funcionam de forma idêntica aos do JavaScript, são estruturas de tamanhos dinâmicos que podem receber diferentes elementos, porém no TS precisamos informar previamente quais são esses elementos.

Já as Tuplas são estruturas de ordem, tamanho e tipo fixos, ou seja, o desenvolvedor deve saber a ordem, o tamanho e os tipos de valores que a estrutura aceita.

Sintaxe

Arrays

Para criarmos Arrays tipados usamos uma sintaxe composta do tipo de dado que o Array irá comportar, seguido dos colchetes.

const someArray: string[] = ['Gabriel', 'João', 'Marcus'];
const otherArray: number[] = [1, 23, 456];
Enter fullscreen mode Exit fullscreen mode 
const someArray: Array<string> = ['Gabriel', 'João', 'Marcus'];  // funciona igual: string[]
const otherArray: Array<number> = [1, 23, 456];
Enter fullscreen mode Exit fullscreen mode

Lembrando que se não atribuirmos explicitamente o tipo de dado que o Array pode conter ele será inferido como Any, o que não é nem um pouco recomendável.

Tuplas

Para criarmos Tuplas utilizamos um Array de tipos em sua definição, assim criamos um "Array" com ordem, tamanho e tipos fixos.

const someTuple: [string, number, boolean] = ['Gabriel', 21, true];
Enter fullscreen mode Exit fullscreen mode

Voltar ao topo

Type Aliases

O que é?

Em tradução livre significa "apelido de tipos", é uma forma de declarar tipos personalizados.

Sintaxe

Criação

A sintaxe consiste na palavra reservada type, seguida do nome que desejamos dar ao "apelido" e deve receber através de atribuição o novo tipo que queremos criar.

type SomeType = {
  someValue: string;
  otherValue: number;
};
Enter fullscreen mode Exit fullscreen mode 
type OtherType = string | number;
Enter fullscreen mode Exit fullscreen mode

Utilização

Para utilizarmos o Type criado basta atribuirmos a variável através dos dois pontos, como se fossemos definir um tipo primitivo a uma variável.

const someVariable: SomeType = { someValue: 'alguma string', otherValue: 4 };
Enter fullscreen mode Exit fullscreen mode 
function someFunction(param: SomeType) {};
Enter fullscreen mode Exit fullscreen mode

Voltar ao topo

Type Unions

O que é?

É uma forma de representar tipos de dados que podem ser variáveis, apesar do TS ter tipagem estática, ainda sim podemos definir diferentes tipos para uma mesma variável, de maneira estática claro.

Sintaxe

A sintaxe se assemelha ao operador lógico OU, assim definimos que uma variável pode receber um tipo ou outro, o sinal nesse caso é uma barra única |.

const cpf: number | string;
Enter fullscreen mode Exit fullscreen mode

Vale ressaltar que podemos utilizar esse recurso tanto em variáveis, quanto em coleções.

Voltar ao topo

Classes

O que são?

Assim como no JavaScript, Classes são modelos para criação de objetos, porém no TypeScript devemos sempre "tipar" nossas propriedades e métodos.

Em resumo as Classes se comportam de forma idêntica no geral, com a única diferença que no TS é necessária a tipagem das propriedades e métodos.

*Obs: Programação Orientada a Objeto não será abordada aqui.

Sintaxe

A sintaxe para a criação de classes é a mesma, usamos a palavra reservada class, em seguida damos o nome desejado a classe e abrimos chaves para a estruturação.

Como dito anteriormente, a única diferença de classes em TS é a necessidade de tipar as propriedades e métodos, porém a sintaxe para essa tipagem é exatamente igual a qualquer outra variável, função ou parâmetro.

class SomeClass {
  constructor(prop1: string, prop2: number) {
    this.prop1 = prop1;
    this.prop2 = prop2;
  }

  someMethod(): void {};

  otherMethod(): number {};
}
Enter fullscreen mode Exit fullscreen mode

Voltar ao topo

Interface

O que é?

É uma estrutura que define um objeto com determinadas propriedades e métodos obrigatórios, esses que por sua vez devem ter um tipo, em termos mais comuns, podemos dizer que é uma espécie de "contrato de código".

Sintaxe

A sintaxe da Interface é similar à sintaxe do Type Aliases, sendo as duas únicas diferenças: a palavra reservada, que nesse caso é interface; e a ausência do sinal de atribuição.

interface SomeInterface {
  someProperty: string;
  otherProperty:number;
  someMethod(): boolean;
}
Enter fullscreen mode Exit fullscreen mode

Voltar ao topo

Generics

O que são?

São modelos de códigos genéricos que permitem "tipar" funções, classes ou interfaces, em outro momento pós definição, trazendo um certo dinamismo a tipagem.

Funcionamento

O diferencial aqui, é que inicialmente não temos realmente um tipo definido, justamente por ser algo genérico, como o nome do recurso propõe. Porém ao chamarmos nosso modelo de Generics em uma função, por exemplo, o tipo genérico passará a ser aquele que nós definimos, o que facilita a reutilização de código.

Sintaxe

A sintaxe do Generic é extremamente enxuta, consistindo apenas de dois colchetes angulares <>, dentro desses colchetes devemos informar o nosso tipo genérico, de forma similar a um parâmetro de função.

function getArray<T>:(items: T[]): T[] {
  return new Array<T>().concat(items);
}
Enter fullscreen mode Exit fullscreen mode

Na função acima estamos retornando um novo Array a partir do parâmetro, que por sua vez também é um Array. O Generics atua aqui através do T, ele indica que o Array deve ser do tipo T, ou seja, tem que ser de um único tipo que será definido posteriormente.

Como dito anteriormente, a definição do Generics assemelha-se a parâmetros de uma função, o que significa que podemos utilizar o nome que desejarmos para eles, porém por convenção utiliza-se o T como primeira opção.

function getArray<ArrayType>:(items: ArrayType[]): ArrayType[] {
  return new Array<ArrayType>().concat(items);
}
Enter fullscreen mode Exit fullscreen mode

A função acima com o Generics denominado ArrayType terá exatamente a mesma funcionalidade da função com o Generics denominado T.

Voltar ao topo

Links Úteis

Voltar ao topo

💖 💪 🙅 🚩
gabrielhsilvestre
Gabriel_Silvestre

Posted on May 10, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

TypeScript - Tipagem Estática e Generics
typescript TypeScript - Tipagem Estática e Generics

May 10, 2022