Как написать правильный частный метод в классе JavaScript с помощью Babel?

Я делал учебник по GraphQL с сервера Apollo. Сейчас пытаюсь добавить батчинг из этой части - https://www.apollographql.com/docs/apollo-server/features/data-sources/#batching

Я знаю, что могу использовать private в TypeScript. Но не уверен, как использовать в JS.

Насколько я искал, я установил два плагина Babel, class-properties и private-methods.

// .babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ],
  "plugins": [
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ["@babel/plugin-proposal-private-methods", { "loose": true }],
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-async-generator-functions"
  ]
}

Вот код:

// datasource.js

import DataLoader from 'dataloader';

class PostAPI extends DataSource {
  constructor({ knex }) {
    super();
    this.knex = knex;
  }

  initialize(config) {
    this.context = config.context;
  }

  // ERROR HERE!
  #postLoader = new DataLoader(ids =>
    this.knex('posts')
      .whereIn('id', ids)
      .select()
      .then(rows => ids.map(id => rows.find(x => x.id === id)))
  );

  async findAll() {
    const posts = await this.knex('posts').select();

    if (!posts.length) return [];
    console.info(posts);
    return posts;
  }

  async findOne({ id: idArg } = {}) {
    /*
    const post = await this.knex('posts')
      .where('id', idArg)
      .first();
    */

    const post = await this.postLoader.load(idArg);

    if (!post) return;
    return post;
  }
}

И это дает ошибку, когда я запрашиваю один пост (findOne):

{
  "errors": [
    {
      "message": "Cannot read property 'load' of undefined",
    }
  ]
}

Кроме того, eslint предупреждает, что # — это «недопустимый символ».

Вот мой .eslintrc:

// .eslintrc.json

{
  "root": true,
  "parser": "babel-eslint",
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 2018,
    "allowImportExportEverywhere": false,
    "ecmaFeatures": {
      "globalReturn": false
    }
  },
  "plugins": ["babel"],
  "extends": ["eslint:recommended", "prettier"],
  "env": {
    "browser": true,
    "node": true,
    "es6": true,
    "jest": true
  },
  "rules": {},
  "globals": {}
}

Пожалуйста помоги.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
1 396
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

# является частью названия поля. Поэтому вам нужно использовать # везде, где вы его используете:

const post = await this.#postLoader.load(idArg);
// ---------------------^

Вот простой пример использования частного поля (а также частного метода):

class Example {
    #foo = 42;

    publicMethod() {
        console.info("From publicMethod:", this.#foo);
        this.#privateMethod();
    }

    #privateMethod() {
        console.info("From #privateMethod:", this.#foo);
    }
}

const e = new Example();
console.info(e.publicMethod());

В прямом эфире на REPL Babel.


Also, eslint warns that # is 'Invalid character'.

Частные поля — это всего лишь предложение Этапа 3, еще не стандартизированное. У ESLint, похоже, нет возможности их поддерживать.

Другие вопросы по теме