Maison  >  Article  >  interface Web  >  Tapez ✔ Vs Interface ❌ : Pourquoi vous devriez choisir la saisie plutôt que l'interface dans TypeScript.

Tapez ✔ Vs Interface ❌ : Pourquoi vous devriez choisir la saisie plutôt que l'interface dans TypeScript.

WBOY
WBOYoriginal
2024-08-09 07:18:52497parcourir

Type ✔ Vs Interface ❌: Why you should chose type over interface in typescript.

Je suis parvenu à une solution selon laquelle vous devez toujours utiliser des types sur les interfaces. Voyons pourquoi !!

  • Les interfaces ne peuvent spécifier que des objets, mais l'alias de type peut spécifier des objets et tout le reste. Disons que nous avons un seul champ Adresse et avec type vous définirez son type comme ceci :
type Address = string;
const address: Address = '123 Hallway'

Mais vous ne pouvez pas faire ce genre de choses avec une interface comme :

interface Address = string; //error
const address: Address = '123 Hallway'

Parce que l'alias d'interface ne peut définir que des objets. Nous devrons changer complètement la structure si nous voulons utiliser une interface comme :

interface Address {
    address: string;
}
const address: Address = {
    address: '12 3 Hallway'
}

C'est le premier problème avec les interfaces.

  • l'alias de type peut définir les types d'union et l'alias d'interface ne peut pas : L'utilisateur peut avoir plusieurs ou une seule adresse :
type Address = string | string[] ;
const address: Address = '123 Hallway'
const newAddress: Address= ['123 Hallway', 'Flag Plaza']

chaîne | string[] est appelé un type Union, l'adresse peut être une chaîne ou un tableau de chaînes.

Vous pouvez faire ce genre de choses avec un alias d'interface.

  • Les alias de types peuvent facilement utiliser des types utilitaires. L'interface peut faire l'affaire mais elle aura l'air moche, par exemple considérons un objet utilisateur :
type User = {
    name: string;
    age: number;
    created_at: Date;
}

Maintenant, disons que nous avons un objet invité, qui n'est pas connecté mais que nous pouvons vérifier quand il a été créé (arrivé pour la première fois sur la page). Dans ce scénario, l'invité est comme un utilisateur mais pas comme un utilisateur réel. Nous voulons avoir la propriété create_at dans Guest à partir de l'alias de type User In, nous le faisons comme :

     type Guest = Omit<User, 'name' | 'age'>

Techniquement c'est possible avec l'interface mais voyez comment ça marche :

type Guest extends Omit<User, 'name' | 'age'> {}

Ça marche mais c'est une syntaxe moche, n'est-ce pas ?

  • Parfois, vous devrez décrire des tuples. Voici comment nous le décrivons avec l'alias de type
type Address = [string, number, string] ;
const address: Address = ['Hallway', 2, 'Abdul Plaza']

Mais avec l'interface, voyez comment nous procédons :

type Address extends Array<number | string> {
    0: string
    1: number;
    2: string;
}

const address: Address = ['Hallway', 2, 'Abdul Plaza']

Syntaxe encore laide.

  • Avec les alias de types, nous pouvons extraire les types très facilement.
const love_bonito ={
    level: 1,
    store_id: 'scad_12hdedhefgfeaa',
    country: ['US','PK','IND'],
    user: {
        user_id: "blah',
        username: 'nishat',
        likes: 421,
    },
};

// let's extract type for love_bonito
type LoveBonito = typeOf love_bonito;

// or even something inside love_bonito
type User = typeOf love_bonito.user;  

Le bonus est que si notre niveau est déjà toujours un et rien d'autre, nous pouvons le faire aussi :

const love_bonito ={
    level: 1,
    store_id: 'scad_12hdedhefgfeaa',
    country: ['US','PK','IND'],
    user: {
        user_id: "blah';
        username: 'nishat';
        likes: 421;
    },
} as const

// let's extract type for love_bonito
type LoveBonito = typeOf love_bonito

// or even something inside love_bonito
type User = typeOf love_bonito.user

Maintenant, le niveau sera déduit comme 1, et non comme n'importe quel nombre.

  • Avec l'alias d'interface, vous pouvez redéclarer une interface,
interface Home {
    rooms: number;
    light_bulbs: 12;
    rented_to: "Abu Turab";
}

interface Home {
   fans: 16;
}

// final type 

interface Home {
    rooms: 3;
    light_bulbs: 12;
    rented_to: "Abu Turab";
    fans: 16;
}

Nous ne pouvons pas redéclarer l'alias de type. Vous pourriez penser : « Oh ! Sheraz, ici, c'est un plus de l'interface », mais en réalité ce n'est pas le cas !!!

Cela semble déroutant d'avoir plusieurs déclarations avec le même identifiant dans toute votre base de code. Cela me semble vraiment déroutant.

Supposons que vous travaillez avec une équipe, que vous connaissiez le type d'un objet (types déclarés avec l'interface), mais que quelqu'un dans votre équipe le redéclare et le modifie, que feriez-vous.

Mais avec l'alias de type, ce problème est également résolu. Si vous redéclarez un type, cela génère une erreur

identifiant en double

  • Le nom de la bibliothèque est TYPESCRIPT et non INTERFACESCRIPT. Cela peut paraître génial, mais oui, pourquoi une entreprise choisirait-elle de nommer sa bibliothèque TYPESCRIPT et non IBTERFACESCRIPT. Si l’entreprise préfère les caractères à l’interface, pourquoi pas vous ? ?

Conclusion

Préférez toujours les types aux interfaces. Certains développeurs disent que les interfaces se chargent plus rapidement que les types... Mais cela s'est produit dans le passé. Aujourd'hui, il n'y a plus de différence en termes de performances. Il existe certains cas d'utilisation dans lesquels vous pourriez avoir besoin d'interfaces, mais cela ne signifie pas que vous devriez utiliser des interfaces tout le temps.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn