[Typescript] DOMNodeExtractorConfig

import { it } from 'vitest';
import { Equal, Expect } from '../helpers/type-utils';

export const isDivElement = (element: unknown): element is HTMLDivElement => {
  return element instanceof HTMLDivElement;
};

export const isBodyElement = (element: unknown): element is HTMLBodyElement => {
  return element instanceof HTMLBodyElement;
};

interface DOMNodeExtractorConfig<T, Result> {
  isNode: (node: unknown) => node is T;
  transform: (node: T) => Result;
}

const createDOMNodeExtractor = <T, TResult>(
  config: DOMNodeExtractorConfig<T, TResult>
) => {
  return (nodes: unknown[]): TResult[] => {
    return nodes.filter(config.isNode).map(config.transform);
  };
};

it('Should pick up that "extractDivs" is of type "HTMLDivElement[]"', () => {
  const extractDivs = createDOMNodeExtractor({
    isNode: isDivElement,
    transform: (div) => {
      type test1 = Expect<Equal<typeof div, HTMLDivElement>>;
      return div.innerText;
    },
  });

  const divs = extractDivs([document.createElement('div')]);

  type test2 = Expect<Equal<typeof divs, string[]>>;
});

it('Should pick up that "extractBodies" is of type "HTMLBodyElement[]"', () => {
  const extractBodies = createDOMNodeExtractor({
    isNode: isBodyElement,
    transform: (body) => {
      type test1 = Expect<Equal<typeof body, HTMLBodyElement>>;

      return body.bgColor;
    },
  });

  const bodies = extractBodies([document.createElement('body')]);

  type test2 = Expect<Equal<typeof bodies, string[]>>;
});

 

posted @   Zhentiw  阅读(10)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
历史上的今天:
2021-02-10 [Typescript] Create Type From Any Given Data in TypeScript
2021-02-10 [Typescript] Ignore Null or Undefined Values with TypeScript Non-Null Assertion Operator
2020-02-10 [Algorithm] 226. Invert Binary Tree
2020-02-10 [Unit Testing] Jasmine Spies
2019-02-10 [HTML5] Build Flexible HTML with HTMLTemplates using Slots and Web Components
2017-02-10 [Typescript] What is a Function Type ? Function Types and Interfaces - Are They Related ?
点击右上角即可分享
微信分享提示