Блог

Главная - Вопросы по программированию - как присвоить значение объединенного типа подтипу в javascript или typescript

как присвоить значение объединенного типа подтипу в javascript или typescript

#javascript #typescript #vue.js

Вопрос:

Мое название немного связано, я знаю, что 🙁

У меня есть 2 компонента, studentBasicComponent и studentContactorComponent . поэтому для каждого компонента я создаю модели для привязки данных (код, который я вставил, упрощен, в нем довольно много свойств).

 export default interface StudentBasic {
  id: Number,
  name: String,
  birth: Date,
  gender: String
}

export default interface StudentContactor {
  name: String,
  phone: String
}

export type Student = StudentBasic amp; StudentContactor;

Короткий вопрос таков:

Если да const student: Student = { ... } , то как я могу назначить его const basic:StudentBasic и const contractor:StudentContactor как можно проще?

Для детализации мы получаем данные с сервера с помощью одного запроса, поэтому я получаю от api что-то вроде.

 export default defineComponent({
  components: {
    "student-basic": studentBasicComponent,
    "student-contactor": studentContactorComponent,
  },
  props: {
    id: {
      type: String,
      required: true
    },
  }
  setup(props) {
    const studentBasicData: StudentBasic = reactive( {
        id: 0,
        name: "",
        birth: moment(),
        gender: "",
    });
    const contactor: StudentContactor = reactive({
      name: "",
      phone: "",
    });

    onMounted(async() => {
      const data: Student = await getStudent(props.id);

      // Here, how to assign value to studentBasicData and studentContactor
    });

    return {
      studentBasicData,
      studentContactor,
    }
  },
})

Итак , после того, как я получу все данные const data: Student = await getStudent(props.id); , как я могу назначить studentBasicData и studentContactor ?

Я не хочу вручную устанавливать значение для каждого свойства с помощью studentBasicData.name = data.name

(с использованием машинописного текста Vue 3 )

Комментарии:

1. Ну, это всего лишь интерфейсы и его JavaScript. Для меня либо я создам два модальных класса ( для каждого studentBasicComponent amp; studentContactorComponent ), у которых есть метод, parseJson(data:Student) а затем верну studentBasicComponent или studentContactorComponent . Или же я просто создам две копии data объекта. затем удалите ненужные свойства. let basic = deleteUnwanted(dataCpy, "BASIC") as studentBasicComponent

2. Машинопись он просто указать тип, это не значит, если вы создали тип, делаете операцию, то вы можете выбрать значения для любого варианта, вам придется сделать это вручную, на самое вы можете сделать это по другому это набор, смысл, а не с помощью . операции можно использовать как с const { ID, имя } = someObject; // имеющие { идентификатор:1, имя: ‘Джон’}, а затем создать новый объект, как константный объект obj = { ID, имя }

Метки: