Comprendre le type et l'interface dans Typescript

Interface

Qu'est-ce que l'interface :

• Une interface est un moyen de définir la forme ou la structure d'un objet dans Typescript.
• Il est principalement utilisé pour décrire le plan d'un objet, s'assurer qu'il adhère à une structure spécifique.

Principales caractéristiques :

1. Utilisé pour la structure des objets

• Définit les propriétés, la méthode et leurs types.

interface User {
username: string, 
password: string,
email?: string // this is optional property
}

2. Prise en charge de l'extension :

• L'interface peut étendre d'autres interfaces pour hériter des propriétés.

interface Address {
street: string,
city: string
}
interface User extends Address {
username: string,
password: string,
email?: string
}

3. La classe peut implémenter des interfaces :

• Oblige qu'une classe adhère à la structure de l'interface.

class Admin implements User {
  username: string
  password: string
  email?: string
  street: string
  city: string

  constructor(username: string, password:string, street:string, city:string, email?:string){
    this.username = username;
    this.password = password;
    this.email = email || '';
    this.street = street;
    this.city = city;
  };
}

var aAdmin = new Admin("user1", "123", "3/2 street", "hcmc");
console.log(aAdmin);

sortie :

Admin {
  username: 'user1',
  password: '123',
  email: '',
  street: '3/2 street',
  city: 'hcmc'
}

4. Peut déclarer une fonction

• Les interfaces peuvent déclarer des signatures de fonctions

interface AddUser{
  (name: string) : void;
}

const user : AddUser = (name) => console.log(`Hello ${name}`);

Taper

Qu'est-ce que le type :

• Un type est un moyen flexible de définir un alias de type pour presque tout dans Typescript.
• Il peut décrire des objets, des unions, des intersections, des tuples et bien plus encore.

Principales caractéristiques :

1. Alias ​​pour tout type :

• Peut définir des types primitifs, des objets ou même des unions et des intersections.

type UserType = {
  id: string,
  name: string
}
type ID = string | number; //Union type

2. Types d'intersections prises en charge :

• Combinez plusieurs types en un seul

type UserType = {
  id: string,
  name: string
}

type AddressType = {
  street: string,
  city: string,
}
type UserWithAddress = UserType & AddressType;

3. Tuples pris en charge :

• Peut définir des tableaux de longueur fixe avec des types spécifiques pour chaque élément.

type Coordinates = [number, number];
const point: Coordinates = [10, 20];

4. Ne peut pas être rouvert :

• Contrairement aux interfaces, vous ne pouvez pas redéclarer ou étendre un type existant.

class AdminType extends UserType {
  // ERROR: 'UserType' only refers to a type, but is being used as a value here.ts(2693)
}

Principales différences entre l'interface et le type

Aspect	Interface	Type
Usage	Define Object structure	Flexible: can be define objects, unions, intersections, tuples.
Extensibility	Can be extended using extends	Can be combined using & (intersection).
Reopen/Declartion	Can be reopened to add new properties.	Cannot be reopened.
Primitive Type	Cannot represent primitives directly.	Can alias primitive (e.g,.type ID = string);
Union and Typle Support	Not supported.	Fully supported

Aspect Interface Tapez ête> Utilisation Définir la structure de l'objet Flexible : peut définir des objets, des unions, des intersections, des tuples. Extensibilité Peut être étendu à l'aide de extends Peut être combiné en utilisant & (intersection). Réouverture/Déclaration Peut être rouvert pour ajouter de nouvelles propriétés. Ne peut pas être rouvert. Type primitif Impossible de représenter directement les primitives. Peut alias une primitive (par exemple, .type ID = string) ; Support Union et Typle Non pris en charge. Entièrement pris en charge

Quand utiliser l’interface utilisateur ou le type

Utiliser l'interface :

• Lors de la description de la forme d'un objet ou lorsque vous travaillez avec des classes.

interface User {
username: string, 
password: string,
email?: string // this is optional property
}

Type d'utilisation :

• Lors de la définition d'unions ou de tuples, ou de toute définition de type avancée.

interface Address {
street: string,
city: string
}
interface User extends Address {
username: string,
password: string,
email?: string
}

Type de combinaison :

class Admin implements User {
  username: string
  password: string
  email?: string
  street: string
  city: string

  constructor(username: string, password:string, street:string, city:string, email?:string){
    this.username = username;
    this.password = password;
    this.email = email || '';
    this.street = street;
    this.city = city;
  };
}

var aAdmin = new Admin("user1", "123", "3/2 street", "hcmc");
console.log(aAdmin);

Meilleure pratique :

1. Utilisez interface pour décrire l'objet et Type pour tout le reste.
2. Utilisez Type pour des cas d'utilisation plus avancés comme les unions ou les intersections.
3. Choisissez interface par souci de cohérence si vous travaillez dans une équipe qui la référence

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!