Property does not exist on type error when the property does exist-CodePudding

I've received the aforementioned error when making the following TypeScript code. The problem is obviously that the urls, type and sub properties don't exist on a parameter of the string[] type, but they would not be read if that was the type of the targeted parameter. I'm extremely new to TypeScript, this is my first attempt working with it, so I'm probably missing something relatively basic.

interface targeterInterface {
    urls: string | string[];
    type?: string;
    sub?: string;
}
function exp(targeter: string | targeterInterface | string[]) {
    let target: string[] | string;
    let type: string;
    let sub: string;
    if (typeof targeter === "object") {
        target = targeter.urls;
        type = targeter.type;
        sub = targeter.sub;
    } else if (typeof targeter === "string") {
        target = targeter;
    } else {
        console.log("It's an array!");
    }
}

Thanks for any help!

CodePudding user response：

If it is not a string or an array, otherwise it is an object

if (Array.isArray(targeter)) {
    // Array
} else if (typeof targeter === "string") {
    // string
} else {
    // Instance of targeterInterface
}

CodePudding user response：

You can use a TypeScript feature called type-guard function to check what is the type of the argument. https://www.typescriptlang.org/docs/handbook/advanced-types.html#user-defined-type-guards

interface targeterInterface {
    urls: string | string[];
    type: string; // had to change since, the type in the function is not optional
    sub: string; // had to change since, the sub in the function is not optional
}

function isTargeterInterface(item: unknown): item is targeterInterface  {
    return (item as targeterInterface).type !== undefined;
} // this is a type guard function

function exp(targeter: string | targeterInterface | string[]) {
    let target: string[] | string;
    let type: string;
    let sub: string;
    if (isTargeterInterface(targeter)) { // calling a function to check if it implements interface provided above
        target = targeter.urls;
        type = targeter.type;
        sub = targeter.sub;
    } else if (typeof targeter === "string") {
        target = targeter;
    } else {
        console.log("It's an array!");
    }
}