How to import function from KeystoneJS package?

Question

JavaScript

Hello, I will be very grateful if you help me to solve the problem.

I am using KeystoneJS to create posts on my site. I figured out how to display these records from the backend on the React front, everything works. But I need to customize paragraph indents, font size and a couple of other things. The documentation says to use the " Override default renderers " package. This is exactly what I need.

But the problem is that when I try to import a function from this package, the compiler swears that such a function is not there. I do not understand TypeScript, and I think that I need to do something to import the "type" ts from the package I need .

// ошибка на строчке кода ниже. не может найти DocumentRendererProps, хотя он там есть
import { DocumentRenderer, DocumentRendererProps } from '@keystone-next/document-renderer';

  // мне не совсем понятная консутрукция с присваиванием ниже. я так понимаю это ts. как сделать это в js?
const renderers: DocumentRendererProps['renderers'] = {
  inline: {
    bold: ({ children }) => {
      return <strong>{children}</strong>;
    },
  },
  block: {
    paragraph: ({ children, textAlign }) => {
      return <p style={{ textAlign }}>{children}</p>;
    },
  },
};

<DocumentRenderer document={document} renderers={renderers} />;

Answer 1

In typescript, what comes after the colon is a description of the types. For js, it is not needed and, in principle, in his understanding, does not exist.
Remove it and everything will work:

import { DocumentRenderer } from '@keystone-next/document-renderer';

const renderers = {
  inline: {
    bold: ({ children }) => {
      return <strong>{children}</strong>;
    },
  },
  block: {
    paragraph: ({ children, textAlign }) => {
      return <p style={{ textAlign }}>{children}</p>;
    },
  },
};

<DocumentRenderer document={document} renderers={renderers} />;