typescript - Hur typomvandlar man Svelte 3 reaktiva syntaxvariabler?

Jag vet inte hur man skriver Svelte 3 reaktiva syntaxvariabler.

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

Men detta fungerar inte:

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

Om jag använder det här istället:

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

VSCode-tillägget svelte.svelte-vscode formaterar det som den första när jag sparar.

Är det mitt fel?

Finns det ett bättre sätt att kasta de där reaktiva variablerna?

Svar #1

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

  import { DEFAULT_PLAYER } from "./utils";

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

Jag är inte ett fan av att använda as för typomvandling och kommer att undvika det så mycket som möjligt. Typomvandling med as kan leda till typfel vid körning eftersom du säger till kompilatorn "den här variabeln kommer alltid att vara av denna typ, lita på mig".

Deklarera istället din reaktiva variabel först med typdeklarationen. I fallet ovan…

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

… ingen typkonvertering behövs!

Svar #2

När du arbetar med TypeScript år 2023 rekommenderas det att använda satisfies-operatorn för bättre typerlighet. Överväg följande kodexempel:

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

Detta tillvägagångssätt erbjuder förbättrad korthet och undviker behovet av överflödiga deklarationer.

Tidigare stötte jag på problem när jag använde let-metoden, eftersom den inte gav strikt genomdrivning av objektets egenskaper. Till exempel identifieras följande fel korrekt:

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

Men följande fall orsakar inte ett typfel även om det borde:

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

Denna situation utgör ett betydande problem, eftersom det tillåter oavsiktliga egenskaper att läggas till objekt.

Relaterade artiklar