M

MLOG

Português

Explore type guards e type assertions em TypeScript para aumentar a segurança de tipos, evitar erros de tempo de execução e escrever código mais robusto e sustentável. Aprenda com exemplos práticos.

Dominando a Segurança de Tipos: Um Guia Abrangente para Type Guards e Type Assertions

No reino do desenvolvimento de software, especialmente ao trabalhar com linguagens de tipagem dinâmica como JavaScript, manter a segurança de tipos pode ser um desafio significativo. TypeScript, um superconjunto de JavaScript, aborda essa preocupação introduzindo a tipagem estática. No entanto, mesmo com o sistema de tipos do TypeScript, surgem situações em que o compilador precisa de assistência para inferir o tipo correto de uma variável. É aqui que os type guards e as type assertions entram em cena. Este guia abrangente irá aprofundar esses recursos poderosos, fornecendo exemplos práticos e as melhores práticas para aprimorar a confiabilidade e a manutenibilidade do seu código.

O que são Type Guards?

Type guards são expressões TypeScript que restringem o tipo de uma variável dentro de um escopo específico. Eles permitem que o compilador entenda o tipo de uma variável com mais precisão do que o que foi inferido inicialmente. Isso é particularmente útil ao lidar com tipos de união ou quando o tipo de uma variável depende de condições de tempo de execução. Ao usar type guards, você pode evitar erros de tempo de execução e escrever código mais robusto.

Técnicas Comuns de Type Guard

TypeScript fornece vários mecanismos integrados para criar type guards:

Usando typeof

O operador typeof é uma maneira direta de verificar o tipo primitivo de uma variável. Ele retorna uma string indicando o tipo.

function printValue(value: string | number) {
  if (typeof value === "string") {
    console.log(value.toUpperCase()); // TypeScript sabe que 'value' é uma string aqui
  } else {
    console.log(value.toFixed(2)); // TypeScript sabe que 'value' é um número aqui
  }
}

printValue("hello"); // Output: HELLO
printValue(3.14159); // Output: 3.14

Usando instanceof

O operador instanceof verifica se um objeto é uma instância de uma classe em particular. Isso é particularmente útil ao trabalhar com herança.

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

class Dog extends Animal {
  bark() {
    console.log("Woof!");
  }
}

function makeSound(animal: Animal) {
  if (animal instanceof Dog) {
    animal.bark(); // TypeScript sabe que 'animal' é um Dog aqui
  } else {
    console.log("Generic animal sound");
  }
}

const myDog = new Dog("Buddy");
const myAnimal = new Animal("Generic Animal");

makeSound(myDog); // Output: Woof!
makeSound(myAnimal); // Output: Generic animal sound

Usando in

O operador in verifica se um objeto tem uma propriedade específica. Isso é útil ao lidar com objetos que podem ter propriedades diferentes dependendo de seu tipo.

interface Bird {
  fly(): void;
  layEggs(): void;
}

interface Fish {
  swim(): void;
  layEggs(): void;
}

function move(animal: Bird | Fish) {
  if ("fly" in animal) {
    animal.fly(); // TypeScript sabe que 'animal' é um Bird aqui
  } else {
    animal.swim(); // TypeScript sabe que 'animal' é um Fish aqui
  }
}

const myBird: Bird = { fly: () => console.log("Flying"), layEggs: () => console.log("Laying eggs") };
const myFish: Fish = { swim: () => console.log("Swimming"), layEggs: () => console.log("Laying eggs") };

move(myBird); // Output: Flying
move(myFish); // Output: Swimming

Funções Personalizadas de Type Guard

Para cenários mais complexos, você pode definir suas próprias funções de type guard. Essas funções retornam um predicado de tipo, que é uma expressão booleana que o TypeScript usa para restringir o tipo de uma variável. Um predicado de tipo tem a forma variable is Type.

interface Square {
  kind: "square";
  size: number;
}

interface Circle {
  kind: "circle";
  radius: number;
}

type Shape = Square | Circle;

function isSquare(shape: Shape): shape is Square {
  return shape.kind === "square";
}

function getArea(shape: Shape) {
  if (isSquare(shape)) {
    return shape.size * shape.size; // TypeScript sabe que 'shape' é um Square aqui
  } else {
    return Math.PI * shape.radius * shape.radius; // TypeScript sabe que 'shape' é um Circle aqui
  }
}

const mySquare: Square = { kind: "square", size: 5 };
const myCircle: Circle = { kind: "circle", radius: 3 };

console.log(getArea(mySquare)); // Output: 25
console.log(getArea(myCircle)); // Output: 28.274333882308138

O que são Type Assertions?

Type assertions são uma maneira de dizer ao compilador TypeScript que você sabe mais sobre o tipo de uma variável do que ele entende atualmente. Elas são uma maneira de substituir a inferência de tipo do TypeScript e especificar explicitamente o tipo de um valor. No entanto, é importante usar type assertions com cautela, pois elas podem ignorar a verificação de tipo do TypeScript e potencialmente levar a erros de tempo de execução se usadas incorretamente.

Type assertions têm duas formas:

A palavra-chave as é geralmente preferida porque é mais compatível com JSX.

Quando Usar Type Assertions

Type assertions são normalmente usadas nos seguintes cenários:

Exemplos de Type Assertions

Type Assertion Explícita

Neste exemplo, afirmamos que a chamada document.getElementById retornará um HTMLCanvasElement. Sem a afirmação, o TypeScript inferiria um tipo mais genérico de HTMLElement | null.

const canvas = document.getElementById("myCanvas") as HTMLCanvasElement;
const ctx = canvas.getContext("2d"); // TypeScript sabe que 'canvas' é um HTMLCanvasElement aqui

if (ctx) {
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 150, 75);
}

Trabalhando com Tipos Desconhecidos

Ao trabalhar com dados de uma fonte externa, como uma API, você pode receber dados com um tipo desconhecido. Você pode usar uma type assertion para dizer ao TypeScript como tratar os dados.

interface User {
  id: number;
  name: string;
  email: string;
}

async function fetchUser(id: number): Promise<User> {
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  const data = await response.json();
  return data as User; // Afirma que os dados são um User
}

fetchUser(1)
  .then(user => {
    console.log(user.name); // TypeScript sabe que 'user' é um User aqui
  })
  .catch(error => {
    console.error("Error fetching user:", error);
  });

Cuidados ao Usar Type Assertions

Type assertions devem ser usadas com moderação e com cautela. O uso excessivo de type assertions pode mascarar erros de tipo subjacentes e levar a problemas de tempo de execução. Aqui estão algumas considerações importantes:

Type Narrowing

Type guards estão intrinsecamente ligados ao conceito de type narrowing. Type narrowing é o processo de refinar o tipo de uma variável para um tipo mais específico com base em condições ou verificações de tempo de execução. Type guards são as ferramentas que usamos para alcançar o type narrowing.

TypeScript usa análise de fluxo de controle para entender como o tipo de uma variável muda dentro de diferentes ramificações de código. Quando um type guard é usado, o TypeScript atualiza sua compreensão interna do tipo da variável, permitindo que você use com segurança métodos e propriedades específicos desse tipo.

Exemplo de Type Narrowing

function processValue(value: string | number | null) {
  if (value === null) {
    console.log("Value is null");
  } else if (typeof value === "string") {
    console.log(value.toUpperCase()); // TypeScript sabe que 'value' é uma string aqui
  } else {
    console.log(value.toFixed(2)); // TypeScript sabe que 'value' é um número aqui
  }
}

processValue("test"); // Output: TEST
processValue(123.456); // Output: 123.46
processValue(null); // Output: Value is null

Melhores Práticas

Para aproveitar efetivamente type guards e type assertions em seus projetos TypeScript, considere as seguintes práticas recomendadas:

Considerações Internacionais

Ao desenvolver aplicativos para um público global, esteja atento a como os type guards e as type assertions podem impactar os esforços de localização e internacionalização (i18n). Especificamente, considere:

Conclusão

Type guards e type assertions são ferramentas essenciais para aprimorar a segurança de tipos e escrever código TypeScript mais robusto. Ao entender como usar esses recursos de forma eficaz, você pode evitar erros de tempo de execução, melhorar a manutenibilidade do código e criar aplicativos mais confiáveis. Lembre-se de favorecer type guards em relação a type assertions sempre que possível, documente suas type assertions e valide dados externos para garantir a precisão de suas informações de tipo. Aplicar esses princípios permitirá que você crie software mais estável e previsível, adequado para implantação global.