From 65ebafff9b64f7195e8aa089a4acc4c8cf0c0518 Mon Sep 17 00:00:00 2001 From: s0alken Date: Wed, 23 Aug 2023 14:47:30 -0400 Subject: [PATCH 01/30] Adding translation to Using Typescript --- src/content/learn/typescript.md | 170 ++++++++++++++++---------------- 1 file changed, 85 insertions(+), 85 deletions(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 5695b755f..5cf82425f 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -1,57 +1,57 @@ --- -title: Using TypeScript +title: Usar TypeScript re: https://github.com/reactjs/react.dev/issues/5960 --- -TypeScript is a popular way to add type definitions to JavaScript codebases. Out of the box, TypeScript [supports JSX](/learn/writing-markup-with-jsx) and you can get full React Web support by adding [`@types/react`](https://www.npmjs.com/package/@types/react) and [`@types/react-dom`](https://www.npmjs.com/package/@types/react-dom) to your project. +TypeScript es una opción popular para incorporar definiciones de tipos en bases de código de JavaScript. De manera nativa, TypeScript [es compatible con JSX](/learn/writing-markup-with-jsx) y puedes obtener soporte completo para React en la web al añadir [`@types/react`](https://www.npmjs.com/package/@types/react) y [`@types/react-dom`](https://www.npmjs.com/package/@types/react-dom) a tu proyecto. -* [TypeScript with React Components](/learn/typescript#typescript-with-react-components) -* [Examples of typing with hooks](/learn/typescript#example-hooks) -* [Common types from `@types/react`](/learn/typescript/#useful-types) -* [Further learning locations](/learn/typescript/#further-learning) +* [TypeScript con Componentes de React](/learn/typescript#typescript-with-react-components) +* [Ejemplos de tipado con hooks](/learn/typescript#example-hooks) +* [Tipos comunes de `@types/react`](/learn/typescript/#useful-types) +* [Recursos adicionales para aprender](/learn/typescript/#further-learning) -## Installation {/*installation*/} +## Instalación {/*installation*/} -All [production-grade React frameworks](https://react-dev-git-fork-orta-typescriptpage-fbopensource.vercel.app/learn/start-a-new-react-project#production-grade-react-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation: +Cada [framework de React orientado a producción](https://react-dev-git-fork-orta-typescriptpage-fbopensource.vercel.app/learn/start-a-new-react-project#production-grade-react-frameworks) brinda compatibilidad para el uso de TypeScript. Consulta la guía específica de tu framework para su instalación: - [Next.js](https://nextjs.org/docs/pages/building-your-application/configuring/typescript) - [Remix](https://remix.run/docs/en/1.19.2/guides/typescript) - [Gatsby](https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/) - [Expo](https://docs.expo.dev/guides/typescript/) -### Adding TypeScript to an existing React project {/*adding-typescript-to-an-existing-react-project*/} +### Agregar TypeScript a un proyecto de React ya existente {/*adding-typescript-to-an-existing-react-project*/} -To install the latest version of React's type definitions: +Para instalar las definiciones de tipos más recientes de React: npm install @types/react @types/react-dom -The following compiler options need to be set in your `tsconfig.json`: +En tu archivo `tsconfig.json`, debes configurar las siguientes opciones del compilador: -1. `dom` must be included in [`lib`](https://www.typescriptlang.org/tsconfig/#lib) (Note: If no `lib` option is specified, `dom` is included by default). -1. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) must be set to one of the valid options. `preserve` should suffice for most applications. - If you're publishing a library, consult the [`jsx` documentation](https://www.typescriptlang.org/tsconfig/#jsx) on what value to choose. +1. Incluye `dom` en [`lib`](https://www.typescriptlang.org/tsconfig/#lib) (Nota: Si no se especifica ninguna opción `lib`, `dom` se incluye de manera predeterminada). +1. Establece [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) en una de las opciones válidas. Para la mayoría de aplicaciones, `preserve` debería ser suficiente. + Si estás publicando una biblioteca, consulta la [documentación de `jsx`](https://www.typescriptlang.org/tsconfig/#jsx) para elegir el valor adecuado. -## TypeScript with React Components {/*typescript-with-react-components*/} +## TypeScript con Componentes de React {/*typescript-with-react-components*/} -Every file containing JSX must use the `.tsx` file extension. This is a TypeScript-specific extension that tells TypeScript that this file contains JSX. +Cada archivo que contenga JSX debe usar la extensión de archivo `.tsx`. Esta es una extensión específica de TypeScript que indica a TypeScript que este archivo contiene JSX. -Writing TypeScript with React is very similar to writing JavaScript with React. The key difference when working with a component is that you can provide types for your component's props. These types can be used for correctness checking and providing inline documentation in editors. +Escribir TypeScript con React se asemeja mucho a escribir JavaScript con React. La diferencia principal radica en que al trabajar con un componente puedes definir tipos para sus props. Esos tipos se utilizan para realizar verificaciones de corrección y brindar documentación inline en los editores. -Taking the [`MyButton` component](/learn#components) from the [Quick Start](/learn) guide, we can add a type describing the `title` for the button: +Si tomamos el [componente `MyButton`](/learn#components) de la guía de [Inicio Rápido](/learn), podemos agregar un tipo que describa el `title` del botón: @@ -65,8 +65,8 @@ function MyButton({ title }: { title: string }) { export default function MyApp() { return (
-

Welcome to my app

- +

Bienvenido a mi aplicación

+
); } @@ -80,19 +80,19 @@ export default App = AppTSX; -These sandboxes can handle TypeScript code, but they do not run the type-checker. This means you can amend the TypeScript sandboxes to learn, but you won't get any type errors or warnings. To get type-checking, you can use the [TypeScript Playground](https://www.typescriptlang.org/play) or use a more fully-featured online sandbox. +Si bien estos entornos de prueba pueden manejar código TypeScript, no ejecutan la verificación de tipos. Esto significa que puedes ajustar los entornos de prueba de TypeScript para aprender, pero no recibirás errores o advertencias de tipo. Si deseas la verificación de tipos, puedes utilizar el [TypeScript Playground](https://www.typescriptlang.org/play) o recurrir a un entorno de pruebas en línea más completo. -This inline syntax is the simplest way to provide types for a component, though once you start to have a few fields to describe it can become unwieldy. Instead, you can use an `interface` or `type` to describe the component's props: +Esta sintaxis inline es la forma más sencilla de definir tipos para un componente, aunque a medida que empieces a tener varios campos que describir, puede volverse incómodo. En cambio, puedes usar una `interface` o `type` para describir las props del componente: ```tsx App.tsx active interface MyButtonProps { - /** The text to display inside the button */ + /** El texto que se mostrará dentro del botón */ title: string; - /** Whether the button can be interacted with */ + /** Si el botón es interactivo */ disabled: boolean; } @@ -105,8 +105,8 @@ function MyButton({ title, disabled }: MyButtonProps) { export default function MyApp() { return (
-

Welcome to my app

- +

Bienvenido a mi aplicación

+
); } @@ -119,32 +119,32 @@ export default App = AppTSX; -The type describing your component's props can be as simple or as complex as you need, though they should be an object type described with either a `type` or `interface`. You can learn about how TypeScript describes objects in [Object Types](https://www.typescriptlang.org/docs/handbook/2/objects.html) but you may also be interested in using [Union Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) to describe a prop that can be one of a few different types and the [Creating Types from Types](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html) guide for more advanced use cases. +El tipo que describe las props de tu componente puede ser tan simple o complejo como requieras, aunque debería ser un tipo de objeto descrito mediante una instrucción `type` o `interface`. Puedes aprender sobre cómo TypeScript describe objectos en [Object Types](https://www.typescriptlang.org/docs/handbook/2/objects.html) pero también podría interesarte el uso de [Union Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) para describir una prop que puede ser de varios tipos, y consultar la guía de [Creating Types from Types](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html) para casos de uso más avanzados. -## Example Hooks {/*example-hooks*/} +## Ejemplos de Hooks {/*example-hooks*/} -The type definitions from `@types/react` include types for the built-in hooks, so you can use them in your components without any additional setup. They are built to take into account the code you write in your component, so you will get [inferred types](https://www.typescriptlang.org/docs/handbook/type-inference.html) a lot of the time and ideally do not need to handle the minutiae of providing the types. +Las definiciones de tipos proporcionados por `@types/react` incluyen tipos para hooks nativos, lo que te permite usarlos en tus componentes sin necesidad de configuración adicional. Estos tipos están diseñados para tener en cuenta el código que escribes en tu componente, por lo que la mayoría de las veces obtendrás [tipos inferidos](https://www.typescriptlang.org/docs/handbook/type-inference.html) y, en teoría, no necesitarás ocuparte de proporcionar tipos. -However, we can look at a few examples of how to provide types for hooks. +No obstante, podemos explorar algunos ejemplos de cómo proporcionar tipos para los hooks. ### `useState` {/*typing-usestate*/} -The [`useState` hook](/reference/react/useState) will re-use the value passed in as the initial state to determine what the type of the value should be. For example: +El [hook `useState`](/reference/react/useState) reutilizará el valor proporcionado como estado inicial para determinar qué tipo debe tener el valor. Por ejemplo: ```ts -// Infer the type as "boolean" +// Infiere el tipo como "boolean" const [enabled, setEnabled] = useState(false); ``` -Will assign the type of `boolean` to `enabled`, and `setEnabled` will be a function accepting either a `boolean` argument, or a function that returns a `boolean`. If you want to explicitly provide a type for the state, you can do so by providing a type argument to the `useState` call: +Asignará el tipo `boolean` a `enabled`, y `setEnabled` será una function que aceptará un argumento `boolean` o una función que devolverá un valor `boolean`. Si deseas proporcionar explícitamente un tipo para el estado, puedes hacerlo proporcionando un argumento de tipo en la llamada a `useState`: ```ts -// Explicitly set the type to "boolean" +// Definiendo explícitamente el tipo como "boolean" const [enabled, setEnabled] = useState(false); ``` -This isn't very useful in this case, but a common case where you may want to provide a type is when you have a union type. For example, `status` here can be one of a few different strings: +Aunque no es muy útil en este caso, una situación común donde querrías proporcionar un tipo es cuando tienes un tipo de unión. Por ejemplo, aquí `status` podría ser uno de varios strings diferentes: ```ts type Status = "idle" | "loading" | "success" | "error"; @@ -152,7 +152,7 @@ type Status = "idle" | "loading" | "success" | "error"; const [status, setStatus] = useState("idle"); ``` -Or, as recommended in [Principles for structuring state](/learn/choosing-the-state-structure#principles-for-structuring-state), you can group related state as an object and describe the different possibilities via object types: +O bien, como se recomienda en [Principios para la estructuración del estado](/learn/choosing-the-state-structure#principles-for-structuring-state), puedes agrupar estados relacionados en un objeto y describir las diferentes posibilidades a través de objetos de tipo: ```ts type RequestState = @@ -166,7 +166,7 @@ const [requestState, setRequestState] = useState({ status: 'idle' ### `useReducer` {/*typing-usereducer*/} -The [`useReducer` hook](/reference/react/useReducer) is a more complex hook that takes a reducer function and an initial state. The types for the reducer function are inferred from the initial state. You can optionally provide a type argument to the `useReducer` call to provide a type for the state, but it is often better to set the type on the initial state instead: +El [hook `useReducer`](/reference/react/useReducer) es un hook más complejo que recibe una función reductora y un estado inicial. Los tipos para la función reductora se infieren a partir del estado inicial. Opcionalmente, puedes proporcionar un argumento de tipo a la llamada del `useReducer` para dar un tipo al estado, pero generalmente es mejor establecer el tipo en el estado inicial: @@ -202,11 +202,11 @@ export default function App() { return (
-

Welcome to my counter

+

Bienvenido a mi contador

-

Count: {state.count}

- - +

Contador: {state.count}

+ +
); } @@ -221,14 +221,14 @@ export default App = AppTSX; -We are using TypeScript in a few key places: +Usamos TypeScript en algunos lugares clave: - - `interface State` describes the shape of the reducer's state. - - `type CounterAction` describes the different actions which can be dispatched to the reducer. - - `const initialState: State` provides a type for the initial state, and also the type which is used by `useReducer` by default. - - `stateReducer(state: State, action: CounterAction): State` sets the types for the reducer function's arguments and return value. + - `interface State` describe la estructura del estado del reductor. + - `type CounterAction` describe las diferentes acciones que puedes ser despachadas al reductor. + - `const initialState: State` proporciona un tipo para el estado inicial, y también el tipo que `useReducer` utiliza por defecto. + - `stateReducer(state: State, action: CounterAction): State` define los tipos para los argumentos y el valor de devolución de la función reductora. -A more explicit alternative to setting the type on `initialState` is to provide a type argument to `useReducer`: +Una alternativa más explícita para definir el tipo en `initialState` es proporcionar un argumento de tipo a `useReducer`: ```ts import { stateReducer, State } from './your-reducer-implementation'; @@ -242,9 +242,9 @@ export default function App() { ### `useContext` {/*typing-usecontext*/} -The [`useContext` hook](/reference/react/useContext) is a technique for passing data down the component tree without having to pass props through components. It is used by creating a provider component and often by creating a hook to consume the value in a child component. +El [hook `useContext`](/reference/react/useContext) es una técnica para pasar datos por el árbol de componentes sin tener que pasar props a través de ellos. Se utiliza creando un componente provider y, a menudo, creando un hook que consuma el valor en un componente hijo. -The type of the value provided by the context is inferred from the value passed to the `createContext` call: +El tipo del valor proporcionado por el contexto se infiere a partir del valor pasado a la llamada de `createContext`: @@ -271,7 +271,7 @@ function MyComponent() { return (
-

Current theme: {theme}

+

Aspecto actual: {theme}

) } @@ -284,22 +284,22 @@ export default App = AppTSX; -This technique works when you have an default value which makes sense - but there are occasionally cases when you do not, and in those cases `null` can feel reasonable as a default value. However, to allow the type-system to understand your code, you need to explicitly set `ContextShape | null` on the `createContext`. +Esta técnica funciona cuando tienes un valor por defecto que hace sentido - pero ocasionalmente hay casos en los que no lo tienes, y en esos casos, `null` puede ser un valor por defecto razonable. Sin embargo, para permitir el sistema de tipos comprenda tu código, tienes que establecer de manera explícita `ContextShape | null` en la llamada a `createContext`. -This causes the issue that you need to eliminate the `| null` in the type for context consumers. Our recommendation is to have the hook do a runtime check for it's existence and throw an error when not present: +Esto genera el problema de que debes eliminar el `| null` en el tipo para los consumidores del context. Nuestra recomendación es que el hook realice una comprobación en tiempo de ejecución para asegurarse de su existencia y lance un error cuando no esté presente: ```js {5, 16-20} import { createContext, useContext, useState, useMemo } from 'react'; -// This is a simpler example, but you can imagine a more complex object here +// Este ejemplo es más sencillo, pero puedes imaginar un objeto más complejo aquí type ComplexObject = { kind: string }; -// The context is created with `| null` in the type, to accurately reflect the default value. +// El context se crea con `| null` en el tipo, para reflejar con exactitud el valor predeterminado. const Context = createContext(null); -// The `| null` will be removed via the check in the hook. +// El `| null` será eliminado mediante la verificación en el hook. const useGetComplexObject = () => { const object = useContext(Context); if (!object) { throw new Error("useGetComplexObject must be used within a Provider") } @@ -321,7 +321,7 @@ function MyComponent() { return (
-

Current object: {object.kind}

+

Objeto actual: {object.kind}

) } @@ -329,17 +329,17 @@ function MyComponent() { ### `useMemo` {/*typing-usememo*/} -The [`useMemo`](/reference/react/useMemo) hooks will create/re-access a memorized value from a function call, re-running the function only when dependencies passed as the 2nd parameter are changed. The result of calling the hook is inferred from the return value from the function in the first parameter. You can be more explicit by providing a type argument to the hook. +El hook [`useMemo`](/reference/react/useMemo) creará o reaccederá a un valor memorizado a partir de una llamada a una función, volviendo a ejecutar la función sólo cuando cambien las dependencias pasadas como segundo parámetro. El resultado de llamar al hook se infiere a partir del valor de devolución de la función en el primer parámetro. Puedes ser más explícito al proporcionar un argumento de tipo al hook. ```ts -// The type of visibleTodos is inferred from the return value of filterTodos +// El tipo de visibleTodos se infiere del valor de devolución de filterTodos const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]); ``` ### `useCallback` {/*typing-usecallback*/} -The [`useCallback`](/reference/react/useCallback) provide a stable reference to a function as long as the dependencies passed into the second parameter are the same. Like `useMemo`, the function's type is inferred from the return value of the function in the first parameter, and you can be more explicit by providing a type argument to the hook. +El [`useCallback`](/reference/react/useCallback) proporciona una referencia estable a una funcion siempre y cuando las dependencias pasadas como segundo parámetro sean las mismas. Al igual que con `useMemo`, el tipo de la función se infiere del valor de devolución de la función en el primer parámetro, y puedes ser más explícito al proporcionar un argumento de tipo al hook. ```ts @@ -348,9 +348,9 @@ const handleClick = useCallback(() => { }, [todos]); ``` -When working in TypeScript strict mode `useCallback` requires adding types for the parameters in your callback. This is because the type of the callback is inferred from the return value of the function, and without parameters the type cannot be fully understood. +Cuando trabajas en el modo estricto de TypeScript, `useCallback` necesita que agregues tipos para los parámetros en tu función callback. Esto se debe a que el tipo del callback se infiere a partir del valor de devolución de la función, y sin parámetros no se puede entender completamente el tipo. -Depending on your code-style preferences, you could use the `*EventHandler` functions from the React types to provide the type for the event handler at the same time as defining the callback: +Según tus preferencias de estilo de código, podrías utilizar las funciones `*EventHandler` de los tipos de React para proporcionar el tipo para el controlador de eventos al mismo tiempo que defines el callback: ```ts import { useState, useCallback } from 'react'; @@ -371,13 +371,13 @@ export default function Form() { } ``` -## Useful Types {/*useful-types*/} +## Tipos útiles {/*useful-types*/} -There is quite an expansive set of types which come from the `@types/react` package, it is worth a read when you feel comfortable with how React and TypeScript interact. You can find them [in React's folder in DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts). We will cover a few of the more common types here. +Dentro del paquete `@types/react` se encuentra un conjunto bastante amplio de tipos. Te sugerimos revisarlos cuando te sientas cómodo con la interacción entre React y TypeScript. Puedes encontrarlos [en la carpeta de React en DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts). A continuación, vamos a repasar algunos de los tipos más frecuentes. -### DOM Events {/*typing-dom-events*/} +### Eventos del DOM {/*typing-dom-events*/} -When working with DOM events in React, the type of the event can often be inferred from the event handler. However, when you want to extract a function to be passed to an event handler, you will need to explicitly set the type of the event. +Cuando trabajas con eventos del DOM en React, el tipo del evento suele inferirse a partir del controlador de eventos. Sin embargo, cuando desear extraer una función para ser pasada a un controlador de eventos, necesitarás establecer de manera explícita el tipo del evento. @@ -385,7 +385,7 @@ When working with DOM events in React, the type of the event can often be inferr import { useState } from 'react'; export default function Form() { - const [value, setValue] = useState("Change me"); + const [value, setValue] = useState("Cámbiame"); function handleChange(event: React.ChangeEvent) { setValue(event.currentTarget.value); @@ -394,7 +394,7 @@ export default function Form() { return ( <> -

Value: {value}

+

Valor: {value}

); } @@ -407,15 +407,15 @@ export default App = AppTSX; -There are many types of events provided in the React types - the full list can be found [here](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b580df54c0819ec9df62b0835a315dd48b8594a9/types/react/index.d.ts#L1247C1-L1373) which is based on the [most popular events from the DOM](https://developer.mozilla.org/en-US/docs/Web/Events). +Existen muchos tipos de eventos disponibles en los tipos de React - la lista completa se puede encontrar [aquí](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b580df54c0819ec9df62b0835a315dd48b8594a9/types/react/index.d.ts#L1247C1-L1373), la cual se basa en los [eventos más populares del DOM](https://developer.mozilla.org/en-US/docs/Web/Events). -When determining the type you are looking for you can first look at the hover information for the event handler you are using, which will show the type of the event. +Al determinar el tipo que estás buscando, puedes mirar primero la información emergente para el controlador de eventos que estás utilizando, lo cual mostrará el tipo del evento. -If you need to use an event that is not included in this list, you can use the `React.SyntheticEvent` type, which is the base type for all events. +Si necesitas utilizar un evento que no está incluido en esta lista, puedes emplear el tipo `React.SyntheticEvent`, que es el tipo base para todos los eventos. -### Children {/*typing-children*/} +### Elementos hijos {/*typing-children*/} -There are two common paths to describing the children of a component. The first is to use the `React.ReactNode` type, which is a union of all the possible types that can be passed as children in JSX: +Hay dos enfoques comunes para describir los elementos hijos de un componente. El primero es usar el tipo `React.ReactNode`, que es una unión de todos los tipos posibles que se pueden pasar como elementos hijos en JSX: ```ts interface ModalRendererProps { @@ -424,7 +424,7 @@ interface ModalRendererProps { } ``` -This is a very broad definition of children. The second is to use the `React.ReactElement` type, which is only JSX elements and not JavaScript primitives like strings or numbers: +Esta es una definición bastante amplia de children. La segunda opción es emplear el tipo `React.ReactElement`, que incluye solamente elementos JSX y no incluye primitivos de JavaScript como strings o números: ```ts interface ModalRendererProps { @@ -433,13 +433,13 @@ interface ModalRendererProps { } ``` -Note, that you cannot use TypeScript to describe that the children are a certain type of JSX elements, so you cannot use the type-system to describe a component which only accepts `
  • ` children. +Ten en cuenta que no puedes utilizar TypeScript para describir que los elementos hijos sean de un cierto tipo de elementos JSX, por lo que no puedes usar el sistema de tipos para describir un componente que solo acepta elementos `
  • ` como hijos. -You can see all an example of both `React.ReactNode` and `React.ReactElement` with the type-checker in [this TypeScript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA). +Puedes ver un ejemplo tanto de `React.ReactNode` como de `React.ReactElement` con el verificador de tipos en [este TypeScript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA). -### Style Props {/*typing-style-props*/} +### Props de estilo {/*typing-style-props*/} -When using inline styles in React, you can use `React.CSSProperties` to describe the object passed to the `style` prop. This type is a union of all the possible CSS properties, and is a good way to ensure you are passing valid CSS properties to the `style` prop, and to get auto-complete in your editor. +Cuando utilizas estilos en linea en React, puedes emplear `React.CSSProperties` para describir el objeto que se pasa a la prop `style`. Este tipo es una unión de todas las posibles propiedades CSS y es una forma efectiva de garantizar que estás proporcionando propiedades CSS válidas a la prop `style`, además de obtener autocompletado en tu editor. ```ts interface MyComponentProps { @@ -447,17 +447,17 @@ interface MyComponentProps { } ``` -## Further learning {/*further-learning*/} +## Recursos adicionales {/*further-learning*/} -This guide has covered the basics of using TypeScript with React, but there is a lot more to learn. -Individual API pages on the docs may contain more in-depth documentation on how to use them with TypeScript. +Esta guía ha abordado los fundamentos para usar TypeScript con React, pero hay mucho más por aprender. +Las páginas individuales de la API en la documentación pueden contener információn más detallada sobre cómo utilizarlas con TypeScript. -We recommend the following resources: +Recomendamos los siguientes recursos: - - [The TypeScript handbook](https://www.typescriptlang.org/docs/handbook/) is the official documentation for TypeScript, and covers most key language features. + - [The TypeScript handbook](https://www.typescriptlang.org/docs/handbook/) es la documentación oficial para TypeScript, y abarca la mayoría de las características clave del lenguaje. - - [The TypeScript release notes](https://devblogs.microsoft.com/typescript/) covers a each new features in-depth. + - [The TypeScript release notes](https://devblogs.microsoft.com/typescript/) cubre cada una de las nuevas característica en profundidad. - - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) is a community-maintained cheatsheet for using TypeScript with React, covering a lot of useful edge cases and providing more breadth than this document. + - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) es una hoja de referencia mantenida por la comunidad que trata sobre cómo utilizar TypeScript con React, abordando muchos casos útiles y proporcionando un enfoque más amplio que este documento. - - [TypeScript Community Discord](https://discord.com/invite/typescript) is a great place to ask questions and get help with TypeScript and React issues. \ No newline at end of file + - [TypeScript Community Discord](https://discord.com/invite/typescript) es excelente lugar para hacer preguntas y obtener ayuda con problemas de TypeScript y React. \ No newline at end of file From e3f4397d7e701808f46695d46eee6c7bfb7c3f67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Fri, 25 Aug 2023 00:17:39 -0300 Subject: [PATCH 02/30] Update src/content/learn/typescript.md --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 5cf82425f..c66500ad6 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -5,7 +5,7 @@ re: https://github.com/reactjs/react.dev/issues/5960 -TypeScript es una opción popular para incorporar definiciones de tipos en bases de código de JavaScript. De manera nativa, TypeScript [es compatible con JSX](/learn/writing-markup-with-jsx) y puedes obtener soporte completo para React en la web al añadir [`@types/react`](https://www.npmjs.com/package/@types/react) y [`@types/react-dom`](https://www.npmjs.com/package/@types/react-dom) a tu proyecto. +TypeScript es una forma popular de añadir definiciones de tipos a bases de código JavaScript. De manera predeterminada, TypeScript [soporta JSX](/learn/writing-markup-with-jsx) y puedes obtener soporte completo para React Web añadiendo [`@types/react`](https://www.npmjs.com/package/@types/react) y [`@types/react-dom`](https://www.npmjs.com/package/@types/react-dom) a tu proyecto. From d5a06ac34bc568c03ae0a05adf995819b61caaf9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Fri, 25 Aug 2023 00:18:37 -0300 Subject: [PATCH 03/30] Update src/content/learn/typescript.md --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index c66500ad6..c1202ec00 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -433,7 +433,7 @@ interface ModalRendererProps { } ``` -Ten en cuenta que no puedes utilizar TypeScript para describir que los elementos hijos sean de un cierto tipo de elementos JSX, por lo que no puedes usar el sistema de tipos para describir un componente que solo acepta elementos `
  • ` como hijos. +Ten en cuenta que no puedes usar TypeScript para describir que los hijos son un cierto tipo de elementos JSX, por lo que no puedes usar el sistema de tipos para describir un componente que sólo acepta hijos `
  • `. Puedes ver un ejemplo tanto de `React.ReactNode` como de `React.ReactElement` con el verificador de tipos en [este TypeScript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA). From 2fee8db09a44e968e3d6848590bd465f16bd9609 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Fri, 25 Aug 2023 00:18:49 -0300 Subject: [PATCH 04/30] Update src/content/learn/typescript.md --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index c1202ec00..63d0b529d 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -14,7 +14,7 @@ TypeScript es una forma popular de añadir definiciones de tipos a bases de cód * [TypeScript con Componentes de React](/learn/typescript#typescript-with-react-components) * [Ejemplos de tipado con hooks](/learn/typescript#example-hooks) * [Tipos comunes de `@types/react`](/learn/typescript/#useful-types) -* [Recursos adicionales para aprender](/learn/typescript/#further-learning) +* [Lugares de aprendizaje adicional](/learn/typescript/#further-learning) From ca98347099807fa8590a7fc04ed794241cc7a6c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Fri, 25 Aug 2023 00:19:02 -0300 Subject: [PATCH 05/30] Update src/content/learn/typescript.md --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 63d0b529d..4e053eb18 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -20,7 +20,7 @@ TypeScript es una forma popular de añadir definiciones de tipos a bases de cód ## Instalación {/*installation*/} -Cada [framework de React orientado a producción](https://react-dev-git-fork-orta-typescriptpage-fbopensource.vercel.app/learn/start-a-new-react-project#production-grade-react-frameworks) brinda compatibilidad para el uso de TypeScript. Consulta la guía específica de tu framework para su instalación: +Todos los [frameworks React de grado de producción](https://react-dev-git-fork-orta-typescriptpage-fbopensource.vercel.app/learn/start-a-new-react-project#production-grade-react-frameworks) ofrecen soporte para el uso de TypeScript. Sigue la guía específica del framework para la instalación: - [Next.js](https://nextjs.org/docs/pages/building-your-application/configuring/typescript) - [Remix](https://remix.run/docs/en/1.19.2/guides/typescript) From b4b41e630d31217394558d44bd892dcd3a67d3b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Fri, 25 Aug 2023 00:19:11 -0300 Subject: [PATCH 06/30] Update src/content/learn/typescript.md --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 4e053eb18..8dc530759 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -27,7 +27,7 @@ Todos los [frameworks React de grado de producción](https://react-dev-git-fork- - [Gatsby](https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/) - [Expo](https://docs.expo.dev/guides/typescript/) -### Agregar TypeScript a un proyecto de React ya existente {/*adding-typescript-to-an-existing-react-project*/} +### Añadir TypeScript a un proyecto React existente {/*adding-typescript-to-an-existing-react-project*/} Para instalar las definiciones de tipos más recientes de React: From c70090d0ca75b69d79725df3cb9ab1fed91ac5ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Fri, 25 Aug 2023 00:19:22 -0300 Subject: [PATCH 07/30] Update src/content/learn/typescript.md --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 8dc530759..30d084423 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -29,7 +29,7 @@ Todos los [frameworks React de grado de producción](https://react-dev-git-fork- ### Añadir TypeScript a un proyecto React existente {/*adding-typescript-to-an-existing-react-project*/} -Para instalar las definiciones de tipos más recientes de React: +Para instalar la última versión de las definiciones de tipos de React: npm install @types/react @types/react-dom From 2e21784031e841b09728a8f06192fd95599bcf88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Fri, 25 Aug 2023 00:19:32 -0300 Subject: [PATCH 08/30] Update src/content/learn/typescript.md --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 30d084423..71ca55dcd 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -350,7 +350,7 @@ const handleClick = useCallback(() => { Cuando trabajas en el modo estricto de TypeScript, `useCallback` necesita que agregues tipos para los parámetros en tu función callback. Esto se debe a que el tipo del callback se infiere a partir del valor de devolución de la función, y sin parámetros no se puede entender completamente el tipo. -Según tus preferencias de estilo de código, podrías utilizar las funciones `*EventHandler` de los tipos de React para proporcionar el tipo para el controlador de eventos al mismo tiempo que defines el callback: +Dependiendo de tus preferencias de estilo de código, podrías usar las funciones `*EventHandler` de los tipos de React para proporcionar el tipo para el controlador de eventos al mismo tiempo que defines el callback: ```ts import { useState, useCallback } from 'react'; From 316eb13327144a412b351931ef62763ca667b34a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Fri, 25 Aug 2023 00:19:44 -0300 Subject: [PATCH 09/30] Update src/content/learn/typescript.md --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 71ca55dcd..d0073290f 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -424,7 +424,7 @@ interface ModalRendererProps { } ``` -Esta es una definición bastante amplia de children. La segunda opción es emplear el tipo `React.ReactElement`, que incluye solamente elementos JSX y no incluye primitivos de JavaScript como strings o números: +Esta es una definición muy amplia de hijos. El segundo es utilizar el tipo `React.ReactElement`, que es sólo elementos JSX y no primitivas JavaScript como strings o numbers: ```ts interface ModalRendererProps { From 42865c684ed6e07f8cc7e1b730d2c71e64626efc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Fri, 25 Aug 2023 00:19:53 -0300 Subject: [PATCH 10/30] Update src/content/learn/typescript.md --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index d0073290f..3a35e0367 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -373,7 +373,7 @@ export default function Form() { ## Tipos útiles {/*useful-types*/} -Dentro del paquete `@types/react` se encuentra un conjunto bastante amplio de tipos. Te sugerimos revisarlos cuando te sientas cómodo con la interacción entre React y TypeScript. Puedes encontrarlos [en la carpeta de React en DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts). A continuación, vamos a repasar algunos de los tipos más frecuentes. +Hay un conjunto bastante amplio de tipos que provienen del paquete `@types/react`, vale la pena leerlo cuando te sientas cómodo con cómo interactúan React y TypeScript. Puedes encontrarlos [en la carpeta de React en DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts). Cubriremos algunos de los tipos más comunes aquí. ### Eventos del DOM {/*typing-dom-events*/} From 6a74c0a7b8dbc235effbd401b36652f06cb39299 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Fri, 25 Aug 2023 00:20:03 -0300 Subject: [PATCH 11/30] Update src/content/learn/typescript.md --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 3a35e0367..0a1f49444 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -415,7 +415,7 @@ Si necesitas utilizar un evento que no está incluido en esta lista, puedes empl ### Elementos hijos {/*typing-children*/} -Hay dos enfoques comunes para describir los elementos hijos de un componente. El primero es usar el tipo `React.ReactNode`, que es una unión de todos los tipos posibles que se pueden pasar como elementos hijos en JSX: +Hay dos caminos comunes para describir los hijos de un componente. El primero es utilizar el tipo `React.ReactNode`, que es una unión de todos los tipos posibles que se pueden pasar como hijos en JSX: ```ts interface ModalRendererProps { From 95c2f0eb878c7dc32bdce555e7ede2853dcae83f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Fri, 25 Aug 2023 00:20:31 -0300 Subject: [PATCH 12/30] Update src/content/learn/typescript.md --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 0a1f49444..84d74789a 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -35,7 +35,7 @@ Para instalar la última versión de las definiciones de tipos de React: npm install @types/react @types/react-dom -En tu archivo `tsconfig.json`, debes configurar las siguientes opciones del compilador: +Las siguientes opciones del compilador deben ser configuradas en tu `tsconfig.json`: 1. Incluye `dom` en [`lib`](https://www.typescriptlang.org/tsconfig/#lib) (Nota: Si no se especifica ninguna opción `lib`, `dom` se incluye de manera predeterminada). 1. Establece [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) en una de las opciones válidas. Para la mayoría de aplicaciones, `preserve` debería ser suficiente. From 638aaa8fa76ed199ea1286486daa4f97fef4cdf0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Fri, 25 Aug 2023 00:20:43 -0300 Subject: [PATCH 13/30] Update src/content/learn/typescript.md --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 84d74789a..7cdc992a1 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -37,7 +37,7 @@ npm install @types/react @types/react-dom Las siguientes opciones del compilador deben ser configuradas en tu `tsconfig.json`: -1. Incluye `dom` en [`lib`](https://www.typescriptlang.org/tsconfig/#lib) (Nota: Si no se especifica ninguna opción `lib`, `dom` se incluye de manera predeterminada). +1. `dom` debe incluirse en [`lib`](https://www.typescriptlang.org/tsconfig/#lib) (Nota: Si no se especifica la opción `lib`, `dom` se incluye por defecto). 1. Establece [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) en una de las opciones válidas. Para la mayoría de aplicaciones, `preserve` debería ser suficiente. Si estás publicando una biblioteca, consulta la [documentación de `jsx`](https://www.typescriptlang.org/tsconfig/#jsx) para elegir el valor adecuado. From 904ee0c09db4df3727115563690e3d1ee000c125 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Fri, 25 Aug 2023 00:21:01 -0300 Subject: [PATCH 14/30] Update src/content/learn/typescript.md --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 7cdc992a1..8062d7ab8 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -38,7 +38,7 @@ npm install @types/react @types/react-dom Las siguientes opciones del compilador deben ser configuradas en tu `tsconfig.json`: 1. `dom` debe incluirse en [`lib`](https://www.typescriptlang.org/tsconfig/#lib) (Nota: Si no se especifica la opción `lib`, `dom` se incluye por defecto). -1. Establece [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) en una de las opciones válidas. Para la mayoría de aplicaciones, `preserve` debería ser suficiente. +1. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) debe configurarse con una de las opciones válidas. `preserve` debería ser suficiente para la mayoría de las aplicaciones. Si estás publicando una biblioteca, consulta la [documentación de `jsx`](https://www.typescriptlang.org/tsconfig/#jsx) para elegir el valor adecuado. ## TypeScript con Componentes de React {/*typescript-with-react-components*/} From 0c4fa0fcc4e6bb0ae7925530b656f52b38af9085 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Fri, 25 Aug 2023 00:21:15 -0300 Subject: [PATCH 15/30] Update src/content/learn/typescript.md --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 8062d7ab8..a6ca2f817 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -39,7 +39,7 @@ Las siguientes opciones del compilador deben ser configuradas en tu `tsconfig.js 1. `dom` debe incluirse en [`lib`](https://www.typescriptlang.org/tsconfig/#lib) (Nota: Si no se especifica la opción `lib`, `dom` se incluye por defecto). 1. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) debe configurarse con una de las opciones válidas. `preserve` debería ser suficiente para la mayoría de las aplicaciones. - Si estás publicando una biblioteca, consulta la [documentación de `jsx`](https://www.typescriptlang.org/tsconfig/#jsx) para elegir el valor adecuado. + Si vas a publicar una biblioteca, consulta la [documentación `jsx`](https://www.typescriptlang.org/tsconfig/#jsx) para saber qué valor elegir. ## TypeScript con Componentes de React {/*typescript-with-react-components*/} From 2be6f5c6a3ba9d94ba3b16bde4633112cbb5fcd5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Fri, 25 Aug 2023 00:21:32 -0300 Subject: [PATCH 16/30] Update src/content/learn/typescript.md --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index a6ca2f817..9db79679a 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -49,7 +49,7 @@ Cada archivo que contenga JSX debe usar la extensión de archivo `.tsx`. Esta es -Escribir TypeScript con React se asemeja mucho a escribir JavaScript con React. La diferencia principal radica en que al trabajar con un componente puedes definir tipos para sus props. Esos tipos se utilizan para realizar verificaciones de corrección y brindar documentación inline en los editores. +Escribir TypeScript con React es muy similar a escribir JavaScript con React. La diferencia clave cuando se trabaja con un componente es que puedes proporcionar tipos para las props de tu componente. Estos tipos se pueden usar para comprobar la corrección y proporcionar documentación en línea en los editores. Si tomamos el [componente `MyButton`](/learn#components) de la guía de [Inicio Rápido](/learn), podemos agregar un tipo que describa el `title` del botón: From 1a1befe31c910b8d5e2e7f84091d576366956b7f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Fri, 25 Aug 2023 00:21:45 -0300 Subject: [PATCH 17/30] Update src/content/learn/typescript.md --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 9db79679a..65d3533fd 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -51,7 +51,7 @@ Cada archivo que contenga JSX debe usar la extensión de archivo `.tsx`. Esta es Escribir TypeScript con React es muy similar a escribir JavaScript con React. La diferencia clave cuando se trabaja con un componente es que puedes proporcionar tipos para las props de tu componente. Estos tipos se pueden usar para comprobar la corrección y proporcionar documentación en línea en los editores. -Si tomamos el [componente `MyButton`](/learn#components) de la guía de [Inicio Rápido](/learn), podemos agregar un tipo que describa el `title` del botón: +Tomando el [componente `MyButton`](/learn#components) de la guía [Inicio Rápido](/learn), podemos añadir un tipo que describa el `title` para el botón: From 746100e374791f2e98ce8c5a8ba12e455737447b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Fri, 25 Aug 2023 00:22:01 -0300 Subject: [PATCH 18/30] Update src/content/learn/typescript.md --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 65d3533fd..420d7eff1 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -80,7 +80,7 @@ export default App = AppTSX; -Si bien estos entornos de prueba pueden manejar código TypeScript, no ejecutan la verificación de tipos. Esto significa que puedes ajustar los entornos de prueba de TypeScript para aprender, pero no recibirás errores o advertencias de tipo. Si deseas la verificación de tipos, puedes utilizar el [TypeScript Playground](https://www.typescriptlang.org/play) o recurrir a un entorno de pruebas en línea más completo. +Estos entornos de pruebas pueden manejar código TypeScript, pero no ejecutan el comprobador de tipos. Esto significa que puedes modificar los entornos de pruebas de TypeScript para aprender, pero no obtendrás errores de tipo ni advertencias. Para obtener la comprobación de tipos, puedes usar el [TypeScript Playground](https://www.typescriptlang.org/play) o usar un entorno de pruebas en línea más completo. From c201a05e470bb0ad19df9b479ac76770c17b2666 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Fri, 25 Aug 2023 00:29:07 -0300 Subject: [PATCH 19/30] Update src/content/learn/typescript.md --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 420d7eff1..9b6fb2a7a 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -84,7 +84,7 @@ Estos entornos de pruebas pueden manejar código TypeScript, pero no ejecutan el -Esta sintaxis inline es la forma más sencilla de definir tipos para un componente, aunque a medida que empieces a tener varios campos que describir, puede volverse incómodo. En cambio, puedes usar una `interface` o `type` para describir las props del componente: +Esta sintaxis en línea es la forma más sencilla de proporcionar tipos para un componente, aunque una vez que empiezas a tener unos cuantos campos para describir puede llegar a ser inmanejable. En su lugar, puedes utilizar una `interface` o `type` para describir las props del componente: From ce8898195c971251604779810f9fcf07a9197245 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Fri, 25 Aug 2023 00:29:19 -0300 Subject: [PATCH 20/30] Update src/content/learn/typescript.md --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 9b6fb2a7a..611c67d7e 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -92,7 +92,7 @@ Esta sintaxis en línea es la forma más sencilla de proporcionar tipos para un interface MyButtonProps { /** El texto que se mostrará dentro del botón */ title: string; - /** Si el botón es interactivo */ + /** Si se puede interactuar con el botón */ disabled: boolean; } From e586088281495a1552d3fade92a1807b51a84dc3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Fri, 25 Aug 2023 00:30:02 -0300 Subject: [PATCH 21/30] Update src/content/learn/typescript.md --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 611c67d7e..b52c0ba59 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -119,7 +119,7 @@ export default App = AppTSX; -El tipo que describe las props de tu componente puede ser tan simple o complejo como requieras, aunque debería ser un tipo de objeto descrito mediante una instrucción `type` o `interface`. Puedes aprender sobre cómo TypeScript describe objectos en [Object Types](https://www.typescriptlang.org/docs/handbook/2/objects.html) pero también podría interesarte el uso de [Union Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) para describir una prop que puede ser de varios tipos, y consultar la guía de [Creating Types from Types](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html) para casos de uso más avanzados. +El tipo que describe las props de tu componente puede ser tan simple o tan complejo como necesites, aunque debería ser un tipo de objeto descrito con `type` o `interface`. Puedes aprender sobre cómo TypeScript describe objetos en [Object Types](https://www.typescriptlang.org/docs/handbook/2/objects.html) pero también puedes estar interesado en usar [Union Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) para describir una prop que puede ser uno de varios tipos diferentes y la guía [Creating Types from Types](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html) para casos de uso más avanzados. ## Ejemplos de Hooks {/*example-hooks*/} From fa69af02427f495f8a8d498ecafd6653d5dc8490 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Fri, 25 Aug 2023 00:30:15 -0300 Subject: [PATCH 22/30] Update src/content/learn/typescript.md --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index b52c0ba59..2a0c282ec 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -124,7 +124,7 @@ El tipo que describe las props de tu componente puede ser tan simple o tan compl ## Ejemplos de Hooks {/*example-hooks*/} -Las definiciones de tipos proporcionados por `@types/react` incluyen tipos para hooks nativos, lo que te permite usarlos en tus componentes sin necesidad de configuración adicional. Estos tipos están diseñados para tener en cuenta el código que escribes en tu componente, por lo que la mayoría de las veces obtendrás [tipos inferidos](https://www.typescriptlang.org/docs/handbook/type-inference.html) y, en teoría, no necesitarás ocuparte de proporcionar tipos. +Las definiciones de tipos de `@types/react` incluyen tipos para los hooks incorporados, por lo que puedes usarlos en tus componentes sin ninguna configuración adicional. Están construidos para tener en cuenta el código que escribes en tu componente, por lo que obtendrás [tipos inferidos](https://www.typescriptlang.org/docs/handbook/type-inference.html) la mayor parte del tiempo e idealmente no necesitarás manejar las minucias de proporcionar los tipos. No obstante, podemos explorar algunos ejemplos de cómo proporcionar tipos para los hooks. From 623d334ddf1e497bf2dd21777234eb38bfb64491 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Fri, 25 Aug 2023 00:30:27 -0300 Subject: [PATCH 23/30] Update src/content/learn/typescript.md --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 2a0c282ec..b1bbf5f00 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -126,7 +126,7 @@ El tipo que describe las props de tu componente puede ser tan simple o tan compl Las definiciones de tipos de `@types/react` incluyen tipos para los hooks incorporados, por lo que puedes usarlos en tus componentes sin ninguna configuración adicional. Están construidos para tener en cuenta el código que escribes en tu componente, por lo que obtendrás [tipos inferidos](https://www.typescriptlang.org/docs/handbook/type-inference.html) la mayor parte del tiempo e idealmente no necesitarás manejar las minucias de proporcionar los tipos. -No obstante, podemos explorar algunos ejemplos de cómo proporcionar tipos para los hooks. +Sin embargo, podemos ver algunos ejemplos de cómo proporcionar tipos para hooks. ### `useState` {/*typing-usestate*/} From c73627b0dc2cb842489a3d4128e1880e714f4ec5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Fri, 25 Aug 2023 00:30:38 -0300 Subject: [PATCH 24/30] Update src/content/learn/typescript.md --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index b1bbf5f00..8e5c59c6f 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -130,7 +130,7 @@ Sin embargo, podemos ver algunos ejemplos de cómo proporcionar tipos para hooks ### `useState` {/*typing-usestate*/} -El [hook `useState`](/reference/react/useState) reutilizará el valor proporcionado como estado inicial para determinar qué tipo debe tener el valor. Por ejemplo: +El [hook `useState`](/reference/react/useState) reutilizará el valor pasado como estado inicial para determinar cuál debe ser el tipo del valor. Por ejemplo: ```ts // Infiere el tipo como "boolean" From 8abc9c2891dcc0a12b29a74486494cb0ac608152 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Fri, 25 Aug 2023 00:30:50 -0300 Subject: [PATCH 25/30] Update src/content/learn/typescript.md --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 8e5c59c6f..10ae1328d 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -137,7 +137,7 @@ El [hook `useState`](/reference/react/useState) reutilizará el valor pasado com const [enabled, setEnabled] = useState(false); ``` -Asignará el tipo `boolean` a `enabled`, y `setEnabled` será una function que aceptará un argumento `boolean` o una función que devolverá un valor `boolean`. Si deseas proporcionar explícitamente un tipo para el estado, puedes hacerlo proporcionando un argumento de tipo en la llamada a `useState`: +Asignará el tipo `boolean` a `enabled`, y `setEnabled` será una función que acepte un argumento `boolean`, o una función que devuelva un `boolean`. Si quieres proporcionar explícitamente un tipo para el estado, puedes hacerlo proporcionando un argumento de tipo a la llamada `useState`: ```ts // Definiendo explícitamente el tipo como "boolean" From 04378b58137143726ba5a5bab2e94d1014961765 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Fri, 25 Aug 2023 00:31:06 -0300 Subject: [PATCH 26/30] Update src/content/learn/typescript.md --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 10ae1328d..4f87e0eeb 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -144,7 +144,7 @@ Asignará el tipo `boolean` a `enabled`, y `setEnabled` será una función que a const [enabled, setEnabled] = useState(false); ``` -Aunque no es muy útil en este caso, una situación común donde querrías proporcionar un tipo es cuando tienes un tipo de unión. Por ejemplo, aquí `status` podría ser uno de varios strings diferentes: +Esto no es muy útil en este caso, pero un caso común en el que es posible que desees proporcionar un tipo es cuando tienes un tipo de unión. Por ejemplo, `status` puede ser uno de varios strings diferentes: ```ts type Status = "idle" | "loading" | "success" | "error"; From 6a97e1fe8c0a2b8d7ef43dbdd5b805c022614997 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Fri, 25 Aug 2023 00:31:24 -0300 Subject: [PATCH 27/30] Update src/content/learn/typescript.md --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 4f87e0eeb..cb54bfd4b 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -329,7 +329,7 @@ function MyComponent() { ### `useMemo` {/*typing-usememo*/} -El hook [`useMemo`](/reference/react/useMemo) creará o reaccederá a un valor memorizado a partir de una llamada a una función, volviendo a ejecutar la función sólo cuando cambien las dependencias pasadas como segundo parámetro. El resultado de llamar al hook se infiere a partir del valor de devolución de la función en el primer parámetro. Puedes ser más explícito al proporcionar un argumento de tipo al hook. +Los hooks [`useMemo`](/reference/react/useMemo) crearán/reaccederán a un valor memorizado desde una llamada a una función, reejecutando la función sólo cuando las dependencias pasadas como segundo parámetro cambien. El resultado de llamar al hook se infiere del valor de devolución de la función en el primer parámetro. Se puede ser más explícito proporcionando un argumento de tipo al hook. ```ts // El tipo de visibleTodos se infiere del valor de devolución de filterTodos From d853d7951df9df19da35be0c610cc7d9f3965b8b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Fri, 25 Aug 2023 00:31:34 -0300 Subject: [PATCH 28/30] Update src/content/learn/typescript.md --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index cb54bfd4b..919ffc48b 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -242,7 +242,7 @@ export default function App() { ### `useContext` {/*typing-usecontext*/} -El [hook `useContext`](/reference/react/useContext) es una técnica para pasar datos por el árbol de componentes sin tener que pasar props a través de ellos. Se utiliza creando un componente provider y, a menudo, creando un hook que consuma el valor en un componente hijo. +El [hook `useContext`](/reference/react/useContext) es una técnica para pasar datos hacia abajo en el árbol de componentes sin tener que pasar props a través de los componentes. Se utiliza creando un componente proveedor y, a menudo, creando un hook para consumir el valor en un componente hijo. El tipo del valor proporcionado por el contexto se infiere a partir del valor pasado a la llamada de `createContext`: From 6c69e2512aaa004e9c8bd62531bcbd50b7e1b27c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Fri, 25 Aug 2023 00:31:46 -0300 Subject: [PATCH 29/30] Update src/content/learn/typescript.md --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 919ffc48b..be5d53366 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -284,7 +284,7 @@ export default App = AppTSX; -Esta técnica funciona cuando tienes un valor por defecto que hace sentido - pero ocasionalmente hay casos en los que no lo tienes, y en esos casos, `null` puede ser un valor por defecto razonable. Sin embargo, para permitir el sistema de tipos comprenda tu código, tienes que establecer de manera explícita `ContextShape | null` en la llamada a `createContext`. +Esta técnica funciona cuando tienes un valor por defecto que tiene sentido - pero hay casos ocasionales en los que no, y en esos casos `null` puede parecer razonable como valor por defecto. Sin embargo, para permitir que el sistema de tipos entienda tu código, necesitas establecer explícitamente `ContextShape | null` en el `createContext`. Esto genera el problema de que debes eliminar el `| null` en el tipo para los consumidores del context. Nuestra recomendación es que el hook realice una comprobación en tiempo de ejecución para asegurarse de su existencia y lance un error cuando no esté presente: From 96a47a1edb2b69be06dbe799d83ca3f9390537f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?N=C3=A9stor=20Guillermo=20Hern=C3=A1ndez?= Date: Fri, 25 Aug 2023 00:31:57 -0300 Subject: [PATCH 30/30] Update src/content/learn/typescript.md --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index be5d53366..53d7f1906 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -286,7 +286,7 @@ export default App = AppTSX; Esta técnica funciona cuando tienes un valor por defecto que tiene sentido - pero hay casos ocasionales en los que no, y en esos casos `null` puede parecer razonable como valor por defecto. Sin embargo, para permitir que el sistema de tipos entienda tu código, necesitas establecer explícitamente `ContextShape | null` en el `createContext`. -Esto genera el problema de que debes eliminar el `| null` en el tipo para los consumidores del context. Nuestra recomendación es que el hook realice una comprobación en tiempo de ejecución para asegurarse de su existencia y lance un error cuando no esté presente: +Esto causa el problema de que necesitas eliminar el `| null` en el tipo para los consumidores de contexto. Nuestra recomendación es que el hook compruebe su existencia en tiempo de ejecución y lance un error si no está presente: ```js {5, 16-20} import { createContext, useContext, useState, useMemo } from 'react';