how to pluralize with andreasbm/lit-translate with intl-messageformat

Question

I'm using lit with typescript and lit-translate for my webcomponents' s internationalization. In the documentation we recommend to use intl-messageformat for pluralize.

But I can't make it works because of type errors.

Is anyone faced this issue ?

this is my component:

import {LitElement, html, PropertyValues} from 'lit';
import { extract, registerTranslateConfig, Strings, translate, use } from 'lit-translate';
import {customElement, property} from 'lit/decorators.js';
import { AvailableLanguagesEnum } from '../interfaces/languages';
import IntlMessageFormat from 'intl-messageformat';


/**
 * @class Test
 * @extends {LitElement}
 */
@customElement('test')
export class Test extends LitElement {
    @property({ type: Boolean })
    hasLoadedStrings: boolean = false;

    @property({ type: String })
    public override lang: string = "en";
    
    public override async connectedCallback (): Promise<void> {
        
        registerTranslateConfig({
            loader: async (): Promise<Strings> => {
                const lang = Object.values(AvailableLanguagesEnum).find(l => l === this.lang) ? this.lang : AvailableLanguagesEnum.EN;
                return fetch(`../../src/translations/${lang}.json`)
                .then(
                    async (res: Response): Promise<Strings> => {
                        return res.json();
                    },
                )
            },
            
            // Use the "intl-messageformat" library for formatting.
            interpolate: (text, values, config) => {
                const msg = new IntlMessageFormat(text, config.lang);
                return msg.format(extract(values));
            }
        });

        await use(this.lang);
        this.hasLoadedStrings = true;
        super.connectedCallback();
    }

    override shouldUpdate (changedProperties: PropertyValues): boolean {
        return this.hasLoadedStrings && super.shouldUpdate(changedProperties);
    }
    
    override render(){
        return html`
          <span class="vtmn-typo_title-5">${translate("userPointBalance.totalPoints", {points: 3})}</span>
        `;
    }
}

declare global {
  interface HTMLElementTagNameMap {
    'test': Test;
  }
}

here is my json:

{
    "commons": {
      "points": "points"
    },
    "userPointBalance": {
      "totalPoints": "you have {{points, plural, =0 {no points} =1 {1 point} other {# points}}"
    }
}

and the types error on interpolate hook:

Type '(text: string, values: Values | ValuesCallback | null, config: ITranslateConfig) => string | number | object | (string | number | object)[]' is not assignable to type 'InterpolateFunction'.
  Type 'string | number | object | (string | number | object)[]' is not assignable to type 'string'.
    Type 'number' is not assignable to type 'string'.ts(2322)
model.d.ts(28, 5): The expected type comes from property 'interpolate' which is declared here on type 'Partial<ITranslateConfig>'


Argument of type 'Values | null' is not assignable to parameter of type 'Record<string, object | PrimitiveType | FormatXMLElementFn<number | object, string | number | object | (string | number | object)[]>> | undefined'.
  Type 'null' is not assignable to type 'Record<string, object | PrimitiveType | FormatXMLElementFn<number | object, string | number | object | (string | number | object)[]>> | undefined'