背景

結構前の自分の記事でCognitoのIDプールでユーザー毎フォルダにアクセスしていました。最近、このプロジェクトをVue2からVue3に移行したり、TypeScriptに変えたり、ログイン画面でAmplifyUIコンポーネントを使うように移行したりしました。

今回はTypeScriptの移行ではまった部分があり、原因と解消方法はシンプルだったのですが、なかなかそれらしき記事が無く時間かかってしまったので、同じ現象にはまっている方の手助けになればと思って小ネタ記事を書いてみます。

エラー発生個所と解消方法

S3にアクセスする際、ユーザー毎のフォルダ制限はRoleにおいてidentityIdで指定します。
移行前のjavaScriptのソースは以下の感じです。

移行前のソース（javaScript）

import AWS from 'aws-sdk'
const PROVIDER_KEY = 'cognito-idp.' + awsconfig.Region + '.amazonaws.com/' + awsconfig.UserPoolId
//・・中略・・
  // Initialize the Amazon Cognito credentials provider
  AWS.config.region = awsconfig.Region
  AWS.config.credentials = new AWS.CognitoIdentityCredentials({
    IdentityPoolId: awsconfig.IdentityPoolId,
    Logins: {
      [PROVIDER_KEY]: ${JWTトークン}
    }
  })
  var identityId = AWS.config.credentials.identityId
  var s3key = 'cognito/myhome-account/' + identityId + '/testfile.txt'

そのままTypeScriptとしてビルドすると以下エラーが発生します。

TS2339: Property 'identityId' does not exist on type 'Credentials | CredentialsOptions'.
  Property 'identityId' does not exist on type 'Credentials'.

  > 75 |         const identityId = AWS.config.credentials.identityId;
       |                                                   ^^^^^^^^^^

CognitoIdentityCredentialsにはちゃんとidentityIdが存在します。

原因

エラーメッセージを見るとわかりますが、type 'Credentials | CredentialsOptions'とあり、AWS.config.credentialsはCognitoIdentityCredentialsでなくCredentialsである事が解ります。
CognitoIdentityCredentialsはCredentialsの継承クラスでした。

対応

修正部分（TypeScript移行済み）

const credentials = new AWS.CognitoIdentityCredentials({
  IdentityPoolId: awsConfig.Auth.identityPoolId,
  Logins: {
    [PROVIDER_KEY]: idToken
  }
});
AWS.config.credentials = credentials;
const identityId = credentials.identityId;

一度、CognitoIdentityCredentialsクラスのインスタンスとしてcredentialsを作成し、それをAWS.config.credentialsに設定する事で設定を行い、identityIdの取得時にもcredentials変数から取得する様にしました。

まとめ

TypeScriptの型指定に引っかかったという話でした。javaScriptだとコンパイルエラーにもならず動作もするので最初凄く深く考えてしまいました。ちゃんとエラーメッセージをよく読んで何が起きているのか落ち着いて考えればもっと早く気付いたと思います。