Amplify functionをtypescriptで書くよ

今回は、公式の手順に従ってamplify functionをtypescriptで書こうと思います。

Functionの追加

この手順では、functionの名前を「generateReport」としているので合わせます。適宜読み替えましょう。

$ amplify add function
Using service: Lambda, provided by: awscloudformation
? Provide a friendly name for your resource to be used as a label for this categor
y in the project: generateReport
...略...

手順ではamplify function addと書かれてますが、amplify add functionでもオケ。

作成できると以下の場所にindex.jsが作成されます。
amplify > backend > function > generateReport > src

Typescriptの導入

作成したFunction配下に移動しtypescriptをインストールします。

$ cd amplify/backend/function/generateReport/src
$ yarn add -D typescript

npm使っている人はnpmでもオケ。

Typescriptコードの作成

手順によると、typescriptのコードはamplify/backend/function/generateReport/libに配置されていることを期待しているようなので、そこにindex.tsファイルを作成します。
とりあえず、index.jsを移動して、ファイル名をindex.tsに変更しましょう。

スクリプト導入

プロジェクトルートのpackage.jsonにトランスパイル用のスクリプトを追加します。

package.json

{
...略...
  "scripts": {
    "amplify:generateReport": "cd amplify/backend/function/generateReport && tsc -p ./tsconfig.json && cd -"
  },
}

tsconfig.json作成

作成済みのFunction直下にtsconfig.jsonファイルを作成します。

$ cd amplify/backend/function/generateReport
$ touch tsconfig.json

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "lib": ["dom", "esnext"],
    "module": "commonjs",
    "moduleResolution": "node",
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "outDir": "./src",
    "baseUrl": "./",
    "rootDir": "./lib",
    "paths": {
      "src": ["./lib"]
    }
  }
}

動作確認

mockで動作を確認し、よろしければpushしましょう。

$ amplify mock function

$ amplify push

これで無事、typescriptで書いたコードがlambdaにデプロイされることになるでしょう。