Aetae

Никак. Никакого мороза в javascript.
Просто прерываешь отправку (preventDefault()), показываешь модал, и, после нажатия кнопки внутри модала, вручную вызываешь submit этой формы повторно, в этот раз уже не препятствуя.
(один вызов от другого можно отличить поставив некий флаг или просто по какому-нибудь свойству события, тому же isTrusted)

Что именно ты хочешь сократить, вроде ж дальше некуда: один тип на вход - один на выход?

Ну можешь убрать async и await, они здесь не нужны:

const ApiServiceModule = {
  get: <T>(url: string): Promise<T> => fetch(url)
    .then(response => response.json())
    .catch(err => console.error(err))
}

async/await всего лишь сахар над Promise и в данном случае ничего не делают, т.к fetch и так возвращает Promise.

P.S. Ну и методом я бы это не назвал, это свойство с функцией. Метод имеет доступ к this.

Вы думали написали слово async и оно само внезапно стало асинхронным? Ничего подобного. У вас всё разлетается на кучу параллельно исполняемых функций, и никто никого не ждёт. Изучайте асинхронность в javascript или используйте синхронные функции(с постфиксом Sync).

Именно из-за таких как ты отказались от удобного слушателя событий изменения элементов, и придумали наблюдатель.
Разница? Наблюдатель наблюдает и изредка, когда это не повлияет на скорость работы страницы, сбрасывает весь список изменений. В отличии от слушателя, который слушает каждое событие изменения.

Так делать нельзя, категорически. Это бессмысленная тяжёлая нагрузка. Ты вызываешь изменения стиля своей функцией, вот из этой функции и производи иные изменения. Тебе не нужны наблюдатели и события для этого.

Потому что объекты в javascript присваиваются по ссылке. Это основы основ.
Делай так:

Employee.prototype = Object.create(User.prototype);

Вот так работает:
Почему не работал до этого, без очистки? А хз, какие-то внутренние особенности хрома.

Правильный ответ: писать код предусматривающий подобные вещи через абстракции. Тебе не надо триггерить события, ты должен при установке значения напрямую вызывать нужные функции. Ты сам знаешь что у тебя в коде происходит и какие функции привязаны к событиям, тебе не нужно ждать событий от браузера.
Полезный ответ: использовать любую библиотеку умеющую в data binding, которая будет заботится о таких вещах за тебя. Мне лично нравится Vue, но есть и множество решений по-проще и по-традиционней.
Плохой ответ: ты можешь добиться этого примерно таким извращением, подменив стандартный сеттер на value:

const valueDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
Object.defineProperty(two, 'value', {
  ...valueDescriptor, 
  set(value) {
    valueDescriptor.set.call(this, value);  
    this.dispatchEvent(new Event('input', {
      bubbles: true,
      cancelable: true,
    }));
  } 
})

Во-первых: такая хрень происходит только в хроме, достали со своей монополией.
Происходит это потому, что умный хром считает, что после параграфа должен быть отступ, даже если параграф всего один.
Решение - заменить p на span или выбирать не сам тег, а его содержимое: selectNode -> selectNodeContents.

Чтоб хоть как-то заработало надо вспомнить что width задаётся в неких единицах измерения, а offsetWidth возвращает просто число: border.style.width = link.offsetWidth + 'px';

Чтоб оно менялось при изменении размера можно добавить наблюдатель(нужен ie - использовать полифил):

let link = document.querySelector('#link');
let border = document.querySelector('#border');
new ResizeObserver(() => border.style.width = link.offsetWidth + 'px').observe(link);

Но вообще в 99% случаев масштабирование элементов решается вёрсткой .

а) Не класть контент в #bg.
б) Назначить контенту

onclick = function(event) {
  event.stopPropagation();
}

Ответ на вопрос: document.activeElement.
Ответ на то что подразумевалось в вопросе:

function onInputFocus(){
   console.log(this)
}
var inputs = document.getElementsByTagName('input');
for(var i = inputs.length; i--;) 
  inputs[i].addEventListener('focus', onInputFocus);

или, если нужна поддержка динамически добавленного:

document.addEventListener('focus', function(event){
  var target = event.target;
  if(!target || target.tagName !== 'INPUT') return;
  console.log(target)
}, true)

Проверяй что добавляешь перед push, очевидно.

Не пытаться прочитать свойство '0' у undefined значения, очевидно. В ошибке всё написано.
Смотрите где вы читаете свойство с ключом '0'. Нашли?
Теперь смотрите у какого объекта вы пытаетесь прочесть это свойство. Нашли?
Вот этот объект - отсутствует(undefined). А уж разобраться почему он отсутствует - ваша задача.

let func = eval(userfunc);
func.call(arg);

а лучше:

let func = new Function('return ' + userfunc)();
func.call(arg);

а ещё лучше никогда так не делать.
Нет ни одной прикладной задачи, где это могло бы потребоваться.
Если нужно вызывать функции по имени - просто кладите их в объект:

let funcs = {
  func1(){console.log('Функция вызвана!!!');};
};
funcs[userfunc].call(arg);

=== точное сравнение с учётом типа. clientWidth - число, '769' - строка, число никогда не равно строке. Уберите кавычки.
Также верным условие будет только если clientWidth точно будет равно числу с правой стороны. Вы уверены, что это именно то, что вам нужно? Возможно стоит использовать >= или <=?

Ну и использовать javascript для таких задач не принято в своременном вэбе. Для этого есть css media queries.

Объект chrome доступен только из расширений. Для клиентского js подмена ресурсов возможна только через манипуляции с кэшем в service-worker.

Лучше всего заюзать функцию sortBy из lodash, которая делает именно это, и не парить мозг. Иначе тебе придётся написать аналог функции lodash get, а там есть свои подводные камни.
Но если примитивно:

function get(value, str) {
  for(const key of str.split('.')) {
    if(value && key in value) value = value[key];
    else return void 0;
  }
  return value;
}
arr.slice().sort((a,b) => get(b,proper) - get(a,proper));