인프런 커뮤니티 질문&답변

안녕하세요, 제로초님! 좋은 강의 잘 듣고있습니다.

아래 $(tag)의 타입 추론 과정에 대해 질문드립니다.

// tag: JQuery<HTMLElement>
const tag = $("ul li")
  .addClass("hello")
  .addClass(function (index) {
    return "item-" + index;
  });

//* jQuery를 $로 한번더 감싼 형태
$(tag).html(function (i: number) {
  console.log(this);
  return 

JQuery와 $의 타입 정의는 다음과 같습니다.

// JQuery
interface JQuery<TElement = HTMLElement> extends Iterable<TElement> {...}

// $
<T extends Element>(element_elementArray: T | ArrayLike<T>): JQuery<T>;

즉, $(tag)의 tag는 JQuery<HTMLElement>이면서 element_element에 대응하므로 Element | ArrayLike<Element>이기도 합니다. 즉 JQuery<HTMLElement>가 Element | ArrayLike<Element>가 되기에 충분하다는 것을 추론할 수 있습니다.

JQuery<HTMLElement> extends Iterable<HTMLElement> 이므로 Iterable<HTMLElement>은 Element | ArrayLike<Element> 가 되기에 충분하다는 건데, 이 근거를 찾기 위해 Iterable의 타입도 찾아본 결과 다음과 같았습니다.

interface Iterable<T> {}

즉 Iterable<HTMLElement>은 non-nullish라는 것입니다.

하지만 이게 Element | ArrayLike<Element> 가 되기에 왜 충분한 것인지를 모르겠습니다. lib.dom.d.ts에 정의된 Element 타입은 다음과 같이 매우 복잡하여 더 들여다 보진 못했습니다.

interface Element extends Node, ARIAMixin, Animatable, ChildNode, NonDocumentTypeChildNode, ParentNode, Slottable {