Как правильно написать enum в React Typescript?

mukzer, тебе надо понять что TS работает только на этапе компиляции, в работе не останется никаких типов и enum'ов, будет только чистый js который работает с обычными объектами и строками.
И типы соответственно проверяются TS'ом только на этапе компиляции.

Т.е. для имитации ответа API можешь также руками скастовать тип, как скастовал бы его для json ответа сервера:

const deviceType = [
  {
    smartphoneName: 'Precision 5530',
    deviceType: 'smartphone',
  },
  {
    smartphoneName: 'MS-7A34',
    deviceType: 'computer',
  },
  {
    smartphoneName: 'MS-7A34',
    deviceType: 'computer',
  },
] as Array<{
   smartphoneName: string;
   deviceType: DeviceType;
}>

В идеале как-то так оно должно выглядеть:

interface IDeviceResponseItem {
   smartphoneName: string;
   deviceType: DeviceType;
}

function isDeviceResponseItem(item: unknown): item is IDeviceResponseItem {
  if (!item) 
    return false;

  const { smartphoneName, deviceType } = item as IDeviceResponseItem;
  
  if (typeof smartphoneName === 'string' && deviceType in DeviceType) 
    return true;

  return false;
}

function getResponse(): IDeviceResponseItem[] {
  // ответ от сервера неизвестного типа
  const json: unknown = [
    {
      smartphoneName: 'Precision 5530',
      deviceType: 'smartphone',
    },
    {
      smartphoneName: 'MS-7A34',
      deviceType: 'computer',
    },
    {
      smartphoneName: 'MS-7A34',
      deviceType: 'computer',
    },
  ];
 
  // проверка что ответ именно тот который нужен
  if(!Array.isArray(json) || !json.every(isDeviceResponseItem))
    throw new Error('[wrong response]');
    
  return json;
}

const deviceType = getResponse();

Как правильно написать enum в React Typescript?

mukzer, нет, не только сможешь но и должен. У полученных от api данных тоже должен быть какой-то тип. Тот который ты укажешь. Например

Array<{
   smartphoneName: string;
   deviceType: DeviceType;
}>

От API приходит просто текст, который парсится в json, которому ты назначаешь любой тип, т.к. на этапе компиляции он неизвестен - т.е. any.
В большинстве случаев никто не парится и просто назначают тот тип который ожидают. TS соответственно верит назначенному. Но в идеале ты должен проверить, что в ответе пришло именно то что надо.

Как правильно написать enum в React Typescript?

mukzer, это проблема, лал?

export enum DeviceType ...
import { DeviceType } from ...

Даже если ты получаешь через API - ты должен полученный ответ типизировать. В идеале ещё и проверять на соответствие типу.

Мне бы как-то только строку получать

Ты уж определись: строка или enum. Рандомная строка остаётся рандомной строкой. Никакой строгой типизации. Хочешь типизацию - используй enum или литерал, но в обоих случаях тебе придётся задавать конкретный тип.

Как правильно написать enum в React Typescript?

Ну и?
Если ты сделаешь так:

const deviceType = [
  {
    smartphoneName: 'Precision 5530',
    deviceType: DeviceType.smartphone,
  },
  {
    smartphoneName: 'MS-7A34',
    deviceType: DeviceType.computer,
  },
  {
    smartphoneName: 'MS-7A34',
    deviceType: DeviceType.computer,
  },
]

Уже никакой ошибки не будет.

Как можно сделать код, что-бы он был красивее?

WbICHA, ну так ответ - потому что модно-молодёжно. Обычная функция - сразу видно что функция, писать же стрелки где ни попадя - хипстерство. Change my mind.)

Как правильно написать enum в React Typescript?

mukzer, покажи как ты задаёшь\получаешь этот твой массив из которого ты берёшь item. В принципе всё что тебе нужно - есть в моём ответе. Но если не можешь его понять - давай конкретный код.

Как с помощью регулярного выражения выбрать то, что находится между символами?

artloveyou, если у тебя есть гарантия, что строка такой и останется на всю жизнь проекта, и точно не попадётся что-то типа

Test test</span></div><span class="fonth5_bold mt3">Sep ">01, 2022</span>

то ничего плохого, кроме "некрасивости".

P.S. У нормального парсера должен быть параметр, позволяющий парсить нестрого.

Как правильно написать enum в React Typescript?

mukzer, ты должен исправить этот массив как я указал. Или привести этот массив к типу, в котором deviceType: DeviceType;, а не deviceType: string;. Если тип массива у тебя вообще не задан - задай его.

Как правильно написать enum в React Typescript?

mukzer, а должно быть: deviceType: DeviceType.smartphone,.
Суть в том, что конкретное строковое значение может поменяться в процессе жизни проекта, и используя enum ты абстрагируешься от оного. Ну и автодополнение удобное.)

Проблема с запуском хоста на github pages. Как исправить проблему с cannot spawn sh?

У тебя винда? Если да, попробуй запускать команды не из cmd, а из git bash(уже стоит вместе с гитом).

Как типизировать подобный паттерн?

Выкинуть Map, и использовать константный объект?

const repoMap = {
  "api-repo-1": ApiRepo1,
  "api-repo-2": ApiRepo2
} as const;

Но вообще логично было бы использовать вместо any просто BaseRepository, т.к. оба варианта должны оный имплементировать. Но я так понял у вас разница какая-то есть...

Как типизировать значение?

WbICHA, лучше. Но и так сойдёт.)
Явному профану за кортежи объяснять мне лень.)

Как выводить имя полученных файлов в input type=file?

stanislavkm, в @input - метод, который делает "update" commit, мутация же сама внутри себя находит конкретный item по id и обновляет значение конкретного поля.
Условно:

mutations: {
  updateItemThumb(state, { id, thumb }) {
    const item = state.allItems.find(item => id === item.id);
    if (item) item.thumb = thumb; 
  }
}

Но это только если надо на лету обновлять стор.

Если же сохранять изменения надо по кнопке, то можно либо просто сделать глубокий клон всего массива из стора(cloneDeep) и уже с ним работать, либо если массив может изменяться на лету из других мест(зачем-то же вы его в стор положили), делать локальный слой изменений, условно:

data: {
  changes: {}
}

:value="(changes[item.id] || item).title" @input="updateItemTitle(item.id, $event.target.value)"

methods: {
  updateItemTitle(id, title) {
    if (!this.chages[id]) this.$set(this.changes, id, { title });
    else this.chages[id].title = title;
  },
  saveChanges() {
    const allItems = this.$store.state.allItems.map(item => {
      if (item.id in this.changes) 
        return {...item, ...this.changes[id]};
      return item;
    });
    this.$store.commit('allItems', allItems);
  }  
}

Само собой это лучше вынести в универсальную обёртку над формами инпутами.)

Как выводить имя полученных файлов в input type=file?

stanislavkm, ну да, для file неля value поставить, ток получить. И никогда нельзя было. Vue тут не при чём. Если очень хочется - тебе нужен кастомный файл-инпут.

Как выводить имя полученных файлов в input type=file?

У тебя item достаётся напрямую из store, v-model соответственно тоже меняет его прямо в store. Никакого коммита я у тебя не вижу. Если ты просто перекоммичиваешь весь объект allItems - это не имеет никакого смысла, объекты в javascript хранятся по ссылке.

В v-on:input очевидно должно быть item.thumb = $event.target.files[0].name, только через коммит.

Как оптимизировать React код?

Если вот прям в текущем виде воткнуть <AllFriends/> куда либо, то "Отрабатало!" должно появляться в консоли ровно один раз.
Иное возможно только если где-то выше происходит полная перерисовка, т.е. какой-то родитель полностью убирается на некоторое время(например через if), а потом появляется снова.
Но скорее всего ты просто что-то недоговариваешь.

P.S. ts-ignore в коде быть не должно. Решение "проблем" с типами, особенно в таких стандартных юзкейсах как у тебя, нагугливаются на раз два.

Через какого регистратора можно сменить администратора домена ru?

В определённых заведениях функции нотариуса имеет право выполнять начальник, если что.)

Проблемная отладка typescript в Visual Studio 2022. Почему так происходит?

mindgrow, сделай реп с минимальным примером и заведи им баг, что тут ещё можно предложить...

Существует ли гит хук запускающий тесты только для изменённого куска кода?

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

В jest есть близкое: --findRelatedTests, но он довольно глупый.

Как в React реализована собственно реактивность - какие аналоги вуевских v-bind и v-model?

Alexandroppolus, не такая же, а китайская подделка вод Vue.)
Mobx сильно на костылях прикручен к реакту и там есть куча оговорок.
Ну и использовать его нормально можно только как стор, основная работа всё равно останется на хуках.