Cannot pass "values" directly to <Trans /> component

I updated to version 3 (3.8.1) from version 2 (2.9.1). Had to make a few adaptions but nothing too serious. I like the new version 👍

Describe the bug The is one problem after upgrading that I need help with: I have been using the <Trans /> component from @lingui/macro heavily throughout the code, mostly like this:

<Trans
  id="some.message.id"
  values={{ /* values passed in directly */ }}
  comment="Variables: describing all the values passed in"  
>
    English placeholder text
</Trans>

Now, it seems that values is not part of the type definition of Trans anymore, even though the actual translation works perfectly fine when values is specified. Is that a bug in the type definition or am I using it wrong?

To Reproduce Steps to reproduce the behavior, possibly with minimal code sample, e.g:

import { Trans } from "@lingui/macro"

export default function App() {
  const values = { foo: "bar" }
   return (<Trans id="my.test.message" values={values} comment="Variables: foo (test string)">
      This should be translated and variables should be available!
   </Trans>);
}

message catalogue:

msgid "my.test.message"
msgstr "Translated message for foo: {foo}"

Expected behavior values can be supplied directly to Trans as a prop. Or a different strategy to achieve the same goal.

Alternatives I tried

I tried adding the values prop ty the type definition myself locally, but I cannot manage to make it work. Maybe I am doing it wrong?

import { TransProps } from "@lingui/macro";
import { ComponentType } from "react";

declare module "@lingui/macro" {
  /**
   * allow passing values to <Trans /> component directly
   */
  export const Trans: ComponentType<TransProps & { values: {} }>;
}

Additional context

• jsLingui version 3.8.1
• Babel version @babel/core@7.10.1
• Your Babel config (e.g. .babelrc) or framework you use (Create React App, Meteor, etc.)
  I am using create-react-app with @rescripts/cli in order to change some config without extracting

This is my lingui.config.js:

module.exports = {
  catalogs: [
    {
      path: "src/locales/{locale}/messages",
      include: ["src/"],
      exclude: ["**/node_modules/**"],
    }
  ],
  locales: [
    "en",
    "de",
    "it",
    // ... some more
    "pseudo-LOCALE",
  ],
  format: "po",
  sourceLocale: "en",
  pseudoLocale: "pseudo-LOCALE",
  compileNamespace: "ts",
  fallbackLocales: {
    it: "en",
    // ... some more
  },
};

[semoal]

Ah damn, you’re right the type is wrong. https://github.com/lingui/js-lingui/blob/main/packages/macro/index.d.ts#L31

Let me fix this and I’ll release it in a few minutes

[whytspace]

What version of Typescript are you using mate?

3.9.3

4.2.3 is the latest now. I guess it’s about time that I upgrade. 😃

edit:

The problem was not actually caused by the typescript version. I used an interface instead of a type. Whilst usually almost the same, they differ in behaviour significantly in this case. (read more)

type ICustomObjectType = {
  foo: number;
  bar: number;
}

interface ICustomObjectInterface {
  foo: number;
  bar: number;
}

// WORKS!
const TestType() {
   const values: ICustomObjectType = { foo: 1, bar: 2 }
   return <Trans id="my.test.message" values={values} />;
}

// ERROR!
const TestInterface() {
   const values: ICustomObjectInterface = { foo: 1, bar: 2 }
   return <Trans id="my.test.message" values={values} />;
}