如何使用typescript泛型創建可重用的獲取元素函式？

我正在嘗試將 selectElement 和 getElement 函式合并到一個可重用的打字稿通用函式中，我可以在其中使用 select 元素并且仍然可以按以下方式呼叫它們...

const btnArray = getElementTS<HTMLButtonElement>('.btn', '.container', true)

或者const singleBtn = getElementTS<HTMLButtonElement>('.btn', '.container')

PS 請原諒我可能犯的任何錯誤。我只是一個新手。

   // this function returns a single element
   const selectElement = (selector, scope) => {
      return (scope || document).querySelector(selector);
   };
    
   // this function returns either a single element or an element array
   function getElement(selector, isList) {
       let element = isList
       ? [...document.querySelectorAll(selector)]
       : document.querySelector(selector);

  if ((!isList && element) || (isList && !element.length < 1)) return element;
  throw new Error(`Please double check your selector : ${selector}`);
}

interface Length {
  length: number;
}

// merging the two functions with a typescript version
function getElementTS<E extends Length & HTMLElement & string>(
  selector: string,
  scope: E,
  isList: boolean
) {
  let element = isList
    ? ([...(scope || document).querySelectorAll(selector)] as E[])
    : ((scope || document).querySelector(selector) as E);

  if ((!isList && el) || (isList && !element.length < 1)) return el;
  throw new Error(`Please double check your selector : ${selector}`);
}

console.log(getElementTS('.btn', '.main' ,true));

uj5u.com熱心網友回復：

為了明確根據 的值回傳什么isList，我建議重寫函式中的邏輯，如下所示：

const parsedSelector = scope ? `${scope} ${selector}` : selector;
try {
    if (isList) {
        const element = [...document.querySelectorAll(parsedSelector)] as T[];
        if (element.length < 1) throw Error;
        return element;
    } else {
        const element = document.querySelector(parsedSelector) as T;
        if (!element) throw Error;
        return element;
    }
} catch(e) {
     throw new Error(`Please double check your selector : ${selector}`);
}

通過這樣做，您將不會遇到 TypeScript 無法縮小element此潛在問題行中的型別的問題：

if ((!isList && el) || (isList && !element.length < 1)) return el;

此外，有必要創建一個parsedSelector以確保正確連接scope和selector變數。在原始代碼中使用scope.querySelectorAll()會引發錯誤，因為scope它是字串而不是Element.

然后，只需添加函式多載以確保提供的引數和預期的回傳型別之間的正確對應：

function getElementTS<T extends Element>(selector: string, scope: string): T
function getElementTS<T extends Element>(selector: string, scope: string, isList: true): T[]
function getElementTS<T extends Element>(selector: string, scope: string, isList: false): T
function getElementTS<T extends Element>(
    selector: string,
    scope: string,
    isList?: boolean
): T | T[] {
    // Function logic here
}

請參閱 TypeScript 操場上的示例。

uj5u.com熱心網友回復：

這是我之前問題的答案的修訂解決方案。此函式的目的是從 DOM 中獲取一個或多個元素，如果找不到則拋出一個有用的例外

function getElement<T extends Element>(
  selector: string,
  scope: ParentNode | Document
): T;
function getElement<T extends Element>(
  selector: string,
  scope: ParentNode | Document,
  isElementArray: true
): T[];
function getElement<T extends Element>(
  selector: string,
  scope: ParentNode | Document,
  isElementArray: false
): T;
function getElement<T extends Element>(
  selector: string,
  scope: ParentNode | Document,
  isElementArray?: boolean
): T | T[] {
  try {
    if (isElementArray) {
      const element = [...scope.querySelectorAll(selector)] as T[];
      if (element.length < 1) throw Error;
      return element;
    } else {
      const element = scope.querySelector(selector) as T;
      if (!element) throw Error;
      return element;
    }
  } catch (e) {
    throw new Error(
      `There is an error. Please check if your selector: ${selector} is correct`
    );
  }
}

用法：

/* returns HTMLButtonElement */
const tabList = getElement<HTMLDivElement>('.tab-list', document, false)
const tabButton = getElement<HTMLButtonElement>('.tabBtn', tabList')
const navBtn = getElement('.btn--mobile-toggle', document) as HTMLButtonElement

/* returns HTMLButtonElement[] i.e Array<HTMLButtonElement>*/
const tabButtons = getElement<HTMLButtonElement>('.tabBtn', tabList, true)
const logos = getElement('.logo', document, true) as HTMLImageElement[]

請參閱 Typescript Playground 上的示例

標籤：打字稿 dom 打字稿泛型

上一篇：如何在點擊時顯示不同的文字？

下一篇：C# 在PDF中添加墨跡注釋Ink Annotation