No caso, quando você usa a expressão " | null " você diz ao compilador do tsc que há uma possibilidade de que aquele elemento não exista, ou seja, possua valor null, e, portanto, você tera que usar de condições posteriores para garantir que esse elemento possua o valor que você deseja. ( no caso, a expressão poderia retornar um HTMLInputElement OU um null ) Já quando se usa " as HTMLInputElement " você garante ao compilador do tsc que aquele elemento é obrigatoriamente um HTMLInputElement, podendo receber apenas esse tipo. ( no caso, a expressão retornaria um HTMLInputElement)

E quando coloco o "!" tem o mesmo tratamento, o erro não é mais reportado, posso adotar também como prática? Ou não é aconselhável?

Exemplo: const form = document.querySelector(".form") ! ; const input = document.querySelector('#input') !;