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á.
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
Ao empacotar o código, lembre-se do seguinte:
-
APPSYNC_JSsuporta apenas ECMAScript módulos (ESM). -
Os módulos
@aws-appsync/*são integrados emAPPSYNC_JSe 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.
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.jsCriando seu código e trabalhando com TypeScript
TypeScript@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ê TypeScriptAPPSYNC_JS tempo de execução usando. TSConfigtsconfig.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 emsrc/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/**/*.tsUsar o codegen Amplify
Você pode usar a CLI do Amplifyschema.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<CreateTodoMutationVariables>) {
ctx.args.description = ctx.args.description ?? 'created on ' + util.time.nowISO8601()
return ddb.put<Todo>({ 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<Todo>({
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,<base64 encoded string>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:
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.
