Dificuldades que enfrentei ao migrar JavaScript para TypeScript

Coisas que eu quero fazer

Como o título indica.

Este é um lembrete para mim mesmo.

Atualizado regularmente

Erro ao passar o valor de retorno de uma função como argumento para outra função.

Ocorre um erro ao passar um valor de retorno para uma função com argumentos fixos quando existem múltiplos tipos de variáveis.

Exemplo específico

        let json = localStorage.getItem(name);
        JSON.parse(json);

O valor retornado por localStorage.getItem() é uma string ou nulo, enquanto o argumento para JSON.parse() é uma string, o que resulta em um erro.

Correção

        let json : string  = localStorage.getItem(name) as string;
        return JSON.parse(json);

Aqui, até mesmo valores nulos são convertidos em strings, como mostrado acima.

        let json: string = localStorage.getItem(name) ?? "";
        return JSON.parse(json);

Alternativamente, como mostrado acima, se o valor de retorno for nulo, ele será definido como uma string vazia. (Essa parece ser uma abordagem melhor.)

Acessar as propriedades de um objeto cuja existência é incerta.

Ocorre um erro ao tentar acessar uma propriedade de um objeto que não foi designado como um tipo especial.

Exemplo específico

        let obj :object = GetObject(); // get object type is not defined
        if (!obj)return;
        if (obj.a) //error

Ocorreu um erro ao tentar acessar o objeto ` a` do tipo `undefined`.

Correção

        let obj :object = LocalStorageManager.LoadObjSetting("GAME_SET");
        if (!obj)return;
        if ("a" in obj)

Certifique-se de que a propriedade a exista dentro de obj .

Usando document.getElementById()

O seguinte erro ocorre ao tentar acessar o valor retornado por document.getElementById().

O objeto pode ser nulo.

Exemplo específico

document.getElementById("id").style.display = "none"

Esse erro ocorre porque document.getElementById( id ) pode retornar nulo.

Correção

Eu poderia simplesmente fazer uma verificação de erros, mas isso é um pouco trabalhoso.

Você pode evitar o erro adicionando um ponto de exclamação (!) após `document.getElementById( id )` como mostrado abaixo.

document.getElementById("id")!.style.display = "none"

erro parseInt

Ao passar o argumento `number` para `parseInt`, recebo o seguinte erro:

(Eu o utilizei para converter decimais em números inteiros.)

Argument of type 'number' is not assignable to parameter of type 'string'.

Exemplo específico

1.5 é um número, não uma string, portanto há um erro. (A função parseInt aceita apenas strings como argumentos.)

parseInt(1.5);

Correção

Use Math.round em vez disso. (Ou Math.floor, Math.ceil)

Math.round(1.5)

Avisos sobre argumentos de função

Um aviso é emitido se houver argumentos não utilizados ao definir uma função ( não é um erro e ela ainda funciona, mas é preocupante, então tentaremos corrigir isso, se possível).

'p' is declared but its value is never read.

Exemplo específico

(x: number, y: number)  =>{return y + 1}

Isso resultará em um aviso porque x não está sendo usado.

Isso geralmente ocorre ao declarar uma função de retorno de chamada com um formato fixo ou ao herdar uma função.

Correção

Adicionar um ‗ ao início dos argumentos não utilizados eliminará o aviso.

(_x: number, y: number)  =>{return y + 1}

Aliás, _x também pode ser usado dentro de funções. (Embora seja melhor evitar fazê-lo por questões de legibilidade.)

Acessando propriedades personalizadas do valor de retorno de uma função do tipo união.

Uma mensagem de erro será exibida se você tentar acessar uma propriedade personalizada do valor de retorno de uma função que retorna um tipo de união (uma função que retorna um de vários tipos). (Aparentemente, funciona.)

Exemplo específico

Utilize a função GetClass, que retorna um valor do tipo união ClassA|ClassB|ClassC.

Vamos supor que a Classe A possui a propriedade XX, enquanto as Classes B e C não a possuem.

Nesse caso, o código a seguir resultará em um erro. (Porque GetClass pode retornar ClassB/ClassC que não possui XX.)

const returned_class = GetClass()
console.log(returned_class.XX)                 ////error

Correção

Ao usar `instanceof` para determinar a qual classe pertence, como mostrado abaixo, você pode acessar propriedades que somente a ClasseA possui.

const returned_class = GetClass()
if (returned_class  instanceof ClassA) {
    console.log(returned_class.XX)      //// no error
}