Как централизовать инициализацию интерфейса в проекте React с помощью Typescript - PullRequest
Новая
       18

Как централизовать инициализацию интерфейса в проекте React с помощью Typescript

0 голосов
/ 22 октября 2018

У меня есть React проект в Typescript, и во многих моих компонентах я использую интерфейс внутри State: 

interface Item {
    selectedValue: string
    originalSelectedValue: string
    loading: boolean
    disabled: boolean
    isValid?: boolean
}

interface State {
   itemInstance: Item
}

В каждом компоненте я использую constructor длячтобы инициализировать экземпляр интерфейса: 

constructor(props: Props) {
        super(props);

        let itemInstance: Item = {
             selectedValue: '',
             originalSelectedValue: '',
             loading: true,
             disabled: false,
             isValid?: false
        };

        this.state = {
           itemInstance: itemInstance
        }
}

Поскольку мне нужно повторить эту инициализацию для каждого компонента, вместо копирования / вставки кода в каждый компонент, я попытался найти способ централизовать инициализацию.Поскольку интерфейс не может иметь реализацию, я подумал реализовать некий шаблон метода фабрики без указания класса: 

     export const getItemInstance = (): Item  => {
        return ({
                 selectedValue: '',
                 originalSelectedValue: '',
                 loading: true,
                 disabled: false,
                 isValid?: false
       });
    }

Хотя я не очень заинтересован в этом решении, поскольку для каждогоИнтерфейс Мне нужно создать еще один файл / компонент, который реализует инициализацию.Кто-нибудь знает шаблон для реализации этого поведения в Typescript?

1 Ответ

0 голосов
/ 22 октября 2018

Я знаю, что вы упомянули, что вы не хотите использовать класс, но я бы, вероятно, просто ввел класс, реализующий интерфейс в любом случае.Затем вы просто создаете экземпляр через одну строку: 

interface IItem {
    selectedValue: string
    originalSelectedValue: string
    loading: boolean
    disabled: boolean
    isValid?: boolean
}

class DefaultItem implements IItem {
  constructor(
    public selectedValue = '',
    public originalSelectedValue = '',
    public loading = true,
    public disabled = false,
    public isValid = false
  ) {}
}

Затем внутри вашего компонента: 

constructor(props: Props) {
  super(props);

  const itemInstance = new DefaultItem();

  this.state = {
    itemInstance
  };
}

Не только это выглядит намного лучше, но когда вы хотите изменить значение по умолчанию, равное одномуконкретное свойство для всех экземпляров, вы делаете это в одном месте.

...