Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2024-08-09 07:18:52
original
536 Les gens l'ont consulté

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'
Copier après la connexion

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

interface Address = string; //error
const address: Address = '123 Hallway'
Copier après la connexion

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'
}
Copier après la connexion

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']
Copier après la connexion

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;
}
Copier après la connexion

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'>
Copier après la connexion

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

type Guest extends Omit<User, 'name' | 'age'> {}
Copier après la connexion

Ç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']
Copier après la connexion

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']
Copier après la connexion

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;  
Copier après la connexion

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
Copier après la connexion

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;
}
Copier après la connexion

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!

source:dev.to
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!