[TypeScript] 変数名が衝突する時の回避方法

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} />