Como usar asserções de tipo TypeScript

Asserções de tipo no TypeScript são uma maneira de dizer ao compilador que você sabe mais sobre o tipo de um valor do que ele. Isso pode ser útil quando você está trabalhando com valores que têm tipos incertos ou amplos, e você quer reduzi-los para melhor verificação de tipo e legibilidade do código. Neste artigo, exploraremos como usar asserções de tipo do TypeScript efetivamente.

O que é asserção de tipo?

A asserção de tipo é um mecanismo no TypeScript que permite que você substitua a inferência de tipo padrão feita pelo compilador TypeScript. Ele não altera o tipo de tempo de execução real, mas ajuda o compilador a entender o tipo de uma variável para fins de verificação de tipo. Asserções de tipo são semelhantes à conversão de tipo em outras linguagens como C# ou Java, mas sem nenhum impacto no tempo de execução.

Sintaxe de Afirmações de Tipo

Há duas maneiras de usar asserções de tipo no TypeScript:

• Usando a palavra-chave as (recomendado)
• Usando colchetes angulares <>

Usando a palavra-chave as

A maneira mais comum de usar asserções de tipo é com a palavra-chave as:

let someValue: unknown = "Hello, TypeScript!";
let strLength: number = (someValue as string).length;

console.log(strLength); // Output: 17

Neste exemplo, informamos ao TypeScript que someValue é do tipo string, permitindo-nos usar a propriedade length.

Usando colchetes angulares <>

A sintaxe alternativa para asserções de tipo usa colchetes angulares:

let someValue: unknown = "Hello, TypeScript!";
let strLength: number = (someValue).length;

console.log(strLength); // Output: 17

Esta sintaxe atinge o mesmo resultado que a sintaxe as. No entanto, não é recomendada em ambientes onde JSX (como React) é usado, pois entra em conflito com a sintaxe para elementos JSX.

Casos de uso comuns para asserções de tipo

Asserções de tipo são comumente usadas em vários cenários:

• Ao trabalhar com o tipo unknown
• Ao manipular elementos DOM
• Ao restringir os tipos de união
• Ao interagir com bibliotecas de terceiros que não possuem definições de tipo

Exemplo: Afirmando tipos com o tipo unknown

O tipo unknown é útil quando você quer aceitar qualquer tipo, mas ainda precisa fazer alguma verificação de tipo antes de usá-lo. Asserções de tipo ajudam a restringir o tipo:

function getLength(value: unknown): number {
  if (typeof value === "string") {
    return (value as string).length;
  } else if (Array.isArray(value)) {
    return (value as any[]).length;
  }
  return 0;
}

console.log(getLength("Hello")); // Output: 5
console.log(getLength([1, 2, 3])); // Output: 3
console.log(getLength(42)); // Output: 0

Neste exemplo, usamos asserções de tipo para informar ao TypeScript que value é uma string ou uma matriz any[].

Exemplo: Manipulando elementos DOM

Ao manipular o DOM, o TypeScript precisa saber o tipo específico de um elemento para fornecer propriedades e métodos apropriados. Asserções de tipo são úteis aqui:

const inputElement = document.getElementById("user-input") as HTMLInputElement;
inputElement.value = "Hello, TypeScript!";

Aqui, usamos a asserção de tipo para informar ao TypeScript que inputElement é um HTMLInputElement, permitindo-nos acessar a propriedade value diretamente.

Afirmação de tipo vs. Fundição de tipo

É essencial entender a diferença entre asserção de tipo e conversão de tipo. No TypeScript, asserções de tipo não alteram o tipo real em tempo de execução; elas apenas informam ao compilador TypeScript como tratar o tipo em tempo de compilação. Em contraste, a conversão de tipo em outras linguagens como C# ou Java pode envolver a conversão de um valor de um tipo para outro em tempo de execução, o que pode impactar o desempenho e o comportamento.

Cuidados ao usar asserções de tipo

Embora as asserções de tipo possam ser poderosas, o uso incorreto pode levar a erros de tempo de execução. Aqui estão algumas dicas para usá-las com segurança:

• Evite usar asserções para converter à força tipos incompatíveis.
• Sempre use asserções com cautela e prefira restringir os tipos usando as proteções de tipo do TypeScript.
• Use asserções quando tiver certeza sobre o tipo e quando não for possível restringi-lo de outra forma.

Exemplo de afirmação de tipo incorreto

Aqui está um exemplo de uma afirmação de tipo perigoso:

let someValue: string = "Hello, TypeScript!";
let numValue: number = (someValue as unknown as number); // Dangerous!

console.log(numValue); // Output: Hello, TypeScript! (incorrect)

Este código é compilado sem erros, mas levará a um comportamento inesperado no tempo de execução porque a string está sendo tratada incorretamente como um número.

Conclusão

Asserções de tipo no TypeScript fornecem uma maneira de substituir os tipos inferidos quando você sabe mais sobre o tipo de um valor do que o TypeScript. Elas são úteis ao lidar com tipos incertos, interagir com bibliotecas de terceiros ou trabalhar com elementos DOM. No entanto, elas devem ser usadas com cautela para evitar erros de tempo de execução e garantir a segurança de tipo em seu código.

Ao dominar as asserções de tipo, você pode escrever código TypeScript mais expressivo e robusto. Pratique usá-los em vários cenários para se sentir mais confortável com esse recurso poderoso.