fix: compile should generate a TS file (#1851)

packages/cli/src/api/__snapshots__/compile.test.ts.snap

@@ -10,7 +10,7 @@ exports[`createCompiledCatalog options.namespace should compile with global 1`]
 
 exports[`createCompiledCatalog options.namespace should compile with json 1`] = `{"messages":{"key":["Hello ",["name"]]}}`;
 
-exports[`createCompiledCatalog options.namespace should compile with ts 1`] = `/*eslint-disable*/export const messages=JSON.parse("{\\"key\\":[\\"Hello \\",[\\"name\\"]]}");`;
+exports[`createCompiledCatalog options.namespace should compile with ts 1`] = `/*eslint-disable*/import type{Messages}from"@lingui/core";export const messages:Messages=JSON.parse("{\\"key\\":[\\"Hello \\",[\\"name\\"]]}");`;
 
 exports[`createCompiledCatalog options.namespace should compile with window 1`] = `/*eslint-disable*/window.test={messages:JSON.parse("{\\"key\\":[\\"Hello \\",[\\"name\\"]]}")};`;
 

packages/cli/src/api/compile.ts

@@ -70,7 +70,29 @@ function buildExportStatement(
   expression: t.Expression,
   namespace: CompiledCatalogNamespace
 ) {
-  if (namespace === "es" || namespace === "ts") {
+  if (namespace === "ts") {
+    // import type { Messages } from "@lingui/core";
+    const importMessagesTypeDeclaration = t.importDeclaration(
+      [t.importSpecifier(t.identifier("Messages"), t.identifier("Messages"))],
+      t.stringLiteral("@lingui/core")
+    )
+    importMessagesTypeDeclaration.importKind = "type"
+
+    // Create the exported `messages` identifier with a `Messages` TS type annotation
+    const messagesIdentifier = t.identifier("messages")
+    messagesIdentifier.typeAnnotation = t.tsTypeAnnotation(
+      t.tsTypeReference(t.identifier("Messages"))
+    )
+
+    // export const messages:Messages = { message: "Translation" }
+    const exportDeclaration = t.exportNamedDeclaration(
+      t.variableDeclaration("const", [
+        t.variableDeclarator(messagesIdentifier, expression),
+      ])
+    )
+
+    return t.program([importMessagesTypeDeclaration, exportDeclaration])
+  } else if (namespace === "es") {
     // export const messages = { message: "Translation" }
     return t.exportNamedDeclaration(
       t.variableDeclaration("const", [

packages/cli/src/lingui-compile.ts

@@ -1,6 +1,5 @@
 import chalk from "chalk"
 import chokidar from "chokidar"
-import fs from "fs"
 import { program } from "commander"
 
 import { getConfig, LinguiConfigNormalized } from "@lingui/conf"
@@ -90,17 +89,6 @@ export async function command(
           namespace
         )
 
-        if (options.typescript) {
-          const typescriptPath = compiledPath.replace(/\.ts?$/, "") + ".d.ts"
-          fs.writeFileSync(
-            typescriptPath,
-            `import type { Messages } from '@lingui/core';
-          declare const messages: Messages;
-          export { messages };
-          `
-          )
-        }
-
         compiledPath = normalizeSlashes(
           nodepath.relative(config.rootDir, compiledPath)
         )

website/docs/ref/cli.md

@@ -21,6 +21,19 @@
     }
     ```
 
+:::tip
+If you use TypeScript, you can add `--typescript` flag to `compile` script to produce compiled message catalogs with TypeScript types.
+
+```json title="package.json"
+{
+  "scripts": {
+    "compile": "lingui compile --typescript"
+  }
+}
+```
+
+:::
+
 ## Global options
 
 ### `--config <config>`
@@ -58,7 +71,7 @@ lingui extract src/components
 
 Will extract only messages from `src/components/**/*` files, you can also pass multiple paths.
 
-It's useful if you want to run extract command on files that are staged, using for example `husky`, before commiting will extract messages from staged files:
+It's useful if you want to run extract command on files that are staged, using for example `husky`, before committing will extract messages from staged files:
 
 ```json title="package.json"
 {
@@ -125,6 +138,7 @@ lingui compile
     [--strict]
     [--format <format>]
     [--verbose]
+    [--typescript]
     [--namespace <namespace>]
     [--watch [--debounce <delay>]]
 ```
@@ -161,7 +175,7 @@ Specify namespace for compiled message catalogs (also see [`compileNamespace`](/
 
 #### `--typescript` {#compile-typescript}
 
-Is the same as using [`compileNamespace`](/docs/ref/conf.md#compilenamespace) with the value "ts". Generates a `{compiledFile}.d.ts` and the compiled file is generated using the extension .ts
+Is the same as using [`compileNamespace`](/docs/ref/conf.md#compilenamespace) with the value "ts". Generates a `{compiledFile}.ts` file and the exported object is typed using TS.
 
 #### `--watch` {#compile-watch}
 

website/docs/tutorials/react.md

@@ -253,6 +253,10 @@ Done!
 
 What just happened? If you look inside `locales/<locale>` directory, you'll see there's a new file for each locale: `messages.js`. This file contains compiled message catalog.
 
+:::tip
+If you use TypeScript, you can add `--typescript` flag to `compile` script to produce compiled message catalogs with TypeScript types.
+:::
+
 Let's load this file into our app and set active language to `cs`:
 
 ```jsx title="src/index.js" {6-7,10-14}

website/docs/tutorials/setup-react.md

@@ -65,6 +65,10 @@ This setup guide is for any project which uses React.
     }
     ```
 
+:::tip
+If you use TypeScript, you can add `--typescript` flag to `compile` script to produce compiled message catalogs with TypeScript types.
+:::
+
 5.  Check the installation by running:
 
     ```bash npm2yarn