Блог

У меня есть следующий тип данных, возвращаемых с сервера: let response: RegistryGeneric[] :

 interface RegistryGeneric {
   id: number;
   name: number;
}
 

Я хочу отметить, выбран ли элемент RegistryGeneric пользователем. Для этого я создал расширенный интерфейс:

 interface RegistryGenericUI extends RegistryGeneric {
   selected: boolean;
}
 

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

 public setSelected(registry: RegistryGeneric) {
   registry.selected = true;
}
 

Интересно, это правильный способ сделать это или создать внутри компонента, где хранить выбранный? new Map<RegistryGeneric><boolean>() RegistryGeneric

Как вы решаете это в Angular?

Я бы сказал, что это скорее вопрос «Typescript», а не «Angular»? Если я не ошибаюсь, вы должны быть в состоянии решить все это только с одним интерфейсом.

Одним из способов было бы добавить selected?:boolean свойство в ваш первый интерфейс. Это сделало бы свойство необязательным (так что вы не получите сообщение об ошибке, если RegistryGeneric при возврате с вашего сервера его нет). Обратите внимание, однако, что использование необязательных свойств (отмеченных знаком ? ), как правило, НЕ является правильным. Это легко, если вы начинаете с Typescript, но язык предлагает лучшие возможности.

Одним из лучших способов, но я все еще изучаю его сам, было бы использовать типы утилит Typescript, такие как Omit . Это позволит вам максимально использовать типизацию. Вы получите максимальный контроль над своими данными и получите наилучшую поддержку от вашей IDE. В этом случае, например, вы могли бы настроить свой интерфейс с тремя свойствами, и тогда ваш сервер возвращал бы объекты типа <Omit<RegistryGeneric, 'selected '>> . Это затрудняет чтение кода, но если по какой-то причине вы неправильно используете свои типы, компилятор рано покажет ошибки.

РЕДАКТИРОВАТЬ: как я уже сказал, я сам все еще изучаю второй подход, поэтому отнеситесь к нему с недоверием. Я видел Omit , что он используется в тех случаях, когда, например, у вас есть id интерфейс Typescript, который вы можете использовать, например, для удаления элемента, но вы не хотите передавать id при создании нового элемента (потому id что он генерируется сервером)