Things I struggled with when migrating from JavaScript to TypeScript

The purpose 

As per the title.

This is a memo.

Will be updated as needed.

Error when passing a function’s return value as an argument to another function

Error when passing a variable with a union type to a function with a fixed argument type.

Example

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

The return type of localStorage.getItem() is string | null, but JSON.parse() expects an argument of type string, causing an error.

Modification

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

Here, as mentioned above, even null is converted to a string.

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

Alternatively, as mentioned above, if the return value is null, I’m making it an empty string. (This seems like a better approach.)

Accessing properties of potentially non-existent objects

Error when accessing a property on an object without explicitly defining its type

Example

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

Error when attempting to access property ‘a’ on an object whose type does not define it.

Modification

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

make sure property ‘a’ exists within obj.

usage of document.getElementById()

When trying to access the return value of document.getElementById(), I get the following error

Object is possibly 'null'

Example

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

document.getElementById(“id”)がnullを返す可能性があるためエラー。

Modification

While error checking is ideal, it can be a bit cumbersome. You can avoid the error by appending ! after document.getElementById("id") as shown below

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

Error from parseInt

When I pass a number argument to parseInt, I get the following error. (I was using it to convert decimals to integers.)

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

Example

It’s an error because 1.5 is a number, not a string. (parseInt only accepts string arguments.)

parseInt(1.5);

Modification

Instead, use Math.round. (Or Math.floor, Math.ceil.)

Math.round(1.5)

warning about argument of function

When defining a function, unused arguments trigger a warning. (It’s not an error, so the code runs, but it feels messy, so I’d like to fix it if possible.)

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

Example

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

It’s a warning because x is not being used.

This often occurs when declaring callbacks with a fixed signature or when extending functions.

Modification

Prefixing unused arguments with an underscore (_) removes the warning.

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

By the way, _x can also be used within the function. (However, it’s better to avoid it for readability.

Accessing unique properties of a function’s union-typed return value.

When trying to access a unique property on the return value of a function that has a union type (a function that returns one of several types), it shows an error. (Though it seems like it would still run.)

Example

I’m using a function GetClass which has a union type return of ClassA | ClassB | ClassC.

Let’s say ClassA has a property XX, while ClassB and ClassC do not. In this case, the following code will result in an error

(because GetClass might return ClassB or ClassC, which don’t have XX).

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

Modification

By confirming which class it is using instanceof, as shown below, you can access properties unique to ClassA.

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