Как перевести данный код в обычный ES6?

253
20 июля 2017, 00:58

Начал работат с данной библиотекой Использую ES6. Наткнулся на такой компонент:

import * as React from 'react';
import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
import { DatePicker, DayOfWeek, IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker';
const DayPickerStrings: IDatePickerStrings = {
  months: [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'
  ],
  shortMonths: [
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'May',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
    'Dec'
  ],
  days: [
    'Sunday',
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday'
  ],
  shortDays: [
    'S',
    'M',
    'T',
    'W',
    'T',
    'F',
    'S'
  ],
  goToToday: 'Go to today',
  prevMonthAriaLabel: 'Go to previous month',
  nextMonthAriaLabel: 'Go to next month',
  prevYearAriaLabel: 'Go to previous year',
  nextYearAriaLabel: 'Go to next year'
};
export interface IDatePickerBasicExampleState {
  firstDayOfWeek?: DayOfWeek;
}
export class DatePickerBasicExample extends React.Component<any, IDatePickerBasicExampleState> {
  public constructor() {
    super();
    this.state = {
      firstDayOfWeek: DayOfWeek.Sunday
    };
  }
  public render() {
    let { firstDayOfWeek } = this.state;
    return (
      <div>
        <DatePicker firstDayOfWeek={ firstDayOfWeek } strings={ DayPickerStrings } placeholder='Select a date...' />
        <Dropdown
          label='Select the first day of the week'
          options={ [
            {
              text: 'Sunday',
              key: DayOfWeek[DayOfWeek.Sunday]
            },
            {
              text: 'Monday',
              key: DayOfWeek[DayOfWeek.Monday]
            },
            {
              text: 'Tuesday',
              key: DayOfWeek[DayOfWeek.Tuesday]
            },
            {
              text: 'Wednesday',
              key: DayOfWeek[DayOfWeek.Wednesday]
            },
            {
              text: 'Thursday',
              key: DayOfWeek[DayOfWeek.Thursday]
            },
            {
              text: 'Friday',
              key: DayOfWeek[DayOfWeek.Friday]
            },
            {
              text: 'Saturday',
              key: DayOfWeek[DayOfWeek.Saturday]
            }
          ] }
          selectedKey={ DayOfWeek[firstDayOfWeek] }
          onChanged={ this._onDropdownChanged.bind(this) }
        />
      </div>
    );
  }
  private _onDropdownChanged(option: IDropdownOption) {
    this.setState({
      firstDayOfWeek: DayOfWeek[option.key]
    });
  }
}

Увидел слова interface, private,public. Прогугглив, понял,что это-TypeScript. Попытался найти какой-нибудь трашпиллер, но в данном случае имеем не просто js, а react. Подскажите пожалуйста как это дело можно перевести в обычный es6?

Answer 1

Интерфейсы и модификаторы приватности в TypeScript просто декоративны, и проверяются только компилятором.

Для перевода данного кода в ES6 нужно просто убрать то, чего еще нет:

  1. interface
  2. private, public
  3. generic классы
  4. Типы переменных и параметров.

В итоге получится что-то вроде:

import * as React from 'react';
import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
import { DatePicker, DayOfWeek } from 'office-ui-fabric-react/lib/DatePicker';
const DayPickerStrings = {
  months: [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'
  ],
  shortMonths: [
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'May',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
    'Dec'
  ],
  days: [
    'Sunday',
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday'
  ],
  shortDays: [
    'S',
    'M',
    'T',
    'W',
    'T',
    'F',
    'S'
  ],
  goToToday: 'Go to today',
  prevMonthAriaLabel: 'Go to previous month',
  nextMonthAriaLabel: 'Go to next month',
  prevYearAriaLabel: 'Go to previous year',
  nextYearAriaLabel: 'Go to next year'
};
export class DatePickerBasicExample extends React.Component {
  constructor() {
    super();
    this.state = {
      firstDayOfWeek: DayOfWeek.Sunday
    };
  }
  render() {
    let { firstDayOfWeek } = this.state;
    return (
      <div>
        <DatePicker firstDayOfWeek={ firstDayOfWeek } strings={ DayPickerStrings } placeholder='Select a date...' />
        <Dropdown
          label='Select the first day of the week'
          options={ [
            {
              text: 'Sunday',
              key: DayOfWeek[DayOfWeek.Sunday]
            },
            {
              text: 'Monday',
              key: DayOfWeek[DayOfWeek.Monday]
            },
            {
              text: 'Tuesday',
              key: DayOfWeek[DayOfWeek.Tuesday]
            },
            {
              text: 'Wednesday',
              key: DayOfWeek[DayOfWeek.Wednesday]
            },
            {
              text: 'Thursday',
              key: DayOfWeek[DayOfWeek.Thursday]
            },
            {
              text: 'Friday',
              key: DayOfWeek[DayOfWeek.Friday]
            },
            {
              text: 'Saturday',
              key: DayOfWeek[DayOfWeek.Saturday]
            }
          ] }
          selectedKey={ DayOfWeek[firstDayOfWeek] }
          onChanged={ this._onDropdownChanged.bind(this) }
        />
      </div>
    );
  }
  _onDropdownChanged(option) {
    this.setState({
      firstDayOfWeek: DayOfWeek[option.key]
    });
  }
}
READ ALSO
Отправка данных с формы на почту JS

Отправка данных с формы на почту JS

Здравствуйте, у меня есть две формы

668
Как сделать сайт с движущимся и масштабируемым изображением?

Как сделать сайт с движущимся и масштабируемым изображением?

Хочу сделать сайт, на котором будет карта местности (изображение), которую можно будет двигать, нажимая и двигая мышку и увеличивать и уменьшать...

263
Можно ли методу alert присвоить id?

Можно ли методу alert присвоить id?

Можно ли методу alert присвоить id? Суть такая,нужно,чтобы перекидывало на другую страницу,только при условии,если данные были верно введеныНо...

340
распознать текст с картинки (php)

распознать текст с картинки (php)

здравствуйте, можете посоветовать готовый класс/функцию для распознавания текста с картинки?

557