This is how I get typescript working in my Lambdas. Note, I end up with files I don't want packaged up. Probably need a yarn clean or something to prune out the undesireable files. But this is working for now.
// inside your lambda, you can access the GQL generated types
import type { Account, Order, OrderStatus } from 'API'
| In the front-end package.json file, add 'amplify:xxx' lines to the script section for each lambda that uses typescript. | |
| Amplify will call those automatically when you build. You can `yarn amplify:nameOfYourLambda` to manually build the lambda. | |
| "scripts": { | |
| "dev": "vite", | |
| "build": "tsc && vite build", | |
| "test": "vitest", | |
| "test:ui": "vitest --ui", | |
| "coverage": "vitest run --coverage", | |
| "preview": "vite preview", | |
| "amplify:nameOfYourLambda": "cd amplify/backend/function/nameOfYourLambda/src && yarn && yarn build;cd -", | |
| }, | |
| You may also need to add this (I use yarn). This might actually be the magic to share "src/API" into the Lambda's... | |
| I forget :( | |
| "private": true, | |
| "workspaces": [ | |
| "appname", | |
| "appname/amplify/backend/function/*/src" | |
| ] |
| This is the package.json file for my lambda | |
| { | |
| "name": "nameofmylambda", | |
| "version": "2.0.0", | |
| "description": "Lambda function generated by Amplify", | |
| "main": "index.js", | |
| "license": "Apache-2.0", | |
| "scripts": { | |
| "build": "tsc -noEmit && esbuild *.ts --main-fields=module,main --bundle --platform=node --external:ssh2 --external:aws-* --external:@aws-* --outdir=./" | |
| }, | |
| "dependencies": { | |
| "graphql": "^14", | |
| "graphql-tag": "^2.12.6", | |
| "node-fetch": "^3.2.9", | |
| "ssh2-sftp-client": "^8.1.0" | |
| }, | |
| "devDependencies": { | |
| "@aws-sdk/abort-controller": "^3.110.0", | |
| "@aws-sdk/client-appsync": "^3.121.0", | |
| "@aws-sdk/client-s3": "^3.107.0", | |
| "@aws-sdk/client-sns": "^3.128.0", | |
| "@aws-sdk/lib-storage": "^3.107.0", | |
| "@aws-sdk/types": "^3.110.0", | |
| "@types/aws-lambda": "^8.10.101", | |
| "@types/node": "^18.0.3", | |
| "@types/ssh2-sftp-client": "^7.0.1", | |
| "aws-appsync": "^4.1.7", | |
| "aws-lambda": "^1.0.7", | |
| "aws-sdk": "^2.1169.0" | |
| } | |
| } |
| At the root of your project there is a '.vscode' directory with 'settings.json' inside it. | |
| Lines 13,14,15 below will hide the javascript .js files when a .ts typescript file with the same name is next to them | |
| { | |
| "files.exclude": { | |
| "amplify/.config": true, | |
| "amplify/**/*-parameters.json": true, | |
| "amplify/**/amplify.state": true, | |
| "amplify/**/transform.conf.json": true, | |
| "amplify/#current-cloud-backend": true, | |
| "amplify/backend/amplify-meta.json": true, | |
| "amplify/backend/awscloudformation": true, | |
| "amplify/backend/function/*/src/**/*.js": { | |
| "when": "$(basename).ts" | |
| } | |
| } | |
| } |
| This tsconfig.json file is at the root of my project. | |
| { | |
| "compilerOptions": { | |
| "allowJs": false, | |
| "allowSyntheticDefaultImports": true, | |
| "baseUrl": "./src", | |
| "esModuleInterop": true, | |
| "forceConsistentCasingInFileNames": true, | |
| "isolatedModules": true, | |
| "jsx": "react-jsx", | |
| "lib": [ | |
| "DOM", | |
| "DOM.Iterable", | |
| "ESNext" | |
| ], | |
| "module": "ESNext", | |
| "moduleResolution": "Node", | |
| "noEmit": true, | |
| "resolveJsonModule": true, | |
| "skipLibCheck": true, | |
| "strict": true, | |
| "target": "ES2015", | |
| }, | |
| "include": [ | |
| "src" | |
| ] | |
| } |
| Add this tsconfig.json file to your lambda, inside the src/ folder. | |
| The extends key points to the root package's tsconfig, providing access to those files. | |
| { | |
| "extends": "../../../../../tsconfig.json", | |
| "compilerOptions": { | |
| "lib": [ | |
| "es2020" | |
| ], | |
| "noEmit": true, | |
| "target": "es2020" | |
| }, | |
| "include": [ | |
| "./" | |
| ] | |
| } |