Maîtriser les types littéraux dans TypeScript : vrai comme const vs vrai

En TypeScript, il existe une différence significative entre les deux déclarations :

1. clientLoader.hydrate = true as const;

2. clientLoader.hydrate = true;

Pour info, j'ai choisi ces exemples sur le routeur React v7.

Décomposons la différence avec des explications détaillées et des exemples

1. clientLoader.hydrate = true comme const;

L'assertion as const dans TypeScript est un moyen de dire au compilateur TypeScript de traiter une valeur comme son type littéral, plutôt que comme son type général.
Dans ce cas, true as const signifie que le type d’hydrate sera littéralement vrai et non booléen. Il verrouille essentiellement la valeur de hydrate sur true spécifiquement.

Exemple :

interface ClientLoader {
  hydrate: true;  // The type of hydrate is set to the literal value `true`
}

const clientLoader: ClientLoader = {
  hydrate: true as const,
};

clientLoader.hydrate = true; // This is valid

// clientLoader.hydrate = false; // Error: Type 'false' is not assignable to type 'true'

• Dans l'exemple ci-dessus, clientLoader.hydrate est spécifiquement saisi comme true. Vous ne pouvez attribuer aucune valeur autre que true pour hydrater en raison de l'assertion as const.

• Ce type d'affectation est utile lorsque vous souhaitez imposer l'immuabilité pour certaines propriétés.

1. clientLoader.hydrate = true;

Sans l'assertion as const, TypeScript déduira le type d'hydrate comme booléen. Cela signifie que l'hydrate peut se voir attribuer n'importe quelle valeur booléenne (vrai ou faux).

Exemple :

interface ClientLoader {
  hydrate: boolean;  // The type of hydrate is set to `boolean`
}

const clientLoader: ClientLoader = {
  hydrate: true,
};

clientLoader.hydrate = true;  // This is valid
clientLoader.hydrate = false; // This is also valid

• Dans ce cas, puisque l'hydrate est typé comme booléen, vous pouvez lui attribuer vrai ou faux.

• Il offre la flexibilité de basculer entre vrai et faux.

Pourquoi utiliser as const ?

1. Application de l'immuabilité : as const verrouille la valeur afin qu'elle ne puisse pas être modifiée en autre chose. Ceci est particulièrement utile lorsque vous souhaitez vous assurer qu'une valeur spécifique est toujours la même tout au long du programme.

2. Types littéraux pour les syndicats discriminés : lorsque vous travaillez avec des syndicats discriminés, as const vous permet de créer des cas spécifiques basés sur des types littéraux, comme indiqué ci-dessous :
   

interface ClientLoader {
  hydrate: true;  // The type of hydrate is set to the literal value `true`
}

const clientLoader: ClientLoader = {
  hydrate: true as const,
};

clientLoader.hydrate = true; // This is valid

// clientLoader.hydrate = false; // Error: Type 'false' is not assignable to type 'true'

Conclusion

1. Utilisez as const lorsque vous souhaitez attribuer une valeur littérale spécifique à une propriété et faire en sorte que la valeur reste fixe.

2. Utilisez une affectation régulière (vrai, faux, etc.) lorsque vous souhaitez autoriser une propriété à accepter différentes valeurs booléennes ou lorsque la valeur exacte n'a pas besoin d'être restreinte.

Cela fait de as const un outil utile pour une saisie plus précise et pour appliquer des contraintes de valeur plus strictes dans votre code TypeScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!