# gt-next: General Translation Next.js SDK: derive
URL: https://generaltranslation.com/es/docs/next/api/strings/derive.mdx
---
title: derive
description: Referencia de la API de la función derive() para cadenas
---

{/* GENERADO AUTOMÁTICAMENTE: No lo edites directamente. En su lugar, edita la plantilla en content/docs-templates/. */}


## Resumen

La función `derive` permite usar llamadas a funciones estáticas o expresiones de variables dentro de la traducción de una cadena.
Esto resulta útil para escribir código reutilizable, internacionalizar frases fragmentadas y mantener la concordancia gramatical.

```jsx
const getDisplayName = (condition) => {
  return condition ? "Brian" : 'Archie';
};

gt(`${derive(getDisplayName(condition))} says hello.`);
// Crea dos entradas de traducción:
// "Brian says hello." -> "Brian dice hola."
// "Archie says hello." -> "Archie dice hola."
```

Esto funciona generando traducciones diferentes para cada resultado posible, lo que permite conservar la concordancia, la conjugación y los cambios en el orden de las palabras entre idiomas.

<Callout>
  **Múltiples entradas de traducción:**
  `derive` crea entradas de traducción separadas para cada resultado posible de la función envuelta, lo que puede aumentar significativamente la cantidad de traducciones.
  Usa esta funcionalidad con criterio y prioriza las sentencias `select` de ICU cuando el factor de multiplicación sea excesivo.
</Callout>

<Callout>
  **Análisis estático:**
  `derive` solo puede analizar contenido conocido en tiempo de compilación.
  Cualquier contenido dinámico (variables, llamadas a la API, etc.) debe envolverse con `declareVar`.
</Callout>


## Referencia

### Parámetros

| Nombre    | Tipo                                                         | Descripción                                                           |
| --------- | ------------------------------------------------------------ | --------------------------------------------------------------------- |
| `content` | `T extends string \| boolean \| number \| null \| undefined` | Una llamada a una función estática que devuelve contenido traducible. |

### Devuelve

Devuelve `content` de tipo `T`.

***

## Comportamiento

### Análisis en tiempo de compilación

Durante el proceso de compilación, la herramienta CLI:

1. Analiza la función envuelta por `derive`
2. Determina todos los valores de retorno posibles de la función (deben poder analizarse estáticamente en tiempo de compilación)
3. Crea entradas de traducción separadas para cada resultado único

### Consideraciones de rendimiento

Al igual que `<Derive>`, `derive` multiplica las entradas de traducción.
Cada llamada a una función con varios resultados posibles crea traducciones separadas, y varias llamadas a `derive` en la misma cadena multiplican exponencialmente el número total de entradas.

***

## Ejemplo

### Contenido reutilizable

Puedes usar `derive` para manejar frases fragmentadas o contenido reutilizable con llamadas a funciones.

```jsx copy
import { derive, gt } from 'gt-next';

function getSubject() {
  return "boy";
}

function Component() {
  const translation1 = gt(`The ${derive(getSubject())} is playing.`);
  const translation2 = gt(`The ${derive(getSubject())} is having fun.`);
  const translation3 = gt(`The ${derive(getSubject())} is having a great time.`);
  return <p>{translation1} {translation2} {translation3}</p>;
}
```


### Frases fragmentadas

Puedes usar `derive` para manejar frases fragmentadas con llamadas a funciones.

```jsx copy
import { derive, gt } from 'gt-next';

function getSubject(gender) {
  return gender === 'male' ? 'boy' : 'girl';
}

function Component({ gender }) {
  const translation = gt(`The ${derive(getSubject(gender))} is playing.`);
  return <p>{translation}</p>;
}
```


### Concordancia

Sin `derive`, traducir la concordancia resulta sintácticamente engorroso.
Tienes que añadir una sentencia `select` para manejar la concordancia (pluralidad, género, etc.).
Luego, también debes enumerar cada resultado posible.

```jsx copy
import { gt } from 'gt-next';

function getSubject(gender) {
  return gender === 'male' ? 'boy' : 'girl';
}

function Component({ gender }) {
  const translation = gt(
    '{gender, select, boy {The boy is playing.} girl {The girl is playing.} other {}}',
    {
      gender: getSubject(gender) ,
    },
  );
  return <p>{translation}</p>;
}
```

Con `derive`, la concordancia se vuelve trivial.
No se requiere ninguna sentencia `select` ni tienes que especificar cada resultado.

```jsx copy
import { derive, declareVar, gt } from 'gt-next';

function getSubject(gender) {
  return gender === 'male' ? 'boy' : 'girl';
}

function Component({ gender }) {
  const translation = gt(`The ${derive(getSubject(gender))} is playing.`);
  return <p>{translation}</p>;
}
```

Al usar `derive`, la herramienta CLI detecta que `getSubject` tiene dos resultados posibles y crea una entrada de traducción para cada uno.
Así, la concordancia se resuelve automáticamente.

* &quot;The boy is playing&quot; -&gt; &quot;*El* niño está jugando&quot;
* &quot;The girl is playing&quot; -&gt; &quot;*La* niña está jugando&quot;


### Con variables

Puedes combinar `derive` con `declareVar` para manejar contenido dinámico.

```jsx copy
import { derive, declareVar, gt } from 'gt-next';

function getGreeting(name) {
  return name ? `Hello, ${declareVar(name)}` : 'Hello, stranger';
}

function Component({ name }) {
  const translation = gt(`${derive(getGreeting(name))}! How are you?`);
  return <p>{translation}</p>;
}
```


### Funciones complejas

Las funciones pueden contener múltiples ramas condicionales y varias instrucciones `return`.

```jsx copy
import { derive, gt } from 'gt-next';

function getStatusMessage(status, priority) {
  if (status === 'complete') {
    return priority === 'high' ? 'Urgent task completed' : 'Task completed';
  } else if (status === 'pending') {
    return priority === 'high' ? 'Urgent task pending' : 'Task pending';
  }
  return 'Task status unknown';
}

function Component({ status, priority }) {
  const message = gt(`${derive(getStatusMessage(status, priority))}.`);
  return <p>{message}</p>;
}
```


### Expresiones y lógica en línea

Puedes incrustar lógica directamente en la llamada a `derive`.

```jsx copy
import { derive, gt } from 'gt-next';

function Component({ gender }) {
  const message = gt(`The ${derive(gender === 'male' ? 'boy' : 'girl')} is playing.`);
  return <p>{message}</p>;
}
```

***


## Notas

* Usa `derive` con prudencia, ya que puede aumentar exponencialmente las entradas de traducción
* Todos los resultados posibles deben poder analizarse de forma estática en tiempo de compilación
* Las variables dentro de las funciones estáticas deben envolverse con `declareVar`

## Próximos pasos

* Consulta [`declareVar`](/docs/next/api/strings/declare-var) para marcar contenido dinámico dentro de funciones estáticas
* Consulta [`decodeVars`](/docs/next/api/strings/decode-vars) para extraer los valores originales de las variables declaradas
* Consulta [`<Derive>`](/docs/next/api/components/derive) para conocer el equivalente en JSX
* Lee las [notas de la versión](/devlog/gt-next_v6_12_0) para obtener más información