Type vs interface dans TypeScript

Type vs Interface est l'une des choses les plus déroutantes et les plus intéressantes de TypeScript. Nous allons essayer de dissiper cette confusion.

TypeScript est créé au-dessus de JavaScript, qui ajoute des types statiques . Avoir des types est une chose merveilleuse pour les développeurs. Écrire des types sera difficile, mais vous ne le regretterez pas à long terme.

TypeScript a tous les types de base comme le nombre, la chaîne, le booléen, etc. En plus du type de base, TypeScript nous permet de créer des types personnalisés et de définir l'apparence d'un objet à l'aide des alias de type et des interfaces, respectivement.

Un alias de type n'est rien d'autre qu'un type. La création d'un type avec un nom personnalisé (alias) en fait un alias de type, rien de plus.

Examinons la syntaxe de base des interfaces et des alias de type .

Syntaxe de base

Interfaces

Les interfaces seront déclarées avec le mot clé interface . Vérifiez la syntaxe des interfaces ci-dessous.

 interface InterfaceName { keyName: typeOfKey ... }

Jetez un œil à l'exemple ci-dessous.

 interface Site { name: string; url: string; pagesCount: number; } const geekflare: Site = { name: 'Geekflare', url: 'https://geekflare.com/', pagesCount: 25 }

Tapez les alias

Les alias de type seront déclarés à l'aide du mot-clé type . Vérifiez la syntaxe des alias de type ci-dessous.

 type TypeName = { keyName: typeOfKey; ... }

Jetez un œil à l'exemple ci-dessous.

 type Site = { name: string; url: string; pagesCount: number } const geekflare: Site = { name: 'Geekflare', url: 'https://geekflare.com/', pagesCount: 25 }

Nous avons créé un type pour le Site en utilisant l' interface et le type alias . Les deux sont valides et peuvent être utilisés pour les types d'objets mentionnés dans les exemples. Seule la syntaxe est différente dans l'exemple ci-dessus, ce qui est évident.

Continuons à explorer les différences entre eux pour trouver plus de choses.

Tuples

Un tuple dans TypeScript est un tableau de longueur prédéfini typé. Il définit les types de chaque index.

Nous pouvons déclarer des tuples en utilisant des alias de type. Mais nous ne pouvons pas le faire en utilisant des interfaces. Voyons comment faire avec les alias de type.

 type Site = [string, string, number] const geekflare: Site = ['Geekflare', 'https://geekflare.com/', 25]

Dans l'exemple ci-dessus, nous avons défini le type de chaque élément d'index du tableau. Si nous donnons un autre type dans le tableau, TypeScript générera une erreur.

Ne pouvons-nous pas le faire avec des interfaces ?

Nous ne pouvons pas faire exactement comme nous le faisons avec les alias de type. Les interfaces sont utilisées pour les types d'objets. Donc, nous devons avoir le tuple à l'intérieur de l'objet pour l'utiliser dans les interfaces. Voyons un exemple.

 interface Site { details: [string, string]; pagesCount: number; } const geekflare: Site = { details: ['Geekflare', 'https://geekflare.com/'], pagesCount: 25, }

Si vous voyez le code, nous avons un tuple appelé details à l'intérieur de l'interface. Ainsi, nous pouvons utiliser les tuples à l'intérieur des interfaces.

De même, nous pouvons utiliser des alias de type pour des types uniques tels que chaîne, nombre, booléen, etc. Comme l'interface est utilisée pour les types d'objets, nous pouvons l'utiliser pour les types uniques tels que les alias de type.

Une autre chose intéressante est que nous pouvons utiliser le type alias tuple dans les interfaces . Vérifiez l'exemple ci-dessous.

 type Details = [string, string] interface Site { details: Details; pagesCount: number; } const geekflare: Site = { details: ['Geekflare', 'https://geekflare.com/'], pagesCount: 25, }

Passons à la chose suivante.

Fusion de déclarations – Interfaces

La fusion de déclaration consiste à utiliser TypeScript pour fusionner des types d'interfaces portant le même nom. Voyons l'exemple pour obtenir plus de clarté à ce sujet.

 interface Site { name: string; } interface Site { url: string; } interface Site { pagesCount: number; } const geekflare: Site = { name: 'Geeflare', url: 'https://geekflare.com/', pagesCount: 25, }

Si vous voyez le code ci-dessus, nous avons déclaré l'interface avec le même nom 3 fois. Le compilateur TypeScript compilera ces 3 formulaires en un seul type d'objet qui comprend tous les types des interfaces qui portent le même nom.

Vous pouvez confirmer la fusion de la déclaration en supprimant une clé de l'objet geekflare . Si vous supprimez l'une des clés de geekflare , vous verrez une erreur.

Nous ne pouvons pas faire la même chose avec les alias de type. La plupart des gens n'utilisent pas cette fonctionnalité. En général, avoir plusieurs interfaces avec le même nom est source de confusion.

Fans d'alias de type, ne vous inquiétez pas de cette fonctionnalité des interfaces .

Prolonge

Disons que vous avez déclaré un type. Maintenant, vous voulez déclarer un autre type avec les types du type précédent. Dans ce cas, nous pouvons étendre le type précédent. Nous pouvons le faire avec les interfaces et les alias de type .

Voyons-les tous les deux.

Interfaces

Il existe un mot-clé appelé extends pour ce cas d'utilisation dans TypeScript. Nous l'utiliserons pour étendre les interfaces. Vérifions l'exemple.

 interface Site { name: string; url: string; pagesCount: number; } interface Geekflare extends Site { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Nous avons créé l'interface Geekflare en étendant l'interface du Site . Tous les types de Site seront présents dans l'interface Geeflare avec leurs propres types. Vous pouvez supprimer la clé de name de la variable geekflare pour le confirmer.

Nous pouvons étendre plusieurs interfaces comme suit.

 interface FirstHalf { name: string; } interface SecondHalf { age: number } interface Person extends FirstHalf, SecondHalf { profession: string } const person: Person = { name: 'Geekflare', age: 7, profession: 'Helping Techies' }

Essayez d'étendre avec plus de 2 interfaces pour le plaisir. Nous pouvons également étendre les alias de type avec l'interface.

 type Site = { name: string; url: string; pagesCount: number; } interface Geekflare extends Site { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Nous avons étendu un seul type dans l'exemple ci-dessus. Vous pouvez en étendre autant que vous le souhaitez, comme dans l'exemple précédent d'extension de plusieurs interfaces.

Voyons comment faire avec les alias de type.

Tapez les alias

Nous pouvons étendre les alias de type en utilisant le type d'intersection dans TypeScript. Voyons un exemple.

 type Site = { name: string; url: string; pagesCount: number; } type Geekflare = Site & { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Nous avons étendu le type de Site avec le founder pour le type Geekflare en utilisant l' intersection (&) . Vous pouvez le tester en supprimant l'une des clés de la variable geekflare , ce qui générera une erreur.

Comme pour les interfaces, nous pouvons étendre plusieurs types comme suit.

 type FirstHalf = { name: string; } type SecondHalf = { age: number } type Person = FirstHalf & SecondHalf & { profession: string } const person: Person = { name: 'Geekflare', age: 7, profession: 'Helping Techies' }

Nous pouvons également étendre les interfaces avec des alias de type de la même manière que les interfaces étendant les alias de type. Vérifiez l'exemple ci-dessous.

 interface Site { name: string; url: string; pagesCount: number; } type Geekflare = Site & { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Essayez d'étendre la combinaison d'alias de type et d'interfaces.

Exécution

Ce n'est pas une différence entre les interfaces et les alias de type. Juste une caractéristique de class à connaître.

Une classe peut implémenter à la fois l'interface et l'alias de type de la même manière. Voyons les exemples pour les deux.

Interfaces

 interface Site { name: string; url: string; pagesCount: number; } class Geekflare implements Site { name = 'Geekflare' url = 'http://geekflare.com/' pagesCount = 25 constructor() { console.log(this.name, this.url, this.pagesCount) } }

Tapez les alias

 type Site = { name: string; url: string; pagesCount: number; } class Geekflare implements Site { name = 'Geekflare' url = 'http://geekflare.com/' pagesCount = 25 constructor() { console.log(this.name, this.url, this.pagesCount) } }

Remarque : une chose à retenir est que nous ne pouvons pas implémenter les types d' union (|) ou d' intersection (&) avec des classes.

Derniers mots

Comme vous le voyez dans les articles, nous pouvons tout faire avec les alias de type et les interfaces. Donc, nous ne pouvons pas dire strictement que l'un est meilleur que l'autre. En fin de compte, c'est son choix personnel d'en choisir un. Vous finirez par développer votre style de les utiliser.

Ensuite, vous pouvez vérifier Typescript vs Javascript.

Joyeux codage