diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 5695b755f..28ba49e94 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -5,53 +5,52 @@ 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 é uma maneira popular de adicionar definições de tipo a códigos JavaScript. Por padrão, o TypeScript [suporta JSX](/learn/writing-markup-with-jsx), e você pode obter suporte completo para o desenvolvimento web com React adicionando [`@types/react`](https://www.npmjs.com/package/@types/react) e [`@types/react-dom`](https://www.npmjs.com/package/@types/react-dom) ao seu projeto. -* [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 em Componentes React](/learn/typescript#typescript-with-react-components) +* [Exemplos de tipagem com hooks](/learn/typescript#example-hooks) +* [Tipos comuns de `@types/react`](/learn/typescript/#useful-types) +* [Outros locais para aprendizagem](/learn/typescript/#further-learning) -## Installation {/*installation*/} +## Instalação {/*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: +Todos os [frameworks React de produção] (https://react-dev-git-fork-orta-typescriptpage-fbopensource.vercel.app/learn/start-a-new-react-project#production-grade-react-frameworks) oferecem suporte ao uso de TypeScript. Siga o guia específico do framework para a instalação: - [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*/} +### Adicionando TypeScript a um projeto React existente {/*adding-typescript-to-an-existing-react-project*/} -To install the latest version of React's type definitions: +Para instalar a versão mais recente das definições de tipos do React: npm install @types/react @types/react-dom -The following compiler options need to be set in your `tsconfig.json`: +As seguintes opções devem ser configuradas no seu arquivp `tsconfig.json`: -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. `dom` deve ser adicionado em [`lib`](https://www.typescriptlang.org/tsconfig/#lib) (Observação: Se nenhuma opção `lib` for especificada, `dom` será adicionado por padrão). +1. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) deve ser definido como uma das opções válidas. Para a maioria das aplicações, `preserve` deve ser suficiente. + Se você estiver publicando uma biblioteca, consulte a [`jsx` documentation](https://www.typescriptlang.org/tsconfig/#jsx) para saber qual valor escolher. -## TypeScript with React Components {/*typescript-with-react-components*/} +## TypeScript com Componentes 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. +Todo arquivo contendo JSX deve usar a extensão `.tsx`. Esta é uma extensão específica do TypeScript que informa ao TypeScript que este arquivo contém 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. +Codificar TypeScript com React é muito semelhante a utilizar JavaScript com React. A principal diferença ao trabalhar com um componente é que você pode fornecer tipos para as propriedades do seu componente. Esses tipos podem ser usados para verificação de correção e fornecer documentação em linha nos editores. -Taking the [`MyButton` component](/learn#components) from the [Quick Start](/learn) guide, we can add a type describing the `title` for the button: +Usando o componente [`MyButton` component](/learn#components) do [Guia de Início Rápido](/learn), podemos adicionar um tipo que descreve o `title` para o botão: @@ -80,19 +79,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. +Essas áreas de teste podem lidar com código TypeScript, mas não executam a verificação de tipos. Isso significa que você pode modificar as áreas de teste do TypeScript para aprendizado, mas não receberá erros ou avisos de tipo. Para obter a verificação de tipos, você pode usar o [TypeScript Playground](https://www.typescriptlang.org/play) ou usar uma plataforma de teste online mais completa. -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 sintaxe em linha é a maneira mais simples de fornecer tipos para um componente, embora, à medida que você começa a ter várias propriedades para descrever, ela pode se tornar deselegante. Em vez disso, você pode usar uma `interface` or `type` para descrever as propriedades do componente: ```tsx App.tsx active interface MyButtonProps { - /** The text to display inside the button */ + /** Texto a ser exibido dentro do botão */ title: string; - /** Whether the button can be interacted with */ + /** Se o botão pode ter interação */ disabled: boolean; } @@ -119,32 +118,31 @@ 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. - +O tipo que descreve as propriedades do seu componente pode ser tão simples ou complexo quanto necessário, embora ele deva ser um tipo de objeto descrito como `type` ou `interface`. Você pode aprender sobre como o TypeScript descreve objetos em [Object Types](https://www.typescriptlang.org/docs/handbook/2/objects.html) mas também pode estar interessado em usar [Union Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) para descrever uma propriedade que pode ser de alguns tipos diferentes e o guia [Creating Types from Types](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html) para casos de uso mais avançados. -## Example Hooks {/*example-hooks*/} +## Exemplos 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. +As definições de tipo de `@types/react` incluem tipos para os hooks integrados, para que você possa usá-los em seus componentes sem configuração adicional. Eles são projetados para levar em consideração o código que você escreve em seu componente, portanto, você obterá [inferred types](https://www.typescriptlang.org/docs/handbook/type-inference.html) na maioria das vezes e, idealmente, não precisará lidar com os detalhes de fornecer os tipos. -However, we can look at a few examples of how to provide types for hooks. +No entanto, podemos dar uma olhada em alguns exemplos de como fornecer tipos para os 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: +O [hook `useState`](/reference/react/useState) reutilizará o valor passado como estado inicial para determinar qual deve ser o tipo do valor. Por exemplo: ```ts -// Infer the type as "boolean" +// Inferir o 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: +Atribuirá o tipo `boolean` to `enabled`, e `setEnabled` será uma função que aceita um argumento `boolean`, ou uma função que retorna um `boolean`. e você quiser fornecer explicitamente um tipo para o estado, pode fazê-lo fornecendo um argumento de tipo na chamada `useState`: ```ts -// Explicitly set the type to "boolean" +// Definir explicitamente o 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: +Isso não é muito útil neste caso, mas um caso comum em que você pode querer fornecer um tipo é quando você tem um tipo de união. Por exemplo, `status` aqui pode ser uma das várias strings diferentes: ```ts type Status = "idle" | "loading" | "success" | "error"; @@ -152,7 +150,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: +Ou, como recomendado em [Principles for structuring state](/learn/choosing-the-state-structure#principles-for-structuring-state), você pode agrupar estados relacionados em um objeto e descrever as diferentes possibilidades por meio de tipos de objetos: ```ts type RequestState = @@ -166,7 +164,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: +O [ hook `useReducer`](/reference/react/useReducer) é um hook mais complexo que recebe uma função de redução e um estado inicial. Os tipos para a função de redução são inferidos a partir do estado inicial. Você pode opcionalmente fornecer um argumento de tipo na chamada `useReducer` para fornecer um tipo para o estado, mas geralmente é melhor definir o tipo no estado inicial em vez disso: @@ -210,7 +208,6 @@ export default function App() { ); } - ``` ```js App.js hidden @@ -220,15 +217,14 @@ export default App = AppTSX; +Estamos usando TypeScript em alguns pontos específicos: -We are using TypeScript in a few key places: + - `interface State` descreve a forma do estado do redutor. + - `type CounterAction` descreve as diferentes ações que podem ser despachadas para o redutor. + - `const initialState: State` fornece um tipo para o estado inicial e também o tipo usado por `useReducer` por padrão. + - `stateReducer(state: State, action: CounterAction): State` define os tipos dos argumentos e do valor de retorno da função de redução. - - `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. - -A more explicit alternative to setting the type on `initialState` is to provide a type argument to `useReducer`: +Uma alternativa mais explícita para definir o tipo em `initialState` é fornecer um argumento de tipo para `useReducer`: ```ts import { stateReducer, State } from './your-reducer-implementation'; @@ -242,9 +238,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. +O [hook `useContext`](/reference/react/useContext) é uma técnica para passar dados pela árvore de componentes sem a necessidade de passar props pelos componentes. Isso é feito criando um componente provedor e frequentemente criando um hook para consumir o valor em um componente filho. -The type of the value provided by the context is inferred from the value passed to the `createContext` call: +O tipo do valor fornecido pelo contexto é inferido a partir do valor passado para a chamada de `createContext`: @@ -284,22 +280,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`. +Essa técnica funciona quando você tem um valor padrão que faz sentido - mas ocasionalmente existem casos em que isso não ocorre, e, nesses casos, `null` pode ser uma escolha razoável como valor padrão. No entanto, para permitir que o sistema de tipos entenda seu código, você precisa definir explicitamente `ContextShape | null` na chamada de `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: +Isso gera a questão de que você precisa eliminar o `| null` no tipo para consumidores de contexto. Nossa recomendação é que o hook faça uma verificação em tempo de execução para verificar sua existência e lançar um erro quando não estiver 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 é um exemplo mais simples, mas você pode imaginar um objeto mais complexo aqui type ComplexObject = { kind: string }; -// The context is created with `| null` in the type, to accurately reflect the default value. +// O contexto é criado com `| null` no tipo, para refletir com precisão o valor padrão. const Context = createContext(null); -// The `| null` will be removed via the check in the hook. +// O `| null` será removido por meio da verificação no hook. const useGetComplexObject = () => { const object = useContext(Context); if (!object) { throw new Error("useGetComplexObject must be used within a Provider") } @@ -329,17 +325,16 @@ 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. +O [hook `useMemo`](/reference/react/useMemo) irá criar/acessar um valor memorizado a partir de uma chamada de função, executando a função novamente apenas quando as dependências passadas como segundo parâmetro forem alteradas. O resultado da chamada do hook é inferido a partir do valor de retorno da função no primeiro parâmetro. Você pode ser mais explícito fornecendo um argumento de tipo para o hook. ```ts -// The type of visibleTodos is inferred from the return value of filterTodos +// O tipo de visibleTodos é inferido a partir do valor de retorno 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. +O [hook `useCallback`](/reference/react/useCallback) fornece uma referência estável a uma função, desde que as dependências passadas como segundo parâmetro sejam as mesmas. Assim como o `useMemo`, o tipo da função é inferido a partir do valor de retorno da função no primeiro parâmetro, e você pode ser mais explícito fornecendo um argumento de tipo para o hook. ```ts @@ -348,9 +343,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. +Ao trabalhar no modo estrito do TypeScript, o `useCallback` exige a adição de tipos para os parâmetros em seu retorno de chamada. Isso ocorre porque o tipo do retorno de chamada é inferido a partir do valor de retorno da função e, sem parâmetros, o tipo não pode ser completamente compreendido. -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: +Dependendo das preferências do seu estilo de código, você pode usar as funções `*EventHandler` dos tipos React para fornecer o tipo para o manipulador de eventos ao mesmo tempo em que define o retorno de chamada: ```ts import { useState, useCallback } from 'react'; @@ -371,13 +366,13 @@ export default function Form() { } ``` -## Useful Types {/*useful-types*/} +## Tipos Úteis {/*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. +Existe um conjunto bastante abrangente de tipos que vêm do pacote `@types/react`, vale a pena ler quando você se sentir confortável com a interação entre React e TypeScript. Você pode encontrá-los [na pasta React em DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts). Vamos cobrir alguns dos tipos mais comuns aqui. -### DOM Events {/*typing-dom-events*/} +### Eventos 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. +Ao trabalhar com eventos do DOM no React, o tipo do evento frequentemente pode ser inferido a partir do manipulador de eventos. No entanto, quando você deseja extrair uma função para ser passada a um manipulador de eventos, será necessário definir explicitamente o tipo do evento. @@ -407,15 +402,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). +Existem muitos tipos de eventos fornecidos nos tipos do React - a lista completa pode ser encontrada [aqui](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b580df54c0819ec9df62b0835a315dd48b8594a9/types/react/index.d.ts#L1247C1-L1373) com base nos [most popular events from the 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. +Ao determinar o tipo que você procura, você pode primeiro verificar as informações de sobreposição para o manipulador de eventos que está usando, o que mostrará o tipo do 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. +Se você precisar usar um evento que não está incluído nesta lista, pode usar o tipo `React.SyntheticEvent` que é o tipo base para todos os eventos. ### Children {/*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: +Existem duas maneiras comuns de descrever componentes filho. A primeira é usar o tipo `React.ReactNode` que é uma união de todos os tipos possíveis que podem ser passados como filhos em JSX: ```ts interface ModalRendererProps { @@ -424,7 +419,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: +Essa é uma definição muito ampla de filhos. A segunda opção é usar o tipo `React.ReactElement` que inclui apenas elementos JSX e não tipos primitivos do JavaScript, como strings ou números: ```ts interface ModalRendererProps { @@ -433,13 +428,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. +Observe que você não pode usar o TypeScript para descrever que os filhos são de um tipo específico de elementos JSX, portanto, não pode usar o sistema de tipos para descrever um componente que aceita apenas filhos `
  • `. -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). +Você pode ver um exemplo de ambos `React.ReactNode` and `React.ReactElement` com o verificador de tipos em [this 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*/} +### Propriedades 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. +Ao usar estilos embutidos no React, você pode usar `React.CSSProperties` para descrever o objeto passado para a propriedade `style`. Este tipo é uma união de todas as possíveis propriedades CSS e é uma boa maneira de garantir que você está passando propriedades CSS válidas para a propriedade `style` e obter auto-completar em seu editor. ```ts interface MyComponentProps { @@ -447,17 +442,17 @@ interface MyComponentProps { } ``` -## Further learning {/*further-learning*/} +## Aprendizado Adicional {/*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. +Este guia abordou o básico do uso do TypeScript com o React, mas há muito mais a aprender. +Páginas individuais de API na documentação podem conter documentação mais detalhada sobre como usá-las com o TypeScript. -We recommend the following resources: +Recomendamos os seguintes recursos: - - [The TypeScript handbook](https://www.typescriptlang.org/docs/handbook/) is the official documentation for TypeScript, and covers most key language features. + - [O Manual do TypeScript](https://www.typescriptlang.org/docs/handbook/) é a documentação oficial do TypeScript e abrange a maioria das principais características da linguagem. - - [The TypeScript release notes](https://devblogs.microsoft.com/typescript/) covers a each new features in-depth. + - [Notas de lançamento do TypeScript](https://devblogs.microsoft.com/typescript/) aborda cada nova funcionalidade em profundidade. - - [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/) é uma folha de dicas mantida pela comunidade para o uso do TypeScript com o React, abrangendo muitos casos úteis e fornecendo uma amplitude maior do 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 + - [Comunidade TypeScript no Discord](https://discord.com/invite/typescript) é um ótimo lugar para fazer perguntas e obter ajuda com problemas relacionados ao TypeScript e ao React. \ No newline at end of file