De nombreux développeurs sont confus au moment de choisir entre une interface TypeScript ou un type. C’est probablement parce qu’ils sont très similaires avec des différences mineures.
Explorons quelques pratiques judicieuses et des valeurs par défaut, tout en découvrant quelques joyaux cachés du langage TypeScript et répondons à la question « Devrais-je utiliser une interface ou un type ? »
Une fois que vous avez terminé, consultez mon autre article sur les interfaces TypeScript vs les classes !
Voici ma règle : Pour les cas d’utilisation tels que la création de nouveaux types à travers des choses comme les primitives, les types d’union et les types de tuple, je préfère utiliser le mot-clé type. Pour tout le reste (objets/réseaux), c’est un interface.
Un interface est extrêmement utile lorsqu’il s’agit de structures de données car c’est une représentation très visuelle (bien que ce soit aussi le cas du type, c’est typiquement ma préférence). Il est tout à fait correct de choisir un type pour vos objets et tableaux aussi.
Néanmoins, découvrons un peu plus les Types vs Interfaces dans TypeScript afin que vous puissiez prendre une décision plus éclairée.
Objets : Type vs Interface
Typiquement, nous définirions une structure de données pour modéliser un type contre nos variables et arguments de fonction prévus. La plupart du temps, une structure de données est un tableau ou un objet qui pourrait contenir quelques méthodes.
Créons un objet en tant qu’interface (approche recommandée):
interface Milkshake { name: string; price: number; getIngredients(): string;}Ici, je préfère utiliser une interface parce qu’il est clair que c’est une interface et non une variable avec des données assignées – une belle victoire de lisibilité. Nous utilisons name et price pour permettre de définir des enregistrements et getIngredients comme appel de méthode.
🎉 Téléchargez-le gratuitement !
Prêt à aller au-delà de ForEach ? Mettez-vous en confiance avec des méthodes avancées – Reduce, Find, Filter, Every, Some et Map.
-
Comprenez pleinement comment gérer les structures de données JavaScript avec des opérations immuables - 31 pages de syntaxe en profondeur, d’exemples réels, de conseils et d’astuces
- Écrivez une logique de programmation plus propre et mieux structurée en 3 heures
En prime, nous vous enverrons également quelques goodies supplémentaires à travers quelques emails supplémentaires.
Lorsque nous comparons cela à un type – il pourrait facilement être confondu comme un objet réel en raison de l’affectation =:
type Milkshake = { name: string; price: number; getIngredients(): string;};C’est juste ma petite préférence pour choisir un interface plutôt que d’utiliser un type ici – mais vous êtes libre d’utiliser le mot-clé type si vous le souhaitez.
Intersection : Type vs Interface
Intersecter signifie simplement combiner un ou plusieurs types ! Ce motif peut être accompli en utilisant à la fois un interface ou un type.
Supposons les interfaces suivantes, je vais vous montrer comment nous pouvons intersecter un interface et un type:
interface MilkshakeProps { name: string; price: number;}interface MilkshakeMethods { getIngredients(): string;}Avec une interface, nous intersecterions en utilisant le mot-clé extends. J’utilise plusieurs interfaces pour vous montrer comment étendre (hériter) en une interface finale Milkshake contenant toutes les propriétés et méthodes définies ailleurs :
// { name: string, price: number, getIngredients(): string }interface Milkshake extends MilkshakeProps, MilkshakeMethods {}Nous pouvons maintenant utiliser Milkshake partout où nous le souhaitons et bénéficier d’avoir name, price et getIngredients dans une seule référence d’interface.
Voici comment nous ferions la même chose avec un type et en intersectant les types via &:
// { name: string, price: number, getIngredients(): string }type Milkshake = MilkshakeProps & MilkshakeMethods;Je recommanderais d’utiliser un type au lieu d’un interface lorsque vous voulez intersecter des types. Utiliser extends semble un peu plus verbeux et pas aussi clair à lire et je pense que c’est ce pour quoi le mot-clé type a été fait.
Il est également super facile de simplement combiner plus de types avec type. Je trouve que le code est plus clair que d’utiliser extends avec des interfaces.
Les interfaces sont également limitées – l’alias type peut être utilisé pour des types plus complexes tels que les tuples, les primitives, les unions et d’autres encore :
// { name: string, price: number, getIngredients(): string }type Milkshake = MilkshakeProps & { getIngredients(): string };Primitives : Type vs Interface
Parlons des types primitifs. Oui, les chaînes de caractères, les nombres, etc. Vous ne pouvez affecter un type primitif qu’à un alias type:
type MilkshakeName = string;interface Milkshake { name: MilkshakeName; price: number;}Si vous devez utiliser une primitive, utilisez une type. Les interfaces sont à proscrire ici pour une seule valeur car la syntaxe ne le supporte pas.
🎉 Téléchargez-le gratuitement !
Prêt à aller au-delà de ForEach ? Mettez-vous en confiance avec des méthodes avancées – Reduce, Find, Filter, Every, Some et Map.
- Comprenez pleinement comment gérer les structures de données JavaScript avec des opérations immuables
- 31 pages de syntaxe en profondeur, d’exemples réels, de conseils et d’astuces
- Écrivez une logique de programmation plus propre et mieux structurée en 3 heures
En prime, nous vous enverrons également quelques goodies supplémentaires à travers quelques emails supplémentaires.
Pour la plupart des cas cependant, il serait plus facile de simplement utiliser directement la valeur primitive :
interface Milkshake { name: string; price: number;}Ne compliquez pas trop votre code !
Classes : Type vs Interface
Que vous ayez choisi un type ou un interface, la façon dont nous l’utilisons avec une classe est la même:
type Size = { size: string};interface Milkshake { name: string; price: number; getIngredients(): string;}class Order implements Size, Milkshake { // Size size = 'large'; // Milkshake name = 'Vanilla'; price = 399; getIngredients() { return ; }}Les classes ne supportent pas les types d’union implémentation/extension, car elles sont considérées comme des blueprints statiques. Cela signifie que vous devez être super explicite sur chaque type que vous implémentez, car il ne peut pas être dynamique ou changer à l’heure actuelle en raison des limitations de TypeScript.
En savoir plus sur les interfaces vs les classes de TypeScript !
Fonctions : Type vs Interface
Typiquement, je créerais une fonction en utilisant l’alias type car la plupart du temps, nous voudrions taper une fonction anonyme :
type IngredientsFn = () => string;const getIngredients: IngredientsFn = () => ;Par contre, si utiliser une interface pour cela serait plus votre style, voici comment faire :
interface IngredientsFn { () => string;}C’est juste un peu bancal par rapport à l’utilisation de type, mais encore une fois, les deux sont complètement valides TypeScript et il n’y a aucune différence lorsque le code est compilé.
Quand ne pas utiliser un Type
Maintenant que nous avons exploré les différentes comparaisons et approches recommandées, il est temps de parler de Declaration Merging, une fonctionnalité de TypeScript qui s’applique uniquement à interface et qui serait une raison de choisir un interface plutôt qu’un type.
Pour fusionner des types en utilisant type, nous devrions faire quelque chose comme ceci et créer une nouvelle type finale:
type MilkshakeProps = { name: string; price: number;};type MilkshakeMethods = { getIngredients(): string;};type Milkshake = MilkshakeProps & MilkshakeMethods;Notre type Milkshake est maintenant un alias de type de MilkshakeProps et MilkshakeMethods. Notez, que pour obtenir ce comportement, nous avons dû créer Milkshake, ce qui nous donne 3 alias de type individuels.
Avec les interfaces, il existe en fait une approche plus intelligente (certains diront un peu trop intelligente) appelée fusion de déclarations.
Nous pouvons réaliser une fusion de déclaration en déclarant simplement la même interface deux fois dans la même portée (cela pourrait être soit via l’importation de l’interface à partir d’un autre module, soit en la déclarant localement à côté d’une autre interface):
// declared once...interface Milkshake { name: string; price: number;}// declared again the same, it works!interface Milkshake { getIngredients(): string;}// { name: string, price: number, getIngredients(): string }const milkshake: Milkshake = { name: 'Banana', price: 399, getIngredients() {...}};Milkshake contient maintenant name, price et getIngredients ! Cependant, la fusion des déclarations est-elle une bonne chose ? Honnêtement, je ne suis pas un fan et je pense que cela pourrait conduire à plus de mal que de bien. Je composerais vos types à travers type plutôt que d’utiliser la fusion de déclarations – mais au moins vous connaissez la ou les principales différences maintenant.
Conclusion
Donc, vous l’avez ! Les principales différences entre les types et les interfaces dans TypeScript.
Pour récapituler, avec quelques préférences personnelles aussi, je m’en tiendrais à un interface pour les objets et j’utiliserais le mot-clé type alias pour composer de nouveaux types à la volée. Ces nouveaux types pourraient même être issus d’interfaces ou d’autres types comme les tuples, les unions et les types d’intersection. Il y a beaucoup de possibilités, mais en comprenant les approches, nous pouvons commencer à choisir le bon outil.
Pour la plupart, les interfaces et les types sont à peu près les mêmes à part quelques différences couvertes ici. J’espère que vous avez apprécié la lecture!
Si vous êtes sérieux au sujet de vos compétences en TypeScript, votre prochaine étape est de jeter un coup d’œil à mes cours de TypeScript, ils vous enseigneront les bases complètes du langage en détail ainsi que de nombreux cas d’utilisation avancés dont vous aurez besoin dans le développement quotidien de TypeScript!
Happy coding!
