参数中的打字稿类型断言

Question

到目前为止，我很喜欢 typescript，但发现我需要做很多类型断言。例如，将 EventTarget 转换为 HTMLAnchorElement 对我来说是一个常见的用例。但是要做到这一点，我需要使用以下内容：

getTabID(eventTarget: EventTarget) : string {
    // without the following variable, the compiler tells me that .hash 
    // is not a property of EventTarget, which according to the interface, it isn't.
    // So thats fine, i'll cast it to an Element
    let mEventTarget: HTMLAnchorElement = <HTMLAnchorElement>eventTarget
    let mTabID: string
    if(mEventTarget.hash){
        mTabID = mEventTarget.hash.split('#')[1]
    } 
    return mTabID
}

然而，这意味着如果我不希望编译器抛出错误，我需要在我的函数中创建变量来进行类型断言。我不介意额外的输入，但这些最终也会出现在 JS 中，最终会在我的 js 文件中浪费字节。

我希望能够做到以下几点：

getTabID(eventTarget: EventTarget) : string {
    let mTabID: string
    // Do the type assertion in the parameter 
    if(<HTMLAnchorElement> eventTarget.hash){
        mTabID = mEventTarget.hash.split('#')[1]
    } else {
        mTabID = mEventTarget.dataset.tabId
    }
    return mTabID
}

我已经很好地查看了文档和 SO，但似乎找不到任何方法来做到这一点。有人有什么想法吗？

Answer 1

您可以使用类型保护来实现这一点。

一个例子是：

function isAnchor(eventTarget: EventTarget): eventTarget is HTMLAnchorElement {
  return (<HTMLAnchorElement>eventTarget).hash != undefined;
}


function getTabID(eventTarget: EventTarget): string {
  let mTabID: string
  // Do the type assertion in the parameter 
  if (isAnchor(eventTarget)) {
    mTabID = eventTarget.hash.split('#')[1]
  } else {
    mTabID = eventTarget.dataset.tabId
  }
  return mTabID
}

注意：我不知道 dataset 是哪个接口的一部分，但您也可以为它制作类型保护。

您可以在手册here 中了解有关类型保护的更多信息。

Answer 2

您可以执行内联类型断言，方法是将断言用括号括起来：

if((<HTMLAnchorElement>eventTarget).hash) {

您可能还会看到可以采取哪些措施来避免需要类型断言，例如：

getTabID(eventTarget: HTMLAnchorElement) : string {
    let mTabID: string;

    if(eventTarget.hash){
        mTabID = eventTarget.hash.split('#')[1]
    } 

    return mTabID
}

最后，当您在其中一个示例中混合 EventTarget 和 eventTarget 时，请注意大小写。