如何输入强制转换 Svelte 3 反应式语法变量？

Question

我不知道如何输入 Svelte 3 反应式语法变量。

<script lang="ts">
  import type { Player, Team } from "./types";

  import { DEFAULT_PLAYER } from "./utils";

  $: player = DEFAULT_PLAYER as Player;
    $: team = { search: "Real", players: [] } as Team;
</script>

但这不起作用：

'Team' cannot be used as a value because it was imported using 'import type'.ts(1361)

如果我用这个代替：

$: team = ({ search: "Real", players: [] } as Team);

VSCode 扩展svelte.svelte-vscode格式与我保存时的第一个扩展格式相同。

这是我的错吗？

有没有更好的方法来投射这些反应性变量？

Answer 1

<script lang="ts">\n  import type { Player, Team } from "./types";\n\n  import { DEFAULT_PLAYER } from "./utils";\n\n  let player: Player;\n  $: player = DEFAULT_PLAYER;\n  let team: Team;\n  $: team = { search: "Real", players: [] };\n</script>\n

\n

我不喜欢使用as强制类型转换，并且会尽可能避免使用它。类型转换as可能会导致运行时类型错误，因为您告诉编译器“这个变量将始终是这种类型，相信我”。

\n

相反，首先使用类型声明来声明反应式变量。在上述情况下\xe2\x80\xa6

\n

<script lang='ts'>\n  let team: Team;\n  $: team = { search: "Real", players: [] }\n</script>\n

\n

\xe2\x80\xa6 无需类型转换！

\n

Answer 2

在 2023 年使用 TypeScript 时，建议使用satisfies运算符以获得更好的类型安全性。考虑以下代码片段：

<script lang="ts">
  import type { Player, Team } from "./types";
  import { DEFAULT_PLAYER } from "./utils";

  $: player = DEFAULT_PLAYER satisfies Player;
  $: team = { search: "Real", players: [] } satisfies Team;
</script>

这种方法提高了简洁性并避免了冗余声明的需要。

以前，我在使用该方法时遇到了问题let，因为它没有严格执行对象属性。例如，以下故障被正确识别：

type A = { a: string };
let a: A;
$: a = { a: 2 };

但是，以下情况不会导致类型错误，尽管它应该导致：

type A = { a: string };
let a: A;
$: a = { a: 'a', b: 'b' };

这种情况带来了一个严重的问题，因为它允许将意外的属性添加到对象中。