TypeScriptで変数が衝突する時の回避方法について説明します。
ソースコード
以下のコードでは、変数isVisibleが衝突しています。
修正前
import React, { useState } from 'react'; const PostCard = ({ postId, isVisible = true, }: { postId: string, isVisible?: boolean, }) => { const [isVisible, setIsVisible] = useState<boolean>(isVisible); // ... }
修正後
引数のisVisibleの後ろに:をつけて、別の変数名を割り当てます。
import React, { useState } from 'react'; const PostCard = ({ postId, isVisible: propIsVisible = true, }: { postId: string, isVisible?: boolean, }) => { const [isVisible, setIsVisible] = useState<boolean>(propIsVisible); // ... }
呼び出し側の引数の名前は、isVisibleのままです。
<PostCard postId='abc' isVisible={true} />