Amplify Week Day1 で勝手にTypeScript で進めて滅茶苦茶ハマった話
AWS Startup Day 連動オンラインハンズオンイベント「Amplify Week」が現在開催されています。名前の通り Amplify を使って Twitter ライクなWeb アプリを3日間かけて作る内容となっています。今回はその1日目の話です。
事前に Amplify CLI 準備しておくように案内も来ていたので、今回が Amplify 初体験の私は言われるがまま環境構築を開始10分前にしていました。ここまでは順調でした。ハンズオンは始まってないんですけどね。
Webinar に参加し、イントロダクションが終わってさあ手を動かそうという段階で、今から実行するコマンドに下記がありましたと。
npx create-react-app boyaki😏💡 閃いた！ React チュートリアルを TypeScript でやってみて完全に理解していたので、上記に --typescript オプションを付けるだけで TypeScript プロジェクトを作成できることを知っていました。
じゃあ TypeScript でやってみよう！ と以下のコマンドを叩いて以降のハンズオンを進めていきました。
npx create-react-app boyaki --typescriptまずは認証機能作るので App.js の中身をこれに置き換えてくださいって書いてあったので置き換えたら、下記でエラーが出ました。躓くのが早い。
export default withAuthenticator(App, {
signUpConfig: {
hiddenDefaults: ['phone_number']
}
});引数全然違う……！？
Customize withAuthenticator として使う場合の型定義となっているみたいです。
適当に true や null を渡す解決法と @ts-ignore でエラーを無視する解決法があり、今回は後者を採用しました。
//@ts-ignore
export default withAuthenticator(App, {
signUpConfig: {
hiddenDefaults: ["phone_number"],
},
});
後から調べたら同じようなことしてましたね。
もちろんこちらが勝手にハマっているので、その間にハンズオンは進んでいます😥
認証機能簡単に追加できたスゲー！
これが噂に聞く GraphQLか……！
Amplify Mocking で実際にデプロイせずとも試せるのすごい！
と堪能しつつ、追いつこうと必死に進めていました。そしてフロントエンド側の実装となり、ファイルの中身置き換える、ディレクトリ作ってコード配置する作業があったのですが、もうね真っ赤っか。エラーで。
とりあえず追加作業で型定義ファイルを入れました。
npm i -D @types/react @types/react-dom @types/react-router-dom-D で devDependencies に入れたものの、react が作成したプロジェクトは 型定義も dependencies に全部突っ込んでました。この辺の使い分け方がよく分からん🤔
エラー出ている箇所はすべて型の問題なので、any を付けて回ればなんとかなりそうだと思い、付けて回りました。この辺りテンパっていたのでスクリーンショットとか残してないですし、この時の状態を再現するほど気力も残ってないので努力の跡をお見せします。
'status' は型 'ThemeOptions' に存在しません。
any にキャスト😇
No overload matches this call.
<Typography
variant='h5'
fontWeight="fontWeightBold"
maxWidth>Typography にそんなのねーよと怒られたので思い切って消す😇
<Typography variant="h5">バインド要素 'xxx' には暗黙的に 'any' 型が含まれます。
一個ずつ全部怒られているので、とりあえず any 😇
export default function PostList({ isLoading, posts, getAdditionalPosts
, listHeaderTitle, listHeaderTitleButton }: any) {とそんな感じでした。
TypeScript の Type ってタイピングって意味だっけ？
とりあえず動かすことを優先にしましたがせっかくの TypeScript も any つけて回られては強みを発揮することができません。。。
なお肝心の Web アプリは別の何かが原因で動いていないです😇
note 書きながらここまではできたのですが、明日も仕事（しかも出社）なのでいったん調査はこれで切り上げこととします。
まだ1日目で明日以降もハンズオンは続きますが、果たして無事に参加、そして完走できるのか、乞うご期待！ （予想：残業には勝てなかったよ）
😉