Drei (drei) ts-nicht-grundlegende Typen (Schnittstellen)

veranschaulichen

In objektorientierten Sprachen ist die Schnittstelle ein sehr wichtiges Konzept. Sie ist eine Abstraktion des Verhaltens und die spezifischen Aktionen müssen von Klassen implementiert werden.

Die Schnittstelle in TypeScript ist ein sehr flexibles Konzept. Sie dient nicht nur dazu, einen Teil des Verhaltens einer Klasse zu abstrahieren, sondern wird auch häufig zur Beschreibung der „Form“ eines Objekts verwendet. (Das heißt, die Eigenschaften oder Methoden im Objekt beschreiben)

Grundlegende Verwendung

Deklarieren einer Schnittstelle mithilfe von interfaceSchlüsselwörtern

interface User {
    
    
    name: string,
    age: number,
    getName: () => string
}
let person: User = {
    
     
    name: 'fufu', 
    age: 20, 
    getName: function(): string {
    
     
        return this.name
     }
 }

Definieren Sie schreibgeschützte Eigenschaften

Verwenden Sie readonlySchlüsselwörter, um die Parameter in der Schnittstelle so einzuschränken, dass sie schreibgeschützt sind. Objekte, die diese Schnittstelle verwenden, können lesbaren Eigenschaften nur dann Werte zuweisen, wenn sie zum ersten Mal zugewiesen werden.

interface User {
    
    
	readonly name: string,
	readonly age: number
}
let person: User = {
    
    name: 'fufu', age: 20}
person.name = 'dandan'  // Cannot assign to 'name' because it is a read-only property.

Manchmal denken wir, wenn wir eine schreibgeschützte Schnittstelle definieren, warum deklarieren wir dann nicht ein Objekt direkt mit const?

readonly„TS“ wird in der Schnittstelle vorgeschlagen und verbietet nur Änderungen nach der Parametrierung in der Schnittstelle, während constes6
es für Variablen vorschlägt und keine Änderung von Variablen zulässt. Zweitens erklärt const, dass ein Objekt nur die Änderung der Speicheradresse nicht zulässt, die darin enthaltenen Attribute jedoch geändert werden können.

Der einfachste Weg, festzustellen, ob readonly oder const verwendet werden soll, besteht darin, es als Variable oder als Eigenschaft zu verwenden. Bei Verwendung als Variable verwenden Sie const. Bei Verwendung als Attribut verwenden Sie readonly.

Definieren Sie unsichere Eigenschaften

Oft sind wir nicht sicher, ob dieses Attribut im Objekt vorhanden ist. Zu diesem Zeitpunkt können wir ?zur Erklärung Schlüsselwörter verwenden

interface User {
    
    
	name?: string,
	age: number
}
let person: User = {
    
    age: 20}

Indexsignatur

Wenn also ein Objekt viele Attribute hat und diese alle unsicher sind, wie sollten wir sie dann deklarieren? Bei Verwendung ?müssen alle möglichen Attribute definiert werden, was sicherlich unvernünftig ist. Wir können es mithilfe der Indexsignatur definieren.

interface Person {
    
    
    name: string;
    age: number; 
    [propName: string]: any;
}

let tom: Person = {
    
    
    name: 'Tom',
    age: 25,
    height: 170
};

Array definieren

Zusätzlich zur Definition von Objektstrukturen können Schnittstellen auch zur Definition von Arrays verwendet werden, ähnlich wie Tupel.

interface arr  {
    
    
    0: number,
    1: string
}

let arr1: arr = [1, '1']
arr1.push(1) // Property 'push' does not exist on type 'arr'.

Natürlich unterscheidet es sich sicherlich von Tupeln. Obwohl ein Tupel ein Array ist, das einen bekannten Typ und eine bekannte Länge definiert, pushkann die Länge des Arrays dennoch damit geändert werden. interfaceAuch wenn es verwendet wird push, kann die Array-Länge nicht geändert werden.

erben

Schnittstellen können erben und geerbt werden, und durch Vererbung können mehrere Schnittstellen gleichzeitig geerbt werden.

interface A {
    
    
    name: string
}

interface B {
    
    
    age: number
}

interface User extends A , B {
    
    
    gender: boolean
}

let user:User = {
    
    
    age: 20,
    name: 'fufu',
    gender: true
}

Beachten Sie, dass, wenn während des Vererbungsprozesses dasselbe Attribut, aber von unterschiedlichem Typ, gefunden wird, beurteilt wird, ob der aktuelle Typ mit dem vorherigen Typ kompatibel ist.

interface A {
    
    
    name: string
}

interface B {
    
    
    gender: boolean,
}

interface User extends A , B {
    
    
    gender: any, //如果设置为string则报错
    age: number
}

let user:User = {
    
    
    age: 20,
    name: 'fufu',
    gender: '1'
}

おすすめ

転載: blog.csdn.net/qq_44473483/article/details/134928872