Às vezes haverá situações em que você saberá mais sobre um tipo do que o TypeScript. É aí que as assertivas de tipo são úteis. Aqui está um exemplo usando o querySelector() método para acessar um elemento com o id de submit:

const submitBtn = document.querySelector("#submit");

No momento, o TypeScript só sabe que este submitBtn é algum tipo de Element ou possivelmente null. O TypeScript não vai olhar o HTML correspondente para descobrir isso. Este é um bom lugar para usar uma assertiva de tipo para informar ao TypeScript qual tipo de elemento este é. Aqui está um exemplo:

const submitBtn = document.querySelector("#submit") as HTMLButtonElement;

Agora, o TypeScript tratará isso como um button elemento por causa dessa assertiva de tipo. Existem limites para usar a palavra-chave as. Por exemplo, você não pode fazer coisas assim sem que o TypeScript gere um erro:

// Conversion of type 'string' to type 'number' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
const age = "awesome" as number;

Neste exemplo, não faz muito sentido tentar afirmar que a string "awesome" deve ser vista como um tipo number. O TypeScript só permite assertivas de tipo entre tipos compatíveis ou sobrepostos. Uma maneira de remover esse erro seria usar uma assertiva double assim:

const age = "awesome" as unknown as number;

Embora isso funcione em TypeScript, ainda não é recomendado porque logicamente não faz muito sentido. Outra forma de escrever assertivas de tipo é usar a sintaxe de colchetes angulares assim:

const submitBtn = <HTMLButtonElement>document.querySelector("#submit");

Você precisa ter cuidado com essa sintaxe ao usar tsx arquivos porque o TypeScript vai pensar que você está tentando renderizar um componente e lançar um erro como este:

// file: index.tsx
// This JSX tag requires 'React' to be in scope, but it could not be found.
// JSX element 'HTMLButtonElement' has no corresponding closing tag.
const submitBtn =  <HTMLButtonElement>document.querySelector("#submit");

Na maioria das situações, você verá a primeira sintaxe usando a palavra-chave as sendo usada em vez da segunda opção.