TS2532：对象可能是“未定义”。 在 array.map() 上

Question

I understand that this TS error is essentially just a warning but I have been unable to find a solution when it occurs on .map

const files = require.context("./", true, /\.vue$/i);
files.keys().map(key =>
    Vue.component(
        key
            .split("/")
            .pop()
            .split(".")[0],
        files(key).default
    )
);

I have tried checking if the value of key exists before doing anything else but it still produces the same error.

TS2532: Object is possibly 'undefined'.

Answer 1

You are trying to split a string. Using someString.split("/") , which does return an array. Using the method pop() does either return the last element of the array or undefined (according to MDN )

Therefore your typing at that point is: string | undefined string | undefined executing .split(..) on an undefined value will cause problems. That's what TypeScript is trying to tell you here.

To avoid this warning/error and to be type safe you could use the latest optional chaining feature TypeScript 3.7.0 provides you if applicable:

key.split("/").pop()?.split(".")[0] ?? someDefaultString

An alternative solution would be to extract this kind of logic into another function like so:

function extractValue(key: string): string { // you want to name that function better though
    return key.split("/").pop()?.split(".")[0] ?? "defaultValue";
}

And use it like:

Vue.component(extractValue(key), files(key).default)