Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft: chore: es translation of easy awaited #349

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions _data/i18n.yml
Original file line number Diff line number Diff line change
Expand Up @@ -322,3 +322,61 @@ ja:
medium: "中級"
hard: "上級"
extreme: "エクストリーム"
es:
date:
format:
abbr_day_names: ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"]
abbr_month_names:
[
"Ene",
"Feb",
"Mar",
"Abr",
"May",
"Jun",
"Jul",
"Ago",
"Set",
"Oct",
"Nov",
"Dic",
]
day_names:
[
"Domingo",
"Lunes",
"Martes",
"Miércoles",
"Jueves",
"Viernes",
"Sábado",
]
month_names:
[
"Enero",
"Febrero",
"Marzo",
"Abril",
"Mayo",
"Junio",
"Julio",
"Agosto",
"Septiembre",
"Octubre",
"Noviembre",
"Diciembre",
]
morelink: "Seguir leyendo"
page-older: "Más antigua"
page-newer: "Más nueva"
archive: "Archivo del Blog"
archive-category: "Archivo de la categoría '%1'"
archive-tag: "Archivo del tag '%1'"
comments: "Comentarios"
challenge: "Desafío"
solution: "Solución"
warm: "Calentamiento"
easy: "Fácil"
medium: "Medio"
hard: "Difícil"
extreme: "Extremo"
2 changes: 2 additions & 0 deletions _data/navigation.yml
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,7 @@ main:
url: /zh/
- title: "日本語"
url: /ja/
- title: "Español"
url: /es
- title: "GitHub"
url: https://github.com/ghaiklor/type-challenges-solutions
72 changes: 72 additions & 0 deletions es/easy-awaited.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
---
id: 189
title: Awaited
lang: es
level: easy
tags: promise
---

## Desafío

Si tenemos un tipo el cual es un tipo encapsulador como `Promise`. ¿Cómo podemos
obtener un tipo que está dentro del tipo encapsulador? Por ejemplo, si tenemos
`Promise<ExampleType>` ¿cómo obtenemos `ExampleType`?

## Solución

Un desafío bastante interesante que requiere que conozcamos una de las
características subestimadas de TypeScript, en mi humilde opinión.

Pero, antes de explicar lo que quiero decir, analicemos el desafío. El autor
nos pide que extraigamos el tipo. ¿Qué es extraer en este contexto? Esto es
extraer el tipo interno de otro tipo.

Déjame explicarlo con un ejemplo. Si tienes un tipo `Promise<string>`,
extraer el tipo `Promise` dará como resultado el tipo `string`.
Al extraer, obtuvimos el tipo interno del tipo externo.

Ten en cuenta que también debes extraer el tipo de forma recursiva. Por ejemplo,
si tienes el tipo `Promise<Promise<string>>`, debes extraer el tipo `string`.

Ahora, el desafío. Comenzaré con el caso más simple. Si nuestro tipo `Awaited`
obtiene `Promise<string>`, debemos extraer el `string`, de lo contrario,
devolvemos el `T` en sí, porque no es un `Promesa`:

```ts
type Awaited<T> = T extends Promise<string> ? string : T;
```

Sin embargo, hay un problema. De esa manera, podemos solo encargarnos de
`strings` en `Promise`, sin embargo debemos poder manejar cualquier caso. ¿Cómo
lo logramos? ¿Cómo obtener podemos el tipo de `Promise` si no sabemos que es lo
que hay alli?

Para estas propuestas, TypeScript tiene inferencia de tipos en los tipos
condicionales. Puede decirle al compilador "hey, una vez sepas que tipo es este,
asignalo a mi parámetro, por favor". Puedes leer más sobre [inferencia de tipos en los tipos condicionales aquí](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html#type-inference-in-conditional-types).

Al conocer sobre la inferencia de tipo, podemos actualizar nuestra solución.
En vez de propbar `Promise<string>` en nuestro tipo condicional, podemos
remplazar `string` con `infer R`, porque no sabemos que tipo debe ir alli.
Lo único que sabemos es que es un `Promise<T>` con algún tipo dentro.

Una vez TypeScript descubre que tipo es el cual esta dentro de `Promise`,
lo asignara a nuestro parámetro tipo `R` y está disponible en la rama `true`.
Exactamente donde lo retornamos.

```ts
type Awaited<T> = T extends Promise<infer R> ? R : T;
```

Estamos casi listos, sin embargo del tipo `Promise<Promise<string>>`, obtenemos
el tipo `Promise<string>`. Es por esto que necesitamos repetir el mismo proceso
recursivamente, lo cual es logrado usando `Awaited` en si mismo.

```ts
type Awaited<T> = T extends Promise<infer R> ? Awaited<R> : T;
```

## Referencias

- [Tipos Condicionales](https://www.typescriptlang.org/docs/handbook/2/conditional-types.html)
- [Inferencia de Tipo en Tipos Condicionales](https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#inferring-within-conditional-types)
40 changes: 40 additions & 0 deletions es/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
---
title: Desafíos de Tipos
description: >-
Este proyecto tiene como objetivo ayudarte a comprender mejor cómo funciona
el sistema de tipos, escribir tus propias utilidades o simplemente divertirte
con los desafíos.
keywords: "type, challenges, solutions, typescript, javascript"
lang: es
comments: false
---

¿Qué son los Desafíos de Tipos?
[Desafíos de Tipos](https://github.com/type-challenges/type-challenges) es un
proyecto desarrollado y mantenido por Anthony Fu. El objetivo principal del
proyecto es recopilar y proporcionar desafíos interesantes para TypeScript.
Pero hay un matiz en estos desafíos. No puedes usar el entorno de ejecución
(runtime) para resolverlos. El único lugar donde necesitas escribir el "código"
es en el sistema de tipos. Por lo tanto, los Desafíos de Tipos son los desafíos
que deben resolverse únicamente utilizando el sistema de tipos de TypeScript.

Estos desafíos a veces se vuelven difíciles, especialmente si eres principiante
en tipos y TypeScript. Por eso, este sitio web ofrece un lugar donde puedes
encontrar soluciones para esos desafíos con una explicación de cómo se han
resuelto. Una vez que leas la explicación, podrás encontrar una lista compilada
de referencias útiles para profundizar más. En caso de que hayas resuelto el
desafío de alguna otra manera (no como en este sitio web), puedes dejarlo en los
comentarios.

Si tienes alguna pregunta, problema, etc., por favor
[abre un issue en el repositorio](https://github.com/ghaiklor/type-challenges-solutions/issues).

Ahora, te sugiero que comiences desde “Calentamiento” y vayas avanzando al
nivel “Extremo”, desafío por desafío. Primero, abre el enlace “Desafío” e
intenta resolverlo tú mismo. En caso de que no puedas, regresa aquí y abre la
“Solución”.

Sin más preámbulos, ¡tómate tu tiempo y disfruta de los desafíos!

{% assign challenges = site.pages | where: "lang", "en" %}
{% include challenges.html challenges = challenges %}