As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.
# Agrupamento e mapas TypeScript de origem para o tempo de execução `APPSYNC_JS`
TypeScript aprimora AWS AppSync o desenvolvimento fornecendo segurança de tipo e detecção precoce de erros. Você pode escrever TypeScript código localmente e transpilá-lo JavaScript antes de usá-lo com o `APPSYNC_JS` tempo de execução. O processo começa com a instalação TypeScript e configuração do tsconfig.json para o ambiente. `APPSYNC_JS` Em seguida, é possível utilizar ferramentas de empacotamento, como a esbuild, para compilar e empacotar o código. A CLI do Amplify gerará tipos do esquema GraphQL, permitindo que você use esses tipos no código do resolvedor.
No seu resolvedor e código de função, você pode aproveitar bibliotecas personalizadas e externas, desde que estejam em conformidade com os requisitos do `APPSYNC_JS`. As ferramentas de agrupamento combinam código em um único arquivo para uso em AWS AppSync. Os mapas de origem podem ser incluídos para ajudar na depuração.
## Aproveitar as bibliotecas e empacotar seu código
No seu resolvedor e código de função, você pode aproveitar bibliotecas personalizadas e externas, desde que estejam em conformidade com os requisitos de `APPSYNC_JS`. Isso possibilita a reutilização do código existente na sua aplicação. Para usar bibliotecas definidas por vários arquivos, você deve usar uma ferramenta de agrupamento, como [esbuild](https://esbuild.github.io/), para combinar seu código em um único arquivo que pode ser salvo em seu AWS AppSync resolvedor ou função.
Ao empacotar o código, lembre-se do seguinte:
+ `APPSYNC_JS`suporta apenas ECMAScript módulos (ESM).
+ Os módulos `@aws-appsync/*` são integrados em `APPSYNC_JS` e não devem ser empacotados com seu código.
+ O ambiente de runtime `APPSYNC_JS` é semelhante ao NodeJS, pois o código não é executado em um ambiente de navegador.
+ Você pode incluir um mapa de origem opcional. No entanto, não inclua o conteúdo original.
Para saber mais sobre mapas de origem, consulte [Usar mapas de origem](#source-maps).
Por exemplo, para empacotar o código do resolvedor localizado em `src/appsync/getPost.resolver.js`, é possível usar o seguinte comando CLI esbuild:
```
$ esbuild --bundle \
--sourcemap=inline \
--sources-content=false \
--target=esnext \
--platform=node \
--format=esm \
--external:@aws-appsync/utils \
--outdir=out/appsync \
src/appsync/getPost.resolver.js
```
## Criando seu código e trabalhando com TypeScript
[TypeScript](https://www.typescriptlang.org/)é uma linguagem de programação desenvolvida pela Microsoft que oferece todos os JavaScript recursos junto com o sistema de TypeScript digitação. Você pode usar TypeScript para escrever código de tipo seguro e capturar erros e bugs no momento da compilação antes de salvar seu código no. AWS AppSync O pacote `@aws-appsync/utils` está totalmente inserido.
O `APPSYNC_JS` tempo de execução não oferece suporte TypeScript direto. Primeiro, você deve transpilar seu TypeScript código para um JavaScript código compatível com o `APPSYNC_JS` tempo de execução antes de salvá-lo. AWS AppSync Você pode usar TypeScript para escrever seu código em seu ambiente de desenvolvimento integrado (IDE) local, mas observe que você não pode criar TypeScript código no AWS AppSync console.
Para começar, verifique se você [TypeScript](https://www.typescriptlang.org/download)instalou em seu projeto. Em seguida, defina suas configurações de TypeScript transcompilação para trabalhar com o `APPSYNC_JS` tempo de execução usando. [TSConfig](https://www.typescriptlang.org/tsconfig) Aqui está um exemplo de um arquivo básico `tsconfig.json` que você pode usar:
```
// tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"noEmit": true,
"moduleResolution": "node",
}
}
```
Em seguida, é possível utilizar uma ferramenta de empacotamento como esbuild para compilar e agrupar seu código. Por exemplo, em um projeto com seu AWS AppSync código localizado em`src/appsync`, você pode usar o comando a seguir para compilar e agrupar seu código:
```
$ esbuild --bundle \
--sourcemap=inline \
--sources-content=false \
--target=esnext \
--platform=node \
--format=esm \
--external:@aws-appsync/utils \
--outdir=out/appsync \
src/appsync/**/*.ts
```
### Usar o codegen Amplify
Você pode usar a [CLI do Amplify](https://docs.amplify.aws/cli/) para gerar os tipos para seu esquema. No diretório em que seu arquivo `schema.graphql` está localizado, execute o comando a seguir e revise os prompts para configurar seu codegen:
```
$ npx @aws-amplify/cli codegen add
```
Para regenerar seu codegen em determinadas circunstâncias (por exemplo, quando seu esquema é atualizado), execute o seguinte comando:
```
$ npx @aws-amplify/cli codegen
```
Em seguida, é possível usar os tipos gerados no código do resolvedor. Por exemplo, considerando o seguinte esquema:
```
type Todo {
id: ID!
title: String!
description: String
}
type Mutation {
createTodo(title: String!, description: String): Todo
}
type Query {
listTodos: Todo
}
```
Você pode usar os tipos gerados na seguinte AWS AppSync função de exemplo:
```
import { Context, util } from '@aws-appsync/utils'
import * as ddb from '@aws-appsync/utils/dynamodb'
import { CreateTodoMutationVariables, Todo } from './API' // codegen
export function request(ctx: Context) {
ctx.args.description = ctx.args.description ?? 'created on ' + util.time.nowISO8601()
return ddb.put({ key: { id: util.autoId() }, item: ctx.args })
}
export function response(ctx) {
return ctx.result as Todo
}
```
### Usando genéricos em TypeScript
Você pode usar genéricos com vários dos tipos fornecidos. Por exemplo, o trecho abaixo é do tipo `Todo`:
```
export type Todo = {
__typename: "Todo",
id: string,
title: string,
description?: string | null,
};
```
Você pode escrever um resolvedor para uma assinatura que use `Todo`. No seu IDE, as definições de tipo e as dicas de preenchimento automático orientarão você a usar corretamente o utilitário de transformação `toSubscriptionFilter`:
```
import { util, Context, extensions } from '@aws-appsync/utils'
import { Todo } from './API'
export function request(ctx: Context) {
return {}
}
export function response(ctx: Context) {
const filter = util.transform.toSubscriptionFilter({
title: { beginsWith: 'hello' },
description: { contains: 'created' },
})
extensions.setSubscriptionFilter(filter)
return null
}
```
## Usar Lint nos seus pacotes
Você pode filtrar automaticamente seus pacotes importando o plug-in `esbuild-plugin-eslint`. Em seguida, você pode ativá-lo fornecendo um valor `plugins` que ative os recursos do eslint. Abaixo está um trecho que usa a JavaScript API esbuild em um arquivo chamado: `build.mjs`
```
/* eslint-disable */
import { build } from 'esbuild'
import eslint from 'esbuild-plugin-eslint'
import glob from 'glob'
const files = await glob('src/**/*.ts')
await build({
format: 'esm',
target: 'esnext',
platform: 'node',
external: ['@aws-appsync/utils'],
outdir: 'dist/',
entryPoints: files,
bundle: true,
plugins: [eslint({ useEslintrc: true })],
})
```
## Usar mapas de origem
Você pode fornecer um mapa de origem embutido (`sourcemap`) com seu JavaScript código. Os mapas de origem são úteis para quando você agrupa JavaScript ou TypeScript codifica e deseja ver referências aos seus arquivos de origem de entrada em seus registros e mensagens de JavaScript erro de tempo de execução.
Seu `sourcemap` deve aparecer no final do seu código. Ele é definido por uma única linha de comentário que segue o seguinte formato:
```
//# sourceMappingURL=data:application/json;base64,
```
Veja um exemplo abaixo:
```
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsibGliLmpzIiwgImNvZGUuanMiXSwKICAibWFwcGluZ3MiOiAiO0FBQU8sU0FBUyxRQUFRO0FBQ3RCLFNBQU87QUFDVDs7O0FDRE8sU0FBUyxRQUFRLEtBQUs7QUFDM0IsU0FBTyxNQUFNO0FBQ2Y7IiwKICAibmFtZXMiOiBbXQp9Cg==
```
Os mapas de origem podem ser criados com o esbuild. O exemplo abaixo mostra como usar a JavaScript API esbuild para incluir um mapa de origem embutido quando o código é criado e agrupado:
```
/* eslint-disable */
import { build } from 'esbuild'
import eslint from 'esbuild-plugin-eslint'
import glob from 'glob'
const files = await glob('src/**/*.ts')
await build({
sourcemap: 'inline',
sourcesContent: false,
format: 'esm',
target: 'esnext',
platform: 'node',
external: ['@aws-appsync/utils'],
outdir: 'dist/',
entryPoints: files,
bundle: true,
plugins: [eslint({ useEslintrc: true })],
})
```
Em particular, as opções `sourcesContent` e `sourcemap` especificam que um mapa de origem deve ser adicionado in-line no final de cada compilação, mas não deve incluir o conteúdo de origem. Como convenção, recomendamos não incluir o conteúdo de origem em `sourcemap`. É possível desativar isso no esbuild definindo `sources-content` como `false`.
Para ilustrar como os mapas de origem funcionam, revise o exemplo a seguir em que um código de resolvedor faz referência a funções de ajuda de uma biblioteca de ajuda. O código contém instruções de log no código do resolvedor e na biblioteca de ajuda:
**./src/default.resolver.ts** (seu resolvedor)
```
import { Context } from '@aws-appsync/utils'
import { hello, logit } from './helper'
export function request(ctx: Context) {
console.log('start >')
logit('hello world', 42, true)
console.log('< end')
return 'test'
}
export function response(ctx: Context): boolean {
hello()
return ctx.prev.result
}
```
**.src/helper.ts** (um arquivo auxiliar)
```
export const logit = (...rest: any[]) => {
// a special logger
console.log('[logger]', ...rest.map((r) => `<${r}>`))
}
export const hello = () => {
// This just returns a simple sentence, but it could do more.
console.log('i just say hello..')
}
```
Ao criar e empacotar o arquivo resolvedor, seu código do resolvedor incluirá um mapa de origem in-line. Quando seu resolvedor é executado, as seguintes entradas aparecem nos CloudWatch registros:
![\[CloudWatch log entries showing resolver code execution with inline source map information.\]](http://docs.aws.amazon.com/pt_br/appsync/latest/devguide/images/cloudwatch-sourcemap.jpeg)
Observando as entradas no CloudWatch registro, você notará que a funcionalidade dos dois arquivos foi agrupada e está sendo executada simultaneamente. O nome do arquivo original de cada arquivo também é claramente refletido nos registros.