Amplify FunctionsをTypeScriptで書く

早速amplify add functionしていく。

console

❯❯❯ amplify add function
? Select which capability you want to add: 
❯ Lambda function (serverless function) 
  Lambda layer (shared code & resource used across functions) 

? Provide an AWS Lambda function name: function名

? Choose the runtime that you want to use: (Use arrow keys)
  .NET Core 3.1 
  Go 
  Java 
❯ NodeJS 
  Python 

? Choose the function template that you want to use: (Use arrow keys)
  CRUD function for DynamoDB (Integration with API Gateway) 
  GraphQL Lambda Authorizer

❯ Hello World 
  Lambda trigger 
  Serverless ExpressJS function (Integration with API Gateway) 


Available advanced settings:
- Resource access permissions
- Scheduled recurring invocation
- Lambda layers configuration
- Environment variables configuration
- Secret values configuration

? Do you want to configure advanced settings? No

? Do you want to edit the local lambda function now? No

次に作成したFunctionのフォルダへ移動してTypeScriptをインストールする。

console

❯❯❯ cd amplify/backend/function/function名/src
❯❯❯ npm install --save-dev typescript
❯❯❯ npx tsc --init

Created a new tsconfig.json with:                                                                      
                                                                                                    TS 
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true

ここまで出来たらamplify pushした時に自動でTSをbuildしてくれるようにしましょう。

rootの方のpackage.json

{
  "name": "amplifyfunction",
  // 省略
  "dependencies": {
    // 省略
    "react": "^17.0.2",
    // 省略
  },
  "scripts": {
    "start": "react-scripts start",
    // 省略
    "amplify:function名": "cd amplify/backend/function/function名/src && tsc -p ./tsconfig.json && cd -"
  },

これでindex.jsをindex.tsに変更してコードを書いていけます
めでたしめでたし

お片付け

練習用に作ったのでこのFunctionは消しておく。

console

❯❯❯ amplify function remove
? Choose the resource you would want to remove 
❯ functest (function) 

? Are you sure you want to delete the resource? This action deletes all files related to this resource 
from the backend directory. Yes

後はrootのpackage.jsonに追加したやつも消しておく。

今度こそ本当に終わり