1

UPDATE См. конце в вопроса

Ни когда не использовал TypeScript. Но понадобилось покопаться внутри компонента Vue, который реализован на TypeScript. Может быть этот синтаксис аналогичен и для JavaScript, я не знаю. Но мне неочень понятны некоторые строки.

Сначала размещу весь код компонента, это компонент Vue-Tabulator, непонятные строки пометил комментариями, а дальше написал вопросы по ним:

<script lang='ts'>
import {
  Component, Prop, Vue, Watch, Model,
} from 'vue-property-decorator';
import { IntegrationOptions, UpdateStrategy } from '@/types';
import mergeWith from 'lodash.mergewith'
import merge from '../utilities/merge'
const Tabulator = require('tabulator-tables');
import eventFactory from '../feature/event-factory'
import cellEvents from '../feature/events/cell-events'
import rowEvents from '../feature/events/row-events'

@Component({
  name: 'TabulatorComponent',
})
export default class TabulatorComponent extends Vue {
  @Model('change', { default: () => [] })
  public tableData?: Array<any>;

  //1--------------
  private tabulatorInstance: Tabulator | null = null; 

  get eventOptions(): Object {
    const events = eventFactory.bind(this)
    return {...events(rowEvents), ...events(cellEvents)}
  }

  //2--------------
  @Prop({ default: () => ({}) })
  private options?: Tabulator.Options; 

  //3--------------
  @Prop({ default: () => ({ updateStrategy: UpdateStrategy.DATA }) })
  private integration?: IntegrationOptions;

  //4--------------
  private resolvedOptions: Tabulator.Options = {}; 

  public getInstance() {
    return this.tabulatorInstance;
  }

  private createTable() {
    this.tabulatorInstance = new Tabulator(
      this.$refs.table,
      this.resolvedOptions,
    );
  }

  @Watch('options', { deep: true })
  private updateOptions() {

    this.resolvedOptions = {
      ...mergeWith(this.eventOptions, this.options, merge),
      data: this.tableData,
    };

    this.createTable();
  }

  @Watch('tableData', { deep: true })
  private updateData() {
    //5--------------
    if (this.tabulatorInstance) { 
      if (this.integration && this.integration.updateStrategy === UpdateStrategy.REPLACE) {
        this.tabulatorInstance.replaceData(this.tableData);
      } else if (this.integration && this.tableData
      && this.integration.updateStrategy === UpdateStrategy.UPDATE) {
        this.tabulatorInstance.updateData(this.tableData);
      } else {
        this.tabulatorInstance.setData(this.tableData);
      }
    }
  }

  mounted() {
    this.updateOptions();
  }
}

Строки по каким возникли вопросы:

  1. private tabulatorInstance: Tabulator | null = null; //1

Что значит вcе что после двоеточия?

поле tabulatorInstance может принимать тип Tabulator или null? Что за странная конструкция | null = null

  1. private options?: Tabulator.Options; //2 Что значит оператор ?:

  2. private integration?: IntegrationOptions; //3 Здесь я знаю что IntegrationOptions это enum из другого файла

Чтов этом случае значит это объявление?

  1. private resolvedOptions: Tabulator.Options = {}; //4 Похоже на 2, но почему то тут появилось = {}

  2. if (this.tabulatorInstance) { //5

Как tabulatorInstance может оказаться незаполненным?

UPDATE:

В компоненте есть еще такой файл entry.ts. Точка входа для компонента. Я как понял, эта точка входа необходима для компонента, который будет подключаться как плагин к приложению, т.е. через Vue.use().

Понял из этого, все кроме последнего блока кода для чего принудительно вызывается функция install? Это так принято или это решение разработчика так реализовать?

import Vue from 'vue';
import TabulatorComponent from '@/components/TabulatorComponent.vue';

export { TabulatorComponent };

function install(VueApp: typeof Vue, options: any = {}) {
  const name = options.name || 'VueTabulator';
  VueApp.component(name, TabulatorComponent);
}; 

export default {
  install,
};

if (typeof window !== 'undefined' && (<any>window).Vue && (<any>window).Vue === Vue) {
  install((<any>window).Vue)
}
4
  • 1
    1: выставляем для tabulatorInstance тип Tabulator или null и присваиваем значение null. 2: необязательность
    – Eleferen
    15 ноя 2019 в 5:52
  • 1
    4. {} - пустой объект. 5. Эм, так как изначально ему и присвоено значение null 15 ноя 2019 в 5:56
  • Kir_Antipov, я просто подумал, что после монтирования tabulatorInstance будет определен и не пойму, как может сработать watch на tableData до того, как будет смонтирован сам компонент 15 ноя 2019 в 6:03
  • Или скорей всего это просто перестраховка разработчика, так как null присваивается, мало ли где вылезет 15 ноя 2019 в 6:08

1 ответ 1

2

private tabulatorInstance: Tabulator | null = null; //1 Что значит вcе что после двоеточия?

поле tabulatorInstance может принимать тип Tabulator или null? Что за странная конструкция | null = null

Смотрите, всё что стоит после : - это объявление типа. Всё что стоит после = - это объявление значение.  | в объявлении типа - это или.

То есть в этом случае мы сообщаем компилятору: поле tabulatorInstance может быть типа Tabulator или null. И после = мы сообщаем JS-интерпретатору - присвоить значение null. После компиляции чистый JS будет таким: tabulatorInstance = null.

private options?: Tabulator.Options; //2 Что значит оператор ?:

? перед объявлением типа означает то что это поле опционально и может быть undefined. Эту запись можно переписать как private options: Tabulator.Options | undefined.

private integration?: IntegrationOptions; //3 Здесь я знаю что IntegrationOptions это enum из другого файла

👍

Что в этом случае значит это объявление?

private resolvedOptions: Tabulator.Options = {}; //4 Похоже на 2, но почему то тут появилось = {}

Это означает "присвоить значение {}". Как и в обыкновенном JS.

if (this.tabulatorInstance) { //5

Как tabulatorInstance может оказаться незаполненным?

tabulatorInstance может принять значение null. Тут мы это как раз и проверяем.

2
  • Спасибо за ответ! если вас не затруднит можете еще прокомментировать файл точки входа, я в текст вопроса добавил UPDATE. Я там написал, какой момент не понятен. 18 ноя 2019 в 12:50
  • Во вью не разбираюсь, но вот как экспортировать компоненты правильно: vuejs.org/v2/cookbook/…. Так что можно сказать что автор вашего плагина от себя ничего не добавил. Кроме, разве что, вызова install напрямую вместо window.Vue.use({install}) как это делают в документации.
    – sneas
    19 ноя 2019 в 6:43

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.