TS中，当函数传参可能是多种类型时，应该怎么正确处理类型判断?

Question

比如：

interface AudioEngineRemoteOpts {
    url: string;
……
}
interface AudioEngineOpts {
    loop?: boolean;
……
}
playBGM_COCOS(opts: AudioEngineOpts | AudioEngineRemoteOpts) {
      if(opts是AudioEngineOpts ) ……
     else if(opts是AudioEngineRemoteOpts)……
}

我尝试过用‘url’ in opts来判断，但是这样可能会访问到原型链，用opts.url === undefined也会被ts提醒说可能没有url属性。或者用断言来回避这个问题，但是我想知道有没有更好的代码组织方式，让这个问题不发生，而不是回避它

Answer 1

看一下这个官方建议的解决方案：
使用类型谓词

Answer 2

可以增加一个 type 字段：

interface AudioEngineRemoteOpts {
    type: 'engine-remote'
}

interface AudioEngineOpts {
    type: 'engine'
}

if(opts.type === 'engine') {
    /** code */
}

我觉得直接用 'url' in opts 就可以了。

Answer 3

方法1：使用自定义类型保护

interface AudioEngineRemoteOpts {
    url: string;
    // 其他属性
}

interface AudioEngineOpts {
    loop?: boolean;
    // 其他属性
}

function isAudioEngineRemoteOpts(opts: AudioEngineOpts | AudioEngineRemoteOpts): opts is AudioEngineRemoteOpts {
    return (opts as AudioEngineRemoteOpts).url !== undefined;
}

function playBGM_COCOS(opts: AudioEngineOpts | AudioEngineRemoteOpts) {
    if (isAudioEngineRemoteOpts(opts)) {
        // opts 是 AudioEngineRemoteOpts 类型
        console.log("Playing remote audio from URL:", opts.url);
    } else {
        // opts 是 AudioEngineOpts 类型
        console.log("Playing local audio with loop option:", opts.loop);
    }
}

方法2：使用标记属性

interface AudioEngineRemoteOpts {
    kind: 'remote';
    url: string;
    // 其他属性
}

interface AudioEngineOpts {
    kind: 'local';
    loop?: boolean;
    // 其他属性
}

function playBGM_COCOS(opts: AudioEngineOpts | AudioEngineRemoteOpts) {
    if (opts.kind === 'remote') {
        // opts 是 AudioEngineRemoteOpts 类型
        console.log("Playing remote audio from URL:", opts.url);
    } else if (opts.kind === 'local') {
        // opts 是 AudioEngineOpts 类型
        console.log("Playing local audio with loop option:", opts.loop);
    }
}