TypeScript属性存在却报Property does not exist on type错误如何解决

• TypeScript 报错的本质是判断逻辑存在漏洞：typeof运算符对数组返回值为"object"，所以你写的typeof targeter === "object"分支会同时命中targeterInterface类型对象和string[]类型数组。TS 识别到该分支下的变量可能是没有urls、type、sub属性的数组，就会抛出属性不存在的错误。
• 额外注意：你声明的type、sub变量类型为必选string，但接口中这两个属性是可选属性，可能为undefined，直接赋值也会存在类型不兼容问题。

最简洁的改法是把数组判断逻辑提前，用Array.isArray()先过滤掉数组类型，确保typeof === "object"分支只剩下符合targeterInterface的对象：

interface targeterInterface {
    urls: string | string[];
    type?: string;
    sub?: string;
}
function exp(targeter: string | targeterInterface | string[]) {
    let target: string[] | string;
    // 修正变量类型，适配可选属性的undefined情况
    let type: string | undefined;
    let sub: string | undefined;
    // 优先判断数组，提前拦截数组类型
    if (Array.isArray(targeter)) {
        console.log("It's an array!");
        // 按需给target赋值，比如target = targeter
    } else if (typeof targeter === "object") {
        // 此分支下targeter仅为targeterInterface类型，可安全读取属性
        target = targeter.urls;
        type = targeter.type;
        sub = targeter.sub;
    } else if (typeof targeter === "string") {
        target = targeter;
    }
}

如果这类类型判断需要多处复用，也可以自定义类型守卫：

function isTargeter(obj: unknown): obj is targeterInterface {
    return typeof obj === 'object' && obj !== null && !Array.isArray(obj) && 'urls' in obj;
}

后续判断时直接调用isTargeter(targeter)即可完成类型收窄。

内容的提问来源于stack exchange，提问作者Noam I.