feat(macro): make select macro choices strictly typed

Author: MikaelSiidorow

packages/core/macro/__typetests__/index.test-d.tsx

@@ -266,7 +266,9 @@ expectType<string>(
 //// Select
 ///////////////////
 
-const gender = "male"
+type Gender = "male" | "female"
+const gender = "male" as Gender // make the type less specific on purpose
+
 expectType<string>(
   select(gender, {
     // todo: here is inconsistency between jsx macro and js.
@@ -280,6 +282,36 @@ expectType<string>(
   })
 )
 
+expectType<string>(
+  // @ts-expect-error: missing required property and other is not supplied
+  select(gender, {
+    male: "he",
+  })
+)
+
+expectType<string>(
+  // missing required property is okay, if other is supplied as fallback
+  select(gender, {
+    male: "he",
+    other: "they",
+  })
+)
+
+expectType<string>(
+  select(gender, {
+    // @ts-expect-error extra properties are not allowed
+    incorrect: "",
+  })
+)
+
+expectType<string>(
+  select(gender, {
+    // @ts-expect-error extra properties are not allowed even with other fallback
+    incorrect: "",
+    other: "they",
+  })
+)
+
 expectType<string>(
   // @ts-expect-error value could be strings only
   select(5, {

packages/core/macro/index.d.ts

@@ -154,12 +154,21 @@ export function selectOrdinal(
   options: ChoiceOptions
 ): string
 
-type SelectOptions = {
+type SelectOptionsExhaustive<T extends string = string> = {
+  [key in T]: string
+}
+
+type SelectOptionsNonExhaustive<T extends string = string> = {
   /** Catch-all option */
   other: string
-  [matches: string]: string
+} & {
+  [key in T]?: string
 }
 
+type SelectOptions<T extends string = string> =
+  | SelectOptionsExhaustive<T>
+  | SelectOptionsNonExhaustive<T>
+
 /**
  * Selects a translation based on a value
  *
@@ -180,9 +189,9 @@ type SelectOptions = {
  * @param value The key of choices to use
  * @param choices
  */
-export function select(
-  value: string | LabeledExpression<string>,
-  choices: SelectOptions
+export function select<T extends string = string>(
+  value: T | LabeledExpression<T>,
+  choices: SelectOptions<T>
 ): string
 
 /**

packages/react/macro/__typetests__/index.test-d.tsx

@@ -11,7 +11,8 @@ import {
 import React from "react"
 import { ph } from "@lingui/core/macro"
 
-const gender = "male"
+type Gender = "male" | "female"
+const gender = "male" as Gender
 const user = {
   name: "John",
 }
@@ -126,8 +127,20 @@ m = (
 // @ts-expect-error: `value` could be string only
 m = <Select value={5} other={"string"} />
 
-// @ts-expect-error: `other` required
-m = <Select value={"male"} />
+// @ts-expect-error: `other` required unless exhaustive
+m = <Select value={gender} />
+
+// @ts-expect-error: `other` required unless exhaustive
+m = <Select value={gender} _male="..." />
+
+// @ts-expect-error: `other` required unless exhaustive
+m = <Select value={gender} _female="..." />
+
+// non-exhaustive okay if other is defined
+m = <Select value={gender} _female="..." other="..." />
+
+// exhaustive okay without other
+m = <Select value={gender} _male="..." _female="..." />
 
 // @ts-expect-error: `value` required
 m = <Select other={"male"} />

packages/react/macro/index.d.ts

@@ -32,12 +32,25 @@ type PluralChoiceProps = {
   [digit: `_${number}`]: ReactNode
 } & CommonProps
 
-type SelectChoiceProps = {
-  value: string | LabeledExpression<string | number>
+type SelectChoiceOptionsExhaustive<T extends string = string> = {
+  [key in T as `_${key}`]: ReactNode
+}
+
+type SelectChoiceOptionsNonExhaustive<T extends string = string> = {
   /** Catch-all option */
   other: ReactNode
-  [option: `_${string}`]: ReactNode
-} & CommonProps
+} & {
+  [key in T as `_${key}`]?: ReactNode
+}
+
+type SelectChoiceOptions<T extends string = string> =
+  | SelectChoiceOptionsExhaustive<T>
+  | SelectChoiceOptionsNonExhaustive<T>
+
+type SelectChoiceProps<T extends string = string> = {
+  value: T | LabeledExpression<T>
+} & SelectChoiceOptions<T> &
+  CommonProps
 
 /**
  * Trans is the basic macro for static messages,
@@ -105,7 +118,9 @@ export const SelectOrdinal: VFC<PluralChoiceProps>
  * />
  * ```
  */
-export const Select: VFC<SelectChoiceProps>
+export const Select: {
+  <T extends string = string>(props: SelectChoiceProps<T>): React.JSX.Element
+}
 
 declare function _t(descriptor: MacroMessageDescriptor): string
 declare function _t(