Type Assertion: Conversão para um Tipo Específico - TypeScript

Type Assertion representa um modelo de conversão do valor de uma variável para um tipo específico. Em certas situações, uma variável pode representar um tipo amplo, como any ou uma união (union), que permite valores de diversos tipos. No entanto, precisamos usar a variável como um valor de um tipo estritamente definido. Nesse caso, podemos convertê-la para esse tipo específico.

Como exemplo, vamos considerar uma tarefa simples: há um elemento HTML na página web com id="header", e queremos obter esse elemento para, por exemplo, alterar seu texto. Para obter o elemento pelo ID, podemos usar a função JavaScript incorporada document.getElementById():

const header = document.getElementById("header");
header.innerText = "Hello Typescript!";

No entanto, em TypeScript, essa função retorna uma união de HTMLElement | null. Ou seja, o valor retornado pode ser null se o elemento HTML correspondente não estiver presente na página. Consequentemente, acessar a propriedade header.innerText - uma propriedade de um objeto que pode ser null - contém um erro potencial. Portanto, o compilador lançará um erro durante a compilação.

Entretanto, pode acontecer de sabermos com certeza que esse elemento existe na página. Há várias maneiras de resolver esse problema e indicar ao compilador que está tudo certo. Uma delas é a conversão de tipos usando Type Assertion.

Existem duas formas de realizar essa conversão. A primeira é usar colchetes angulares:

const header = <HTMLElement>document.getElementById("header");
header.innerText = "Hello Typescript!";

Antes do valor, entre colchetes angulares, especificamos o tipo para o qual queremos realizar a conversão. Assim, neste caso, obtemos um objeto do tipo HTMLElement.

A segunda forma é aplicar o operador as, após o qual especificamos o tipo desejado:

const header = document.getElementById("header") as HTMLElement;
header.innerText = "Hello Typescript!";

No entanto, tais conversões serão válidas se soubermos com certeza que o valor pode ser convertido para o tipo desejado. Por exemplo, se existe um elemento com id="header" na página, podemos converter o valor para o tipo HTMLElement. Mas se esse elemento não existir, teremos novamente um erro em tempo de execução.