Как правильно прописать тип для неизменяемого списка значений?

Question

[lexstile]

Есть компонент Input, у него есть пропса inputMode - имеет строгий список строковых значений.
Как правильно записать подобный тип?

export interface InputProps {
  inputMode?: string; // стринг нужно заменить на "один из значений"
}

export const Input = (props: InputProps) => {}

Помимо такого способа, можно как-то иначе сделать?

export type HttpMethod = 'head' | 'get' | 'post' | 'put' | 'delete' | 'connect' | 'options' | 'trace'

Comments

[Дмитрий Беляев]

а чем юнион не угодил?

[lexstile]

Дмитрий Беляев, можно пример?

[Дмитрий Беляев]

lexstile, https://www.typescriptlang.org/docs/handbook/union...

export type HttpMethod = 'head' | 'get' | 'post' | 'put' | 'delete' | 'connect' | 'options' | 'trace'

Просто юнион - это как раз и есть тип "один из значений", который Вам нужен

[lexstile]

Дмитрий Беляев, ааа, не знал, что так называется, благодарю.
Просто работал на крупных проектах, там использовали enum и я посчитал, что это более правильно что ли

[Дмитрий Беляев]

lexstile, к сожалению очень часто видел, как люди вынуждено пересаживаются с C#/Java на TypeScript, при этом особо не имея времени на вникание, как он работает. Соответственно о юнион типах не знают, а так же не понимают, что в отличии C#/Java в TypeScript enum - это дикий оверхед.
Если и использовать енамы в ts, то только константные, их как раз добавили, чтоб получать поведение как в C#/Java, где енам под капотом просто число.

[lexstile]

Дмитрий Беляев, очень интересно.
Такая запись будет оверхедом?

export enum InputMode {
  none = 'none',
  text = 'text',
  decimal = 'decimal',
  numeric = 'numeric',
  tel = 'tel',
  search = 'search',
  email = 'email',
  url = 'url',
}

[Дмитрий Беляев]

lexstile, тут 8 строк, давайте предположим, что v8 уже все с оптимизировал, дублирующие строки на ключ объекта и на его значения свел к одной строке каждую.
Всего в строках 39 символов в общем, каждый символ занимает 2 байта, то есть в общем сами строки занимают 78 байт (не считая выравнивания), помимо этого на каждую надо хранить ее длину и возможно capacity, хотя последнее давайте для простоты откинем, так как v8 использует память блоками и строки иммутабельные, можно и без capacity, но с длинной (8 байт на 8 строк) добавится еще 64 байта
И да, сами строки на куче, нужны еще указатели на них, еще 64 байта.
Ну и аллокации не бесплатны по процессорному времени, а учитывая устройство gc v8 данный объект и все строки будут реалоцированы дважды.
Ну и сам объект - это тоже память и аллокации. По памяти честно не помню структуру OrderedMap чтоб посчитать

В любом случае получается просто овер дофига памяти и процессорного времени, если сравнивать с просто числом (8 байт), пусть даже бокснутым (16 байт) и отсутствием аллокаций, так как дальше приаллоцированного YangGeneration GC дело с ним не уйдет...
И вот этого джависты/шарписты не понимают при работе с ts, так как в java/C# enum - это вообще число способное хранится на стеке.
Это если сравнивать с const enum, который ts так же компилирует в просто числа.

Если же сравнить с юнионом строк, то все равно оверхед есть. Ибо в рантайме будет уже не более 1 строки одновременно (которая кстати так же появится дополнительно и с этим enum) и аллокаций данная строка не потребует, так как опять же дальше YangGeneration GC дело не уйдет.

[Дмитрий Беляев]

lexstile, ну и возможно сейчас набегут товарищи с криками "преждевременная оптимизация", возможно я действительно в свое время слишком много хайлоада на ноде написал... Но на деле здесь нет больших затрат времени разработчика, а значит кричать "преждевременная оптимизация" в корне не верно.
Просто большинство пишет код из принципа "пишу как умею, а думать на работе мне в лом"... Но вот забавно, что мой средний по размеру проект открытый в голом VSCode (написанном на якобы тормознутом и жрущем память електроне) ест меньше гига оперативы, а если обвесить VSCode полезными но криво написанными плагинами, то съедает он уже почти 10 гигов, а на макбуке еще и подтормаживает...

Answer 1

[alex4answ]

про enum слышали ?

Comments

[lexstile]

Да, как прописать вместо стринги? (Что должен любой из перечисленного)

[alex4answ]

lexstile, в качестве типа указывайте имя перечисления (enum)

[lexstile]

alex4answ, а, и всего то? Благодарю!

[lexstile]

alex4answ, почему-то не работает.
Вынес:

export enum InputMode {
  none = 'none',
  text = 'text',
  decimal = 'decimal',
  numeric = 'numeric',
  tel = 'tel',
  search = 'search',
  email = 'email',
  url = 'url',
}

export interface InputProps {
  inputMode?: InputMode;
}

<Input
  inputMode={InputMode.numeric}
/>

// TypeScript error: Type '"numeric"' is not assignable to type 'InputMode | undefined'.  TS2322

[alex4answ]

lexstile, const Input: React.FC<InputProps> = ...

На сколько знаю вы должны тип пропсов передать в дженерик React.FC, но могу ошибаться