Skip to content

Commit

Permalink
i18n(pt-BR): Update guides/typescript.mdx translation (#9223)
Browse files Browse the repository at this point in the history 
* i18n(pt-BR): Update `guides/typescript.mdx` translation

* i18n(pt-BR): Update `guides/typescript.mdx` translation according to PR feedback

---------

Co-authored-by: Yan <[email protected]>
  • Loading branch information
@viniciusdeliz @yanthomasdev
viniciusdeliz and yanthomasdev authored Aug 28, 2024
1 parent 70c85ce commit 82d86b6
Showing 1 changed file with 23 additions and 16 deletions.
39 changes: 23 additions & 16 deletions src/content/docs/pt-br/guides/typescript.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ O servidor de desenvolvimento do Astro não executará nenhuma checagem de tipos
## Configuração
Projetos iniciais do Astro incluem um arquivo `tsconfig.json` no seu projeto. Mesmo que você não escreva código TypeScript, esse arquivo é importante para que ferramentas como o Astro e o VS Code saibam como entender o seu projeto. Algumas funcionalidades (como importação de pacotes do npm) não são completamente suportadas em nosso editor sem um arquivo `tsconfig.json`. Se você instalar Astro manualmente, certifique-se de criar esse arquivo.

### Templates TypeScript

Três templates extensíveis de `tsconfig.json` são inclusos no Astro: `base`, `strict` e `strictest`. O template `base` habilita suporte para funcionalidades modernas do JavaScript e também é usado como uma base para os outros templates. Nós recomendamos usar `strict` (estrito) ou `strictest` (mais estrito) se você planeja escrever TypeScript em seu projeto. Você pode ver e comparar a configuração dos três templates em [astro/tsconfigs/](https://github.com/withastro/astro/blob/main/packages/astro/tsconfigs/).

Para herdar de um dos templates, utilize [a opção `extends`](https://www.typescriptlang.org/tsconfig#extends):
Expand All @@ -30,10 +32,15 @@ Para herdar de um dos templates, utilize [a opção `extends`](https://www.types
Adicionalmente, nossos templates incluem um arquivo `env.d.ts` dentro do diretório `src` para providenciar [tipos de cliente do Vite](https://vitejs.dev/guide/features.html#client-types) para seu projeto:

```typescript title="env.d.ts"
/// <reference types="astro/client" />
/// <reference path="../.astro/types.d.ts" />
```

Se você não está usando VSCode, você pode instalar o [plugin Astro TypeScript](https://www.npmjs.com/package/@astrojs/ts-plugin) para suportar a importação de arquivos `.astro` de arquivos `.ts` (que pode ser útil para reexportação).
### Plugin TypeScript para editores

O [plugin Astro TypeScript](https://www.npmjs.com/package/@astrojs/ts-plugin) pode ser instalado separadamente quando você não estiver utilizando a [extensão oficial Astro VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). Esse plugin é instalado automaticamente e configurado pela extensão VSCode, e você não precisa instalar os dois.

Esse plugin executa apenas no editor. Ao executar `tsc` no terminal, arquivos `.astro` são completamente ignorados. Em vez disso, você pode usar [o comando CLI `astro check`](/pt-br/reference/cli-reference/#astro-check) para conferir ambos arquivos `.astro` e `.ts`.
Esse plugin também suporta importar arquivos `.astro` de arquivos `.ts` (que podem ser úteis para re-exportar).

<PackageManagerTabs>
<Fragment slot="npm">
Expand Down Expand Up @@ -83,7 +90,7 @@ import type { AlgumTipo } from './script';

Dessa forma, você evita casos extremos onde o bundler do Astro pode tentar incorretamente fazer bundle do seus tipos importados como se fossem JavaScript.

Você pode configurar o TypeScript para reforçar importações de tipos no seu arquivo `.tsconfig`. Defina [`verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax) como `true`. O TypeScript verificará suas importações e informará quando `import type` deve ser usado. Esta configuração está habilitada por padrão em todas as nossas predefinições.
Você pode configurar o TypeScript para aplicar importações de tipos no seu arquivo `tsconfig.json`. Defina [`verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax) como `true`. O TypeScript verificará suas importações e informará quando `import type` deve ser usado. Esta configuração é habilitada por padrão em todas as nossas predefinições.

```json title="tsconfig.json" ins={3}
{
Expand All @@ -95,7 +102,7 @@ Você pode configurar o TypeScript para reforçar importações de tipos no seu

## Aliases de Importação

Astro suporta [aliases de importação](/pt-br/guides/imports/#aliases) que você define na configuração `paths` do seu `tsconfig.json` e `jsconfig.json`. [Leia nosso guia](/pt-br/guides/imports/#aliases) para aprender mais.
Astro suporta [aliases de importação](/pt-br/guides/imports/#aliases) que você define na configuração `paths` do seu `tsconfig.json`. [Leia nosso guia](/pt-br/guides/imports/#aliases) para aprender mais.


```astro title="src/pages/sobre/nate.astro" "@components" "@layouts"
Expand All @@ -122,7 +129,7 @@ import Layout from '@layouts/Layout.astro';
Você pode querer adicionar uma propriedade para o objeto global. Você pode fazer isso adicionando declarações de nível superior usando a palavra-chave `declare` ao seu arquivo `env.d.ts`:

```ts title="env.d.ts"
declare const minhaString: string;
declare var minhaString: string;
declare function minhaFuncao(): boolean;
```

Expand All @@ -140,10 +147,10 @@ interface Window {

## Propriedades de Componentes

O Astro suporta a tipagem das propriedades dos seus componentes via TypeScript. Para habilitar, exporte uma interface TypeScript `Props` de seu componente Astro. A [extensão para VSCode do Astro](/pt-br/editor-setup/) irá automaticamente procurar pela exportação de `Props` e te dar suporte a TypeScript quando você utilizar aquele componente dentro de outro template.
O Astro suporta a tipagem das propriedades dos seus componentes via TypeScript. Para habilitar, adicione uma interface TypeScript `Props` ao frontmatter do seu componente. Uma declaração `export` pode ser utilizada, mas não é necessária. A [extensão para VSCode do Astro](/pt-br/editor-setup/) automaticamente buscará pela interface `Props` e oferecerá suporte TypeScript adequado quando você utilizar aquele componente dentro de outro template.
```astro title="src/components/OlaProps.astro" ins={2-5}
---
export interface Props {
interface Props {
nome: string;
saudacao?: string;
}
Expand All @@ -152,7 +159,7 @@ const { saudacao = 'Olá', nome } = Astro.props;
<h2>{saudacao}, {nome}!</h2>
```

### Padrões de tipo de prop comuns
### Padrões comuns de tipos de prop

- Se seu componente não recebe props ou conteúdo em slot, você pode usar `type Props = Record<string, never>`.

Expand All @@ -173,7 +180,7 @@ Por exemplo, se você está construindo um componente `<Link>`, você pode fazer
```astro title="src/components/Link.astro" ins="HTMLAttributes" ins="HTMLAttributes<'a'>"
---
import type { HTMLAttributes } from 'astro/types';
// use `type`
// use um `type`
type Props = HTMLAttributes<'a'>;
// ou estenda com uma `interface`
interface Props extends HTMLAttributes<'a'> {
Expand Down Expand Up @@ -218,9 +225,9 @@ type MeusAtributos = astroHTML.JSX.ImgHTMLAttributes;

<p><Since v="4.3.0" /></p>

Esta exportação de tipo permite que você referencie as `Props` aceitadas por outro componente, mesmo que o componente não exporte o tipo `Props` diretamente.
Esta exportação de tipo permite que você referencie as `Props` aceitas por outro componente, mesmo que o componente não exporte o tipo `Props` diretamente.

O exemplo seguinte mostra a utilidade de usar `ComponentProps` de `astro/types` para referenciar os tipos de um componente `<Button />` `Props`:
O exemplo seguinte mostra a utilidade de usar `ComponentProps` de `astro/types` para referenciar os tipos `Props` de um componente `<Button />`:

```astro title="src/pages/index.astro"
---
Expand All @@ -236,7 +243,7 @@ type ButtonProps = ComponentProps<typeof Button>;

<p><Since v="2.5.0" /></p>

Astro inclui um utilitário para tornar mais fácil construir componentes que podem renderizar como elementos HTML diferentes com segurança total de tipo. Isso é útil para componentes como `<Link>` que podem renderizar como `<a>` ou `<button>` dependendo das props passadas para ele.
Astro inclui um utilitário para tornar mais fácil construir componentes que podem renderizar como elementos HTML diferentes com total segurança de tipo. Isso é útil para componentes como `<Link>` que podem renderizar como `<a>` ou `<button>` dependendo das props passadas para ele.

O exemplo abaixo implementa um componente totalmente tipado e polimórfico que pode renderizar como qualquer elemento HTML. O tipo [`HTMLTag`](#atributos-html-integrados) é usado para garantir que a prop `as` é um elemento HTML válido.

Expand All @@ -252,7 +259,7 @@ const { as: Tag, ...props } = Astro.props;
<Tag {...props} />
```

### Inferir os tipos do `getStaticPaths()`
### Inferir tipos de `getStaticPaths()`

<p><Since v="2.1.0" /></p>

Expand Down Expand Up @@ -286,7 +293,7 @@ const { title } = Astro.props;

## Checagem de Tipos

Para ver erros de tipagem em seu editor, por favor certifique-se de que você tem a [extensão Astro para VS Code](/pt-br/editor-setup/) instalada. Por favor note de que os comandos `astro start` e `astro build` irão transpilar o código com esbuild, porém não executará nenhuma checagem de tipos. Para prevenir o seu código de fazer build quando conter erros de TypeScript, mude o seu script "build" no `package.json` para o seguinte:
Para ver erros de tipagem em seu editor, por favor certifique-se de que você tem a [extensão Astro para VS Code](/pt-br/editor-setup/) instalada. Por favor note que os comandos `astro start` e `astro build` irão transpilar o código com esbuild, porém não executarão nenhuma checagem de tipos. Para prevenir o seu código de fazer build quando conter erros de TypeScript, mude o seu script "build" no `package.json` para o seguinte:

```json title="package.json" del={2} ins={3} ins="astro check &&"
"scripts": {
Expand All @@ -309,9 +316,9 @@ import ReadMore from '~/components/ReadMore.astro'

### Erros ao fazer a tipagem de múltiplos frameworks JSX ao mesmo tempo

Um problema pode surgir ao se utilizar múltiplos frameworks JSX no mesmo projeto, já que cada framework requer configurações diferentes, e as vezes até conflitantes, dentro de `tsconfig.json`.
Um problema pode surgir ao se utilizar múltiplos frameworks JSX no mesmo projeto, já que cada framework requer configurações diferentes, e às vezes até conflitantes, dentro de `tsconfig.json`.

**Solução**: Defina a [opção `jsxImportSource`](https://www.typescriptlang.org/tsconfig#jsxImportSource) para `react` (padrão), `preact` ou `solid-js` dependendo do seu framework mais utilizado. Então, utilize um [comentário pragma](https://www.typescriptlang.org/docs/handbook/jsx.html#configuring-jsx) dentro de qualquer arquivo conflitante de outro framework.
**Solução**: Defina a [configuração `jsxImportSource`](https://www.typescriptlang.org/tsconfig#jsxImportSource) para `react` (padrão), `preact` ou `solid-js` dependendo do seu framework mais utilizado. Então, utilize um [comentário pragma](https://www.typescriptlang.org/docs/handbook/jsx.html#configuring-jsx) dentro de qualquer arquivo conflitante de outro framework.

Para a opção padrão de `jsxImportSource: react`, você usaria:

Expand Down

0 comments on commit 82d86b6

Please sign in to comment.