Typ und Schnittstelle in Typescript verstehen

Schnittstelle

Was ist Schnittstelle:

• Eine Schnittstelle ist eine Möglichkeit, die Form oder Struktur eines Objekts in Typescript zu definieren.
• Es wird hauptsächlich verwendet, um den Bauplan für Objekte zu beschreiben und sicherzustellen, dass sie einer bestimmten Struktur entsprechen.

Hauptmerkmale:

1. Wird für die Objektstruktur verwendet

• Definiert Eigenschaften, Methoden und deren Typen.

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

2. Unterstützt Erweiterung:

• Schnittstelle kann andere Schnittstellen erweitern, um Eigenschaften zu erben.

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

3. Die Klasse kann Schnittstellen implementieren:

• Erzwingt, dass eine Klasse die Schnittstellenstruktur einhält.

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);

Ausgabe:

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

4. Funktion kann deklariert werden

• Schnittstellen können Funktionssignaturen deklarieren

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

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

Typ

Was ist Typ:

• Ein Typ ist eine flexible Möglichkeit, einen Typalias für fast alles in Typescript zu definieren.
• Es kann Objekte, Vereinigungen, Schnittmengen, Tupel und mehr beschreiben.

Hauptmerkmale:

1. Alias ​​für jeden Typ:

• Kann primitive Typen, Objekte oder sogar Vereinigungen und Schnittmengen definieren.

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

2. Unterstützen Sie Kreuzungstypen:

• Kombinieren Sie mehrere Typen zu einem

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

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

3. Unterstützen Sie Tupel:

• Kann Arrays fester Länge mit spezifischen Typen für jedes Element definieren.

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

4. Kann nicht wieder geöffnet werden:

• Im Gegensatz zu Schnittstellen können Sie einen vorhandenen Typ nicht neu deklarieren oder erweitern.

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

Hauptunterschiede zwischen Schnittstelle und Typ

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

Aspekt Schnittstelle Typ Nutzung Objektstruktur definieren Flexibel: Es können Objekte, Vereinigungen, Schnittmengen und Tupel definiert werden. Erweiterbarkeit Kann mit extends erweitert werden Kann mit & (Schnittpunkt) kombiniert werden. Wiedereröffnung/Erklärung Kann erneut geöffnet werden, um neue Eigenschaften hinzuzufügen. Kann nicht erneut geöffnet werden. Primitiver Typ Primitive können nicht direkt dargestellt werden. Kann ein Alias ​​für ein Primitiv sein (z. B. Typ-ID = Zeichenfolge); Union- und Typle-Unterstützung Nicht unterstützt. Vollständig unterstützt

Wann sollte man Benutzeroberfläche vs. Typ verwenden?

Benutzeroberfläche verwenden:

• Beim Beschreiben der Form eines Objekts oder beim Arbeiten mit Klassen.

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

Verwendungsart:

• Beim Definieren von Union oder Tupeln oder erweiterten Typdefinitionen.

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

Kombinationstyp:

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);

Best Practice:

1. Verwenden Sie Schnittstelle zum Beschreiben des Objekts und Typ für alles andere.
2. Verwenden Sie Typ für fortgeschrittenere Anwendungsfälle wie Vereinigungen oder Schnittmengen.
3. Wählen Sie Schnittstelle für Konsistenz, wenn Sie in einem Team arbeiten, das darauf verweist

Das obige ist der detaillierte Inhalt vonTyp und Schnittstelle in Typescript verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!