Les interfaces dans Typescript : de quoi s'agit-il et comment les utiliser ?

23 février 2022

13 octobre 2022

Pooja Sharma

Les interfaces dans Typescript : de quoi s'agit-il et comment les utiliser ?

Qu'est-ce que le tapuscrit ?

Le tapuscrit est un "Tapé» version du langage JavaScript dont le but est d'introduire le typage statique dans le langage. TypeScript ajoute des types au Code JavaScript pour accélérer le développement en identifiant les problèmes avant l'exécution du code JavaScript. Cependant, cela peut parfois devenir désordonné et c'est la raison pour laquelle il est également détesté par certains programmeurs.

Interfaces

Les interfaces, dans les termes les plus simples, décrivent la structure de l'objet, ce qui signifie qu'elles décrivent à quoi l'objet devrait ressembler. Dans Manuscrit, on peut travailler avec "Interfaces”. Dans TypeScript, une interface contient uniquement la définition des méthodes et des propriétés, pas leur implémentation. C'est la fonctionnalité de la classe qui réalise la connexion entre l'interface en fournissant la connexion avec tous les paramètres de l'interface.

Création d'une interface

Lors de la création d'une nouvelle interface, le interface mot-clé doit être utilisé. Ce mot clé doit être suivi du nom de l'interface. Les accolades doivent contenir la forme d'un objet, les propriétés et les types. Les propriétés et les types sont spécifiés comme "valeur clé” paires lors de la création de l'interface.

Vous trouverez ci-dessous un exemple d'interfaces TypeScript simples. 

// Create an empty interface:
interface EmptyObject {}

// Create interface Person:
interface Person {
  name: string;
  age: number;
  hairColor: string;
  weight: number;
  height: number;
}

// Create interface Car:
interface Car {
  model: string;
  manufacturer: string;
  numberOfWheels: number;
  type: string;
}

// Create interface User:
interface User {
  name: string;
  pass: string;
  email: string;
}

Aussi, lisez: Principaux frameworks de développement d'applications Web pour 2022 : obtenez la plus grande évolutivité à moindre coût

Propriétés facultatives dans les interfaces

La interface déclarée peuvent également avoir des propriétés facultatives. Pour déclarer une propriété facultative, le point d'interrogation (?) à la fin du nom de la propriété est utilisé lors de la déclaration.

Par exemple, si nous prenons l'interface de personne que nous avons déclarée ci-dessus-

// Create interface Person:
interface Person {
  name: string;
  weight? : number;
  age: number;
  hairColor? : string;
   height: number;
}

Dans l'exemple ci-dessus, l'interface Personne a deux propriétés facultatives avec le "?". C'est »couleur de cheveux' et »poids», tandis que les trois autres propriétés sont les propriétés requises.

Annotation d'interface dans les composants fonctionnels

Depuis l' Person interface a été définie, maintenant elle peut être utilisée comme type, peut également être annotée le paramètre de fonction avec le nom de l'interface :

Regardons à nouveau l'interface de personne que nous avons déclarée ci-dessus :

interface PersonData {
  name: string;
 weight? : number;
  age: number;
  hairColor? : string; 
  height: number;
}

function getPersonDetail(person: PersonData) {
    return `${person.name} ${person.age} ${person.height}`;
}

let johnDoe = {
    name: 'John Doe',
    age: 25,
    height: 170,
};

console.log(getPersonDetail(johnDoe));

Sortie :

John Doe 25 170

Dans l'exemple ci-dessus, le compilateur TypeScript vérifie les paramètres ou les propriétés qui sont passés dans le getPersonDetail() la fonction.

Si l'argument a deux propriétés dont les types sont des nombres et une propriété dont le type est une chaîne, le compilateur TypeScript réussit la vérification. Sinon, il lancera une erreur.

Interface en tant que fonctions

Les objets, y compris les classes, ne sont pas les seules choses qui peuvent utiliser des interfaces. Les interfaces TypeScript peuvent également être utilisées pour annoter des fonctions. Vous pouvez y parvenir en fournissant à l'interface une signature d'appel. Cela signifie que vous affectez l'interface à la signature de fonction qui contient la liste de paramètres avec les types et les types renvoyés.

Par exemple :

interface multiplyFunc {
// Specify only parameters and return type:
    (a: number, b: number, c: number): string;  
}
// Annotate the "multiply" function
// with "MultiplyFunc" interface:
const multiply: multiplyFunc = (a, b, c) => {
  return a * b * c
}

Une chose à propos des interfaces et des fonctions. Le nom des paramètres dans une interface ne doit pas nécessairement correspondre au nom des paramètres dans la fonction réelle. Vous pouvez également utiliser un nom similaire pour le paramètre d'interface et pour la déclaration de fonction. En utilisant l'ordre, TypeScript associera de manière appropriée les arguments à leurs types. Par exemple:

interface myFunction {
// Specify only parameters and return type:
    (a: string, b: Boolean, c: number): string;  
}
const myFunc: myFunction = (x, y, z) => {
  return `x is ${x}, y is ${y}, z is ${z}`
}
// TypeScript will correctly infer "a" to be number,
// "b" to be string and "c" to be boolean.

Aussi, lisez: Coût de développement d'une application Web : la répartition des prix de 2021

Interface en tant que types de classe

Une classe crée un plan pour la façon dont un objet doit apparaître et se comporter, puis implémente ce plan en définissant des méthodes et en initialisant les attributs de classe. Par conséquent, lorsque nous créons une instance de la classe, nous obtenons un objet avec des attributs spécifiés et des fonctions actionnables.

L'interface avec les classes JavaScript est également possible avec TypeScript. L'implémentation des classes, en revanche, est légèrement différente. L'interface est toujours spécifiée après le nom, dans ce cas, le nom de la classe. Cependant, vous n'utilisez pas de deux-points entre le nom de la classe et l'interface.

Au lieu de cela, vous mettez simplement à jour les deux-points avec le met en oeuvre mot-clé. Cela indique à TypeScript d'utiliser une interface qui vient après ce mot-clé dans chaque classe.

// Create interface Person:
interface Person {
  // Define some class properties
  // of type string and number:  
  name: string;
  weight? : number; 
  age: number;
  height: number;
  hairColor? : string;
}
  // Define class method that returns a string:
  sayHello: () => string;
}

// Annotate the class "Myself" with the "Person" interface:
class Myself implements Person { 
   name: string;
   weight? : number;
   age: number;
   height: number;
  hairColor? : string;
}

  // Create constructor and assign existing properties:
  constructor(name: string, age: number, weight? : number,  hairColor? : string,    height: number) {
    this.name = name
    this.weight = weight
    this.hairColor = hairColor
    this.age = age
    this.height = height 
  }

  // Define required class method:
  sayHello() {
    return `Hello, my name is ${this.name}.`
  }
}

Propriétés en lecture seule

Vous souhaiterez peut-être empêcher la mise à jour de certains attributs lors de la création d'un objet. Les interfaces TypeScript peuvent également être utilisées pour indiquer cet objectif. le lecture seulement mot-clé est utilisé avant le nom de la propriété pour accomplir cela. Cela indique à TypeScript que la propriété suivante est une propriété en lecture seule. Vous ne pouvez définir la valeur de la propriété readonly lors de l'initialisation que si vous utilisez l'interface pour annoter un objet. Le compilateur TypeScript générera une erreur si vous essayez de modifier la valeur de la propriété ultérieurement.

interface CarProperties {
    readonly length: number;
    readonly width: number;
    readonly wheelbase: number;
    readonly seatingCapacity: number;
}

Les propriétés en lecture seule ne peuvent pas être modifiées après avoir été initialisées. Les attributs longueur, largeur, empattement et nombre de places assises ne peuvent jamais être modifiés après avoir été initialisés avec une valeur définie.

Aussi, lisez: Principales erreurs de développement d'applications Web à éviter en 2022

Extension des interfaces

Les interfaces d'extension peuvent étendre n'importe quelle autre interface pour importer les propriétés de cette interface. Cela aide à créer des composants petits et réutilisables. Lors de l'extension des interfaces avec plusieurs interfaces, nous devons les séparer par des virgules. Nous utilisons des mots clés étendus entre la première interface et la seconde Interface pour étendre leurs propriétés.

// Create "Person" interface:
interface Person {
  name: string;
}

// The "Male" interface created extends the "Person" interface:
interface Male extends Person {
  gender: 'Male';
}
// In terms of Interface, this means:
// interface Male {
//   name: string;
//   gender: 'Male';
// }

// Now the "Female" interface is created to extend the "Person" interface:
interface Female extends Person {
  gender: 'Female';
}
// This Interface mean:
// interface Female {
//   name: string;
//   gender: 'Female';
// }

// Now the "Boy" interface is created to extend both “Male” and "Person" interfaces:
interface Boy extends Person, Male {
  age: number;
}
// which usually mean:
// interface Boy {
//   age: number;
//   gender: 'Male';
//   name: string;
// }

// Now the "Girl" interface is created to extend both "Female" and "Person" interfaces:
interface Girl extends Person, Female {
  age: number;
}
// which converts to:
// interface Girl {
//   age: number; 
//   gender: 'Female';
//   name: string;
// }

const akshay: Person = {
  name: 'Akshay'
}

const suraj: Male = {
  name: Suraj,
  gender: 'Male'
}

const sarah: Female = {
  name: 'Sarah',
  gender: 'Female'
}

const ahmad: Boy = {
  name: ‘Ahmad’,
  gender: 'Male',
  age: 26
}

const aayat: Girl = {
  name: 'Aayat',
  gender: 'Female',
  age: 18
}

Types indexables

Les objets indexés sont les objets dont les propriétés sont accessibles à l'aide d'une signature d'index telle que obj[`propriété']. C'est le moyen standard d'accéder aux éléments du tableau, mais vous pouvez également le faire pour les objets. Par exemple, nous pouvons définir un type sélectionnezVoiture comme:

Interface selectCar{
[index: number]: string
}
let cars: selectCar = ['Hatchback', 'Sedan', 'Land Rover', 'Premium']
console.log('Element at position 1', cars[1])       // 'Sedan'

Prenons un autre exemple :

L'interface avec le nom PersonneObjet définit la forme d'un objet avec clés utilisé comme type de chaîne et les valeurs de l'objet peuvent être n'importe quel type de données. Ici le key La propriété n'est utilisée que comme espace réservé car elle est entre crochets.

// declare indexable interface types
Interface PersonObject {
	[key: string]: any;
}

// declare few objects of type ‘PersonObject’
Let akshay: PersonObject = { name: “Akshay Bisht”, age: 27 };
Let ahmad: PersonObject = { name: “Ahmed”, 1: 26 };

// print values
console.log(‘akshay == > ’, akshay);	
--> akshay = = > { name : ‘Akshay Bisht’, age: 27 }
console.log(‘ahmed == > ’, ahmed);
--> ahmed = = > { name : ‘Ahmed’, 1: 26 }

Aussi, lisez: Comment appeler l'API Web avec le crochet useEffect dans React TypeScript ?

Interfaces génériques

TypeScript vous permet également de créer ce que l'on appelle "interfaces génériques". Ces interfaces vous permettent de spécifier le type de propriété en fonction d'un ou plusieurs paramètres que vous mettez à la disposition de l'interface lorsque vous l'utilisez. Les génériques TypeScript sont utilisés lorsque vous devez créer des composants génériques qui fonctionnent avec plusieurs types de données.

Par exemple, nous ne voulons pas limiter une fonction à n'accepter que des nombres comme paramètres d'entrée. Il doit être étendu en fonction des cas d'utilisation pour accepter des types distincts. La spécification des interfaces génériques se fait à l'aide de chevrons (<>) comme indiqué dans l'exemple ci-dessous.

let cars: CarSpecification<CarModels> = Stack
let carModels = [
    {
        company: 'Tata',
        modelid: 1,
        length: 112,
    },
]
let newCar = new cars(carModels)
console.log(newCar)        --- >   // prints the value of `carModels`

Using Generics in Asynchronous tasks: 
// Create interface for PersonObject:
interface PersonObject {
  name: string;
  email: string;
}

// Create a generic interface:
interface ApiData<T> {
  payload: T[];
  code: number;	
  date: Date;
}

// Create function to fetch API
async function fetchAPI() {
  // Use ApiData "interface" and pass the "UserData" interface as argument (for T argument):
  const data: ApiData<UserData> = await fetch('/URL_endpoints')

  // The "ApiData<UserData>" converts to:
  // interface ApiDatae<T> {
  //   code: number;
  //   date: Date;
  //   payload: UserData[];
  //  }
}

Pourquoi utiliser des interfaces ?

Un exemple précis : Les interfaces sont un moyen productif de spécifier les types auxquels les autres codes doivent répondre. Les interfaces permettent au JavaScript de connaître la version typée des objets qui doivent être utilisés dans la bibliothèque de code.

Supposons que nous écrivions une sorte de code de bibliothèque, ce qui signifie que nous devons écrire ce code car il est également valable pour les objets, les objets qui ont un certain ensemble de propriétés. Le moyen le plus efficace est de spécifier ces propriétés dans une interface (pas d'implémentation, juste une description) et d'utiliser les références aux objets pour implémenter l'interface dans notre code de bibliothèque.

Ce qu'il fait, c'est permettre à n'importe quelle personne aléatoire de créer une classe qui implémente cette interface, et d'utiliser un objet de la classe créée et de l'implémenter, notre code doit fonctionner avec.

Conclusion

Les interfaces sont le moyen le plus efficace de définir des types dans TypeScript. Voyons un petit résumé de ce que nous avons appris dans ce tutoriel :

• Les interfaces définissent les spécifications des entités, les types d'objets et l'implémentation à l'aide de fonctions ou de classes. Nous pouvons spécifier des propriétés facultatives sur une interface en utilisant '?' et utilisez le mot-clé 'readonly' pour les propriétés qui ne peuvent pas être modifiées (propriétés en lecture seule) dans le nom de la propriété.

• Le compilateur TypeScript vérifie en outre les propriétés d'abondance sur un article et génère une erreur en supposant qu'un élément contient une propriété déjà définie dans l'interface.

• Nous avons appris à définir des propriétés indexables, des paramètres optionnels, à étendre des interfaces à l'aide d'interfaces.

• Les classes et les fonctions peuvent également être implémentées avec une interface. L'interface contient la définition uniquement pour les variables d'instance d'une classe.

• Les interfaces peuvent également être utilisées pour importer les propriétés d'autres interfaces, nous le faisons en utilisant le mot clé extend.

• Nous pouvons également créer les composants réutilisables que nous pouvons utiliser à plusieurs reprises dans notre bibliothèque de code en utilisant les génériques avec les interfaces.

[sc name="Web Development"] [add_newsletter] [add_related_page_diff_contents blog_cat = "web-application"]