Антон Горецкий

Нет, неправда.

Не бывает так, что один и тот же код в одинаковом окружении иногда "отваливается", а иногда "не отваливается".
Я вот за что очень люблю программирование - у всего всегда есть причина.
Чаще всего причиной являются кривые руки. :)

У меня чистый JS и PHP с фреймворком Laravel.

Во первых - неизвестно сколько кода и какой функционал у вас в проекте. Естественно инструмент выбирают под задачу, а не наоборот.

Если у вас на фронтенде нет огромного функционала по манипулированию ДОМ, это не СПА и нет смысла тянуть еще 10 библиотек ради 200 строчек кода - чистый жс лучший выбор. Плюсы - хорошо поддерживается, любой специалист среднего уровня может поддерживать, нет необходимости в дополнительных библиотеках, которые ведут к дополнительной зависимости от чужой кодовой базы, нет необходимости следить за последними изменениями в чужой библиотеке, не тянутся лишние файлы.

На бэкенде - ларавел неплохо покрывает 90% типовых задач "искаропки", широкий выбор достаточно качественных модулей на любой чих, хорошее покрытие тестами, обширное комьюнити и качественная документация. Качество кода однозначно будет выше по сравнению с начинающим кодером, если использовать уже кем-то написанный и многократно протестированный код. Кроме того - имеет кодестайл, приучает к (относительно) качественному подходу в разработке...

Что из этого применимо в вашем случае - хз, так как это больше общие слова, хотя и хорошо отражающие действительность.

узнать, есть ли атрибут у элемента: element.hasAttribute('maxlength')

установить атрибут: element.setAttribute('maxlength', 20)

выбрать все: document.querySelectorAll('input[type=password]')

План:

1. выбрать все с типом password;
   
2. пройти по ним циклом forEach()
   
3. внутри смотреть, есть ли уже атрибут maxlength;
   
4. если нет, добавить атрибут
   
5. выполнить alert() в любом случае
   

https://developer.mozilla.org/ru/docs/Web/API/Wind...

Получаешь токен, пихаешь в localStorage, при этом все остальные вкладки получают событие storage. А значит, просто слушая этот ивент, ты сможешь обновить токен где тебе надо, на всех вкладках.

https://www.typescriptlang.org/tsconfig#resolveJso...

Ну или создайте рядом с db.json файл db.json.d.ts со следующим содержимым:

declare const JSON: {
    id: number;
}[];
export default JSON;

const create = (user: IUser) => {
    (db as IUser[]).push(user)
}

(data?.data?.stats)
то же, что и
(data && data.data && data.data.stats)

То есть просто более короткая и более красивая запись.

type T = {
  id: number;
  quantity: number;
}[];

Custom properies не работают в выражениях медиазапросов. Да и в любых других.
Их можно использовать только в качестве значения свойства элемента (селектора).

К размышлению. Как должен был бы повести себя следующий код:

:root {
  --small-screen: 500px;
}
.sidebar { background: red; }

@media (max-width: var(--small-screen)) {
  :root {
    --small-screen: 1000px;
  }
  .sidebar { background: green; }
}

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

Но рас так хочется, то тип для твоей функции таков:

function exportConstruct<P extends any[], T>(classFromExport: { new (...args: P): T; }): 
(...args: P) => T {
  return (...args) => new classFromExport(...args);
}

Но так ты теряешь например возможность использовать статические методы класса.

Если можешь использовать Proxy то можно просто сделать класс вызываемым:

function exportCallable<T extends { new (...args: any[]): any; }>(classFromExport: T) {
  return new Proxy(classFromExport, {
    apply(ctor, _, args) {
      return new ctor(...args);
    }
  }) as T & ((...args: ConstructorParameters<T>) => InstanceType<T>);
}

const Lol = exportCallable(class Lol extends BaseLol {
  constructor(public name: string) {
    super();
    this.name = name.toUpperCase();
  }
});

Lol('qwe');

Либо ты можешь просто добавть статический метод, который будет делать то же самое:

abstract class Newable {
  static new<P extends any[], T>(this: { new (...args: P): T; }, ...args: P): T { 
    return (new this(...args)) as T
  }
}

class BaseLol extends Newable {  /* ... */ }

class Lol extends BaseLol {
  constructor(public name: string) {
    super();
    this.name = name.toUpperCase();
  }
}

Lol.new('qwe');

const inputs = [...document.getElementsByClassName('inputs')];

function onInput() {
  if (this.value.length === this.maxLength) {
    inputs[-~inputs.indexOf(this)]?.focus();
  }

  if (inputs.every(n => n.value.length === n.maxLength)) {
    console.log('ВСЕ ЗАПОЛНЕНЫ');
  }
}

for (const n of inputs) {
  n.addEventListener('input', onInput);
}

или

const inputs = document.querySelectorAll('.inputs');

inputs.forEach(function(n) {
  n.addEventListener('input', this);
}, function({ target: t }) {
  const isFilled = t.value.length === t.maxLength;
  if (isFilled) {
    t.nextElementSibling?.focus();
  }

  if (this[isFilled ? 'add' : 'delete'](t).size === inputs.length) {
    console.log('ВСЕ ЗАПОЛНЕНЫ');
  }
}.bind(new Set));

const Property = ({ data, onDelete }) => (
  <div>
    #{data.id}
    <button onClick={onDelete}>Del</button>
  </div>
);

const ConstructorPage = () => {
  const [ properties, setProperties ] = useState([]);
  const delProperty = property => setProperties(properties.filter(n => n !== property));
  const addProperty = () => setProperties([
    ...properties,
    {
      id: 1 + Math.max(0, ...properties.map(n => n.id)),
    },
  ]);
  
  return (
    <> 
      <button onClick={addProperty}>Add</button>
      {properties.map(n => (
        <Property
          key={n.id}
          data={n}
          onDelete={() => delProperty(n)}
        />
      ))}
    </>
  );
};

new Promise(resolve => {
  // здесь код выполняется синхронно
  resolve();
}).then(() => {
  // здесь уже асинхронно, в ближайшем микротаске после вызова resolve выше
});

Promise.resolve().then(() => {
  // здесь тоже асинхронно, в ближайшем микротаске
});

много вычислений

Это не про асинхронность.
Асинхронность - это про кооперативную многозадачность, то есть промис может только отложить вычисления на потом, но они все равно заблокируют поток, который у JS всего один.
А для "много вычислений" без блокирования основного потока, эти "много вычислений" нужно выносить в отдельный поток. В JS для этого есть воркеры. А вот уже результат от воркера можно ждать асинхронно.

handleChange = (name) => ({ target }) => {
    this.setState({ [name]: target.value });
};

То же, что и:

handleChange = function(name) {
    return function({ target }) {
        this.setState({ [name]: target.value });
    };
};

Или так:

handleChange = function(name) {
    return function(obj) {
        this.setState({ [name]: obj.target.value });
    };
};