在我的组件/页面中，我需要多次使用此模式：

{#if player.name}
  {player.name}
{:else}
  None
{/if}

因此我创建了一个名为MaybeNone的新组件：

<script lang="ts">
    export let condition = false;
</script>

{#if !condition}
    None
{:else}
    <slot />
{/if}

像这样使用：

<MaybeNone condition={!!player.name}>
  Name is: {player.name}
</MaybeNone>

但有时候我需要用一些方法

{#if player.name}
  {calculate_player_name(player)}
{:else}
  None
{/if}

与：

export const calculate_player_name = (
    player: Pick<Player, 'name' | 'nickname'>
): string => {
    // calculate result...

    return result;
};

player?: {
    name?: string | null;
    nickname?: string | null;
    team?: string | null;
    id: string;
    createdAt: Date;
  } | null;
}>;

现在MaybeNone组件的用法不好：

<MaybeNone condition={!!player.name}>
  <!-- There is an error here because I need to check player.name before calling `calculate_player_name()` obviously -->
  {calculate_player_name(player)}
</MaybeNone>

所以我不得不用

<MaybeNone condition={!!player.name}>
  {#if player.name}
    {calculate_player_name(player)}
  {/if}
</MaybeNone>

因为打字错误当然是：

Type 'undefined' is not assignable to type 'Pick<Player, "name" | "nickname">'.ts(2345)

这使得MaybeNone的使用没有用或者没有我想象的那么好。
你能建议一个替代方案吗？一个解决方案？
感谢您的帮助!