Things I struggled with when migrating JavaScript to TypeScript

Things I want to do

As the title says.

This is a memo for myself.

Updated regularly

Error when passing the return value of a function as an argument to a function.

An error occurs when passing a return value to a function with fixed arguments when there are multiple variable types.

Specific example

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

The return value of localStorage.getItem() is string or null, while the argument to JSON.parse() is a string, which results in an error.

Correction

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

Here, even null values ​​are converted to strings as shown above.

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

Alternatively, as shown above, if the return value is null, it will be set to an empty string. (This seems like a better approach.)

Accessing the properties of an object whose existence is uncertain.

An error occurs when trying to access a property of an object that has not been designated as a special type.

Specific example

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

An error occurs when trying to access object ‘a’ of type undefined.

Correction

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

Make sure that property ‘a’ exists within ‘obj’.

Using document.getElementById()

The following error occurs when trying to access the return value of document.getElementById().

Object is possibly null

Specific example

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

This error occurs because document.getElementById(‘id’) may return null.

Correction

I could just do an error check, but that’s a bit of a hassle.

You can avoid the error by adding an exclamation mark (!) after `document.getElementById(‘id’)` as shown below.

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

parseInt error

When I pass the argument `number` to `parseInt`, I get the following error:

(I used it to convert decimals to integers.)

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

Specific example

1.5 is a number, not a string, so there’s an error. (parseInt only accepts strings as arguments.)

parseInt(1.5);

Correction

Use Math.round instead. (Or Math.floor, Math.ceil)

Math.round(1.5)

Warnings about function arguments

A warning is issued if there are unused arguments when defining a function (it’s not an error, and it still works, but it’s unsettling, so we’ll try to fix it if possible).

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

Specific example

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

This will result in a warning because x is not being used.

This often appears when declaring a callback function with a fixed format or when inheriting a function.

Correction

Adding a ‗ to the beginning of unused arguments will eliminate the warning.

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

Incidentally, _x can also be used within functions. (Although it’s better to avoid doing so for readability reasons.)

Accessing custom properties of the return value of a union-type function

An error message will be displayed if you try to access a custom property of the return value of a function that has a union type return value (a function that returns one of several types). (It seems to work, though.)

Specific example

Use the GetClass function, which returns a union type value of ClassA|ClassB|ClassC.

Let’s assume that ClassA has property XX, while ClassB/ClassC do not.

In this case, the following code will result in an error. (Because GetClass may return ClassB/ClassC that does not have XX.)

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

Correction

By using `instanceof` to determine which class it is, as shown below, you can access properties that only ClassA possesses.

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