jQuery (using the $ alias function), provided convenient APIs to toggle, add, and remove classes from elements via .toggleClass(), .addClass() and .removeClass().

JQuery.ts

interface JQuery {
  toggleClass: (className: string, state?: boolean) => JQuery;
  addClass: (className: string) => JQuery;
  removeClass: (className: string) => JQuery;
}

export default function $(selector: string): JQuery {
  const element = document.querySelector(selector);

  return {
    toggleClass: function (className: string, state?: boolean): JQuery {
      if (state) return this;
      const classNames = className.trim().split(' ');
      classNames.forEach((_className) => {
        if (_className.length > 0) {
          element?.classList.contains(_className)
            ? this.removeClass(_className)
            : this.addClass(_className);
        }
      });

      return this;
    },
    addClass: function (className: string): JQuery {
      element?.classList.add(className.trim());
      return this;
    },
    removeClass: function (className): JQuery {
      element?.classList.remove(className.trim());
      return this;
    },
  };
}

// <button class="foo bar">Click me</button>
$('button')
  .toggleClass('bar')
  .addClass('baz')
  .removeClass('foo')
  .toggleClass('bar');
// <button class="baz bar">Click me</button>