javascript - Cómo declarar opciones de complemento, usando typescript y react-chartjs-2

(Acabo de empezar a aprender TypeScript, así que apuesto a que esto es trivial para cualquiera que esté familiarizado con TypeScript)

Tengo un gráfico con el siguiente código (lo he abreviado por brevedad):

const pieOptions = {
  plugins: {
    datalabels: {
      display: true,
      color: "white",
      formatter: function (value, context) {
        return `${value}%`;
      },
      font: {
        size: "15",
        weight: "bold"
      }
    }
  }
};

export const HaveAdhdPie: React.FC<Props> = () => {
  return (
    <div>
      <Pie type="pie" data={data} options={pieOptions} />
    </div>
  );
};

Typescript marca la propiedad options como un error:

parte del mensaje de error:

 Types of property 'weight' are incompatible.
              Type 'string' is not assignable to type 'number | "normal" | "bold" | "bolder" | "lighter"'.

index.d.ts(26, 3): The expected type comes from property 'options' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Pie> & Readonly<ChartComponentProps> & Readonly<...>'

Entonces voy al archivo index.d.ts y encuentro dónde se definen los tipos de options.plugins:

    // NOTE: declare plugin options as interface instead of inline '{ [plugin: string]: any }'
    // to allow module augmentation in case some plugins want to strictly type their options.
    interface ChartPluginsOptions {
        [pluginId: string]: any;
    }

Esto es hasta donde llega mi comprensión y estoy atascado. No imagino que pueda cambiar el archivo type.d.ts y no entiendo a qué me dirigen los comentarios en el código anterior.

¿Alguien puede sugerir qué se requiere para que TypeScript acepte mi código?

Respuesta #1

No necesitas aumentar los tipos, es solo que necesitas nombrar el tipo para las opciones antes:

const pieOptions: chartjs.ChartOptions = { ... }

y/o decirle a TypeScript que ese peso en negrita es una constante, para que pueda asignarse al tipo number | "normal" | "bold" | "bolder" | "lighter":

weight: "bold" as const,