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

Question

[mukzer]

У меня есть компонент, в который я передаю props "smartphone \ computer"
Как мне написать правильно enum для этих двух значений?

У меня выходит такая ошибка

TS2322: Type 'string' is not assignable to type 'DeviceType'.

interface IDeviceItem {
  smartphoneName?: string;
  deviceStatus: boolean;
  deviceType: DeviceType;
  location: string;
  lastSeen?: string;
}

enum DeviceType {
  smartphone = 'smartphone',
  computer = 'computer'
}

Вот на этом моменте и показывается такая ошибка
<DeviceItem deviceType={item.deviceType} />

TS2322: Type 'string' is not assignable to type 'DeviceType'.

Где deviceType это поле из объекта deviceType: 'smartphone',

После чего я данные вставляю здесь, меняя изображение

<img src={`/icon/device-${deviceType}-icon.svg`} />

Answer 1

[Aetae]

Ну какбэ очевидно, что в item.deviceType у тебя строка, а не DeviceType. Проверь что у тебя там в item.

Comments

[WbICHA]

Скорее он просто передаёт 'smartphone'.
Автор, либо используй энум везде, либо нигде:
deviceType: 'smartphone' | 'computer';

[mukzer]

Aetae Я туда передаю обьект, где есть поле
deviceType: 'smartphone',

[Aetae]

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

[mukzer]

Aetae, Если честно, что-то я не совсем понял, как это должно работать, у меня есть массив объектов где есть поле deviceType: 'smartphone',
Как мне передать данные в компонент через props где у меня есть interface и enum...

PS. TypeScript учу не давно)

[Aetae]

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

[WbICHA]

mukzer, либо же прочитать мой коммент.

[mukzer]

WbICHA,

Автор, либо используй энум везде, либо нигде:

Мне нужен он только для двух значений smartphone / computer пропса deviceType

[WbICHA]

mukzer, он тебе вообще ненужен, нигде.

[mukzer]

WbICHA, Возможно, но сказали создать enum для типов устройств, так как знаний в typescript ещё не много, пошёл гуглить, но как это правильно сделать так и не нашёл...
Эти два слова влияют на картинку, раньше они передавались просто через пропс, сказали сделать enum....

[mukzer]

WbICHA, Можешь пожалуйста показать как это в принципе должно быть? (мне сказали создать enum для типов девайсов)

[WbICHA]

mukzer, Aetae тебе уже всё показал.

[mukzer]

WbICHA, Если я напишу "deviceType: DeviceType.smartphone" Я получу точно такую же ошибку

[Aetae]

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

[WbICHA]

mukzer, нет, если у тебя правильно всё типизированно.

[mukzer]

Aetae,
Вот такой массив передаю при помощи map пропсами в элемент

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

{deviceType .map((item, index) => (
     <DeviceItem
            key={`${item}_${index}`}
            smartphoneName={item.smartphoneName}
            deviceType={item.deviceType}
      />
))}

[mukzer]

Aetae,
В элементе у меня такой interface и enum

interface IDeviceItem {
  smartphoneName?: string;
  deviceType: DeviceType.smartphone,
}

enum DeviceType {
  smartphone = 'smartphone',
  computer = 'computer'
}

[Aetae]

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

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

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

[mukzer]

Aetae, Эти данные находятся вообще в другом месте, не в том же файле где enum и interface ( в будущем они могут вообще получатся через API )
Мне бы как-то только строку получать

[Aetae]

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

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

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

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

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

[mukzer]

Aetae, Это тестовые данные, в будущем они будут из API скорее всего)
Я же тогда так сделать не смогу)
Нужно получать именно строку

[Aetae]

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

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

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

[mukzer]

Aetae, Сложно это как-то всё пока что)

[Aetae]

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();

[mukzer]

Aetae, А я могу как-то ограничить, что бы можно было передать в компонент smartphone или computer? Я вот сделал как в примере выше, но если я передам к примеру smartpho то ошибку не выдаст typescript... а просто подставит в название изображения...

<img src={`/icon/device-${deviceType}-icon.svg`} alt={smartphoneName} />

[Aetae]

mukzer, добавил в ответ выше. Поскольку ответ от сервера приходит уже после компиляции, когда никаких типов уже нет - ты должен руками убедиться что ответ тот - который нужен.

Т.е. твоя задача в данном случае указать нужный тип на этапе компиляции + убедиться что ты не наврал на этапе исполнения.