Aetae

Во первых DI в js\ts - полная бессмысленная хуита. Просто импортируй по-человечески что надо и используй.

Но если очень хочется - это сложно. Механизм DI не предусмотрен в парадигме языка. Тебе придётся использовать свою особую надстройку над системой сборки, которая найдёт в файлах подобные DI и заменит их на обычные человеческие импорты. Сделать можно это тремя основными способами: как трансформермер для typescript, как трансформермер для babel и как кастомный loader для webpack. Во всех случаях это включает в себя работу с AST и кодогенерацию на этапе сборки.

Впрочем, в залежах npm наверняка можно нарыть что-то готовое, чтоб не писать самому.

Если changeTab не может примать async функцию(функцию возвращающую Promise) то никак. Ожидание действия пользователя - асинхронная операция. Тебе надо изменить логику поведения.

Иначе: система диалогов должна быть в любом случае вынесена в отдельный компонент, а в идеале вообще во внутренние вызовы, типа:

const result = await modal({
  title: ...,
  type: 'confirm',
  acceptText: 'Подтвердить',
  ...
})

Но если что-то колхозить, то условно так:

showPopup() {
  this.isDialogShown = true;
  this.pending = new Promise((resolve) => {
    this.discardChanges = () => resolve(false);
    this.saveChanges = () => resolve(true);
  });
},
async changeTab() {
  ...
  return await this.pending;
}

Ну или прямо так:

changeTab() {
  return new Promise((resolve) => {
    this.discardChanges = () => resolve(false);
    this.saveChanges = () => resolve(true);
  });
}

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

Твой index - и есть в данном случае ключ. Т.е. проверять нужно просто index === 'dateTime'.

Опережая возможный вопрос - если тебе нужен именно цифровой индекс, то в случае с объектом на входе он будет третьим параметром:v-for="(filter, key, index) in filters". Однако в твоём случае он не нужен, т.к. лучше привязывать key именно к ключу.

В vue всё для людей.)

prettier - это одно, eslint - это другое, если у тебя prettier подключается через eslint, то настройки для него указываются скопом, условно так:

rules: {
    'prettier/prettier': ['warn', {
      semi: false,
      ...
      singleQuote: true,
      vueIndentScriptAndStyle: true,
      arrowParens: 'avoid',
      trailingComma: 'none',
      quoteProps: 'consistent',
    }],

Очевидно что пакет битый или ты подключаешь что-то не то.
В готовой либе никаких алиасов быть не должно, на то она и готовая.

Можно что-то нашаманить, но в каждом конкретном случае своё, потому что в любом случае через жопу.

const options = computed(() => {
  if (props.secondType) 
    return props.secondTypeItems.map(({ id, value}) => ({
      label: value,
      value: id 
    }));

  if (props.thirdType) 
    return props.thirdTypeEvents.map(({ desc, name }) => ({
      label: name,
      value: desc 
    }));

  // ...

  return [];
});

<el-select
      v-model="modelText"
      placeholder="Выберите предмет"
      @change="changeVal"
    >
      <el-option
        v-for="{ label, value} in options"
        :key="value"
        :label="label"
        :value="value"
      >
        {{ label }}
      </el-option>
    </el-select>

Во первых:
import { computed, ref } from "vue";

Во-вторых:

<Input type="number" :value="count" @change="changeCount"/>

Дальше при нормальных данных и компонентах должно работать, однако возможно энтот твой Input в change возвращает не значение, а event, тут хз сам смотри.

Можно использовать css-modules.
Можно оставить твой подход, просто пользоваться БЭМ и scss, называя корневой класс по имени компонента(тогда конфликтов никаких не будет).
Решения css-in-js типа styled - популярны, но как по мне - ересь и грязь.

Откуда ты эту хрень взял?

axios.post('http://localhost:5000/api/create-post', () => {
  body: data
})

Во-первых: axios принимает параметром объект, а не функцию возвращающую объект.
Во-вторых: axios.post вообще сразу принимает body:

axios.post('http://localhost:5000/api/create-post', data)

В-третьих: даже если бы оно принимало функцию(что не так) - конструкция

() => {
  body: data
}

на самом деле расшифровывается так:

() => { // начало блока кода
  // метка body указывающий на висящую в воздухе переменную data
  body: data
  // никакого возврата из функции
} // конец блока кода

чтобы оно воспринималось как объект, можно, например, заключать в скобки:

() => ({
  body: data
})

Ответ Александр хорошо работает если есть дискриминатор (в приведённом примере поле type).

Если же такого уникального поля нет, то конкретно для React можно сделать на перегрузках, условно:

type ExtraProps = {
  size?: 's' | 'm' | 'l';
}

type AnchorProps = ExtraProps & {href: string};
type ButtonProps = ExtraProps & {type: string};

function TappableComponent(props: AnchorProps ): ReactNode; 
function TappableComponent(props: ButtonProps ): ReactNode;
function TappableComponent(props: AnchorProps | ButtonProps ) {
     const Component = 'href' in props ? 'a' : 'button';
     return <Component>...</Component>
}

Там множество подводных камней, но иногда удобно.

Ради ускорения сборки из коробки не предусмотрено сложной типизации событий. Одно время события имели сложную типизацию на дженериках, но оную вкинули из ts. (Что весьма меня расстраивает, могли бы и оставить как отдельную настройку, для тех кому плавная типизация важнее скорости.)

Тебе остаётся только кастовать типы руками, увы. Причём рекомендую в данном случае использовать currentTarget а не target, потому что target может оказаться например span внутри этой ссылки, а не она сама.

Ответ на твой вопрос на самом деле зависит от того, что за говно у тебя в cartEmptyImg.
Т.к. голый js не умеет в принципе импортировать что-то кроме js модулей - это полностью зависит от твоей конфигурации загрузчиков и настроек, о которых в вопросе не сказано ни слова.
Даже хотя-бы полный текст ошибки частично пролил бы свет на этот вопрос, но конечно же "лишняя" информация в вопросе не нужна, да.

В целом тут может быть несколько вариантов:
1. Используется простой загрузчик, который в импорт подставит простой url или data uri, тогда у тебя хреново настроен тип для png: должен быть где-то файлик условно вида:
2. Используется какая-то более продвинутая хрень(генератор спрайтов, генератор react-копонентов, и т.д.). Тут уж сам смотри что там и куда это что-то надо пихать, потому как без инфы тут можно только гадать на кофейной гуще.

Вот что тебе не понятно в ошибке?
Он тебе пишет "не могу прочитать appendChild у null".
Включаем голову и глаза на ней: откуда он хочет прочитать appendChild в данном месте?
Из document.body, так?
В каком случае document.body === null?
Очевидно, когда никакого body нет на странице.
Когда body нет на странице?
В тот момент когда кусок разметки с body ещё не прочитан.
Когда такое возможно?
Когда скрипт выполняется в head и не ждёт загрузки документа.

Из этого можно сделать вывод, что раньше ты пихал скрипт внутрь body и всё работало, а сейчас wp подключает его в head, как принято.
Соответственно, тебе либо надо найти как пихать скрипт в body в wp, либо, что лучше, дожидаться в скрипте загрузки документа(DOMContentLoaded).

https://vitejs.dev/config/server-options.html#serv...
Буквально первый параметр сервера в vite.

И вот в ts 4.9 наконец-то ввели фичу отвечающую на этот вопрос (буквально джва года ждал):

interface Some {
  value: string | string[];
}

const foo = {
  value: ['a', 'b'] // здесь всегда будет массив
} satisfies Some;

foo.value.map(() => {}); // ок

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

По-хорошему - делаешь ещё один массив(через usememo) с уже разложенным как надо значениями и уже с ним работаешь.
Но в целом substring каждый рендер даёт пренебрежимо мизерные накладные расходы, а вся идея React: "хреначь сейчас, оптимизируй потом(никогда)", так что делай как хочешь.)