Technische Interviewfragen – Teil Typoskript

Einführung

Hallo, hallo!! :D

Ich hoffe, es geht euch allen gut!

Wie wir uns wirklich fühlen:

Ich bin zurück mit dem zweiten Teil dieser Serie. ?

In diesem Kapitel befassen wir uns mit den „Typescript“-Fragen, mit denen ich in Interviews konfrontiert wurde.

Ich werde das Intro kurz halten, also lasst uns gleich loslegen!

## Fragen
1. Was sind Generika im Typoskript? Was ist ?
2. Was sind die Unterschiede zwischen Schnittstellen und Typen?
3. Was sind die Unterschiede zwischen „any“, „null“, „unknown“ und „never“?

---

Frage 1: Was sind Generika im Typoskript? Was ist ?

Die kurze Antwort lautet...

Generika in TypeScript ermöglichen es uns, wiederverwendbare Funktionen, Klassen und Schnittstellen zu erstellen, die mit einer Vielzahl von Typen arbeiten können, ohne einen bestimmten Typ angeben zu müssen. Dies hilft zu vermeiden, dass „any“ als Sammeltyp verwendet wird.

Die Syntax wird verwendet, um einen generischen Typ zu deklarieren, Sie können aber auch , oder einen anderen Platzhalter verwenden.

Wie funktioniert es?

Lassen Sie es uns anhand eines Beispiels aufschlüsseln.

Angenommen, ich habe eine Funktion, die einen Parameter akzeptiert und ein Element desselben Typs zurückgibt. Wenn ich diese Funktion mit einem bestimmten Typ schreibe, würde sie so aussehen:

function returnElement(element: string): string {
 return element;
}


const stringData = returnElement("Hello world");

Ich weiß, dass der Typ von stringData „string“ sein wird, weil ich ihn deklariert habe.

Aber was passiert, wenn ich einen anderen Typ zurückgeben möchte?

const numberData = returnElement(5);

Ich erhalte eine Fehlermeldung, da der Typ vom deklarierten abweicht.

Die Lösung könnte darin bestehen, eine neue Funktion zu erstellen, um einen Zahlentyp zurückzugeben.

function returnNumber(element: number): number {
 return element;
}

Dieser Ansatz würde funktionieren, könnte aber zu doppeltem Code führen.

Ein häufiger Fehler, um dies zu vermeiden, ist die Verwendung von „any“ anstelle eines deklarierten Typs, aber das verfehlt den Zweck der Typsicherheit.

function returnElement2(element: any): any {
 return element;
}

Die Verwendung von any führt jedoch dazu, dass wir die Typsicherheits- und Fehlererkennungsfunktion von Typescript verlieren.
Wenn Sie außerdem damit beginnen, welche zu verwenden, wann immer Sie doppelten Code vermeiden müssen, verliert Ihr Code an Wartbarkeit.

Genau dann ist es von Vorteil, Generika zu verwenden.

function returnGenericElement<T>(element: T): T {
 return element;
}

Die Funktion empfängt ein Element eines bestimmten Typs; Dieser Typ ersetzt den generischen Typ und bleibt dies während der gesamten Laufzeit.

Dieser Ansatz ermöglicht es uns, doppelten Code zu eliminieren und gleichzeitig die Typsicherheit zu wahren.

function returnElement(element: string): string {
 return element;
}


const stringData = returnElement("Hello world");

Aber was ist, wenn ich eine bestimmte Funktion benötige, die aus einem Array stammt?

Wir könnten das Generikum als Array deklarieren und es so schreiben:

const numberData = returnElement(5);

Dann

function returnNumber(element: number): number {
 return element;
}

Die deklarierten Typen werden durch den als Parameter bereitgestellten Typ ersetzt.

Wir können im Unterricht auch Generika verwenden.

function returnElement2(element: any): any {
 return element;
}

Ich möchte zu diesem Code drei Punkte anmerken:

1. add ist eine anonyme Pfeilfunktion (die ich im ersten Kapitel besprochen habe).
2. Das Generikum kann , oder sogar genannt werden, wenn Sie dies bevorzugen.
3. Da wir den Typ noch nicht angegeben haben, können wir keine Operationen innerhalb der Klassen implementieren. Daher müssen wir die Klasse instanziieren, indem wir den Typ des Generikums deklarieren und dann die Funktion implementieren.

So sieht es aus:

function returnGenericElement<T>(element: T): T {
 return element;
}

Und noch eine letzte Sache, bevor ich diese Frage beende.
Denken Sie daran, dass Generika eine Funktion von Typescript sind. Das bedeutet, dass die Generika gelöscht werden, wenn wir sie in Javascript kompilieren.

Von

const stringData2 = returnGenericElement("Hello world");


const numberData2 = returnGenericElement(5);

zu

function returnLength<T>(element: T[]): number {
 return element.length;
}

---

Frage 2: Was sind die Unterschiede zwischen Schnittstellen und Typen?

Die kurze Antwort lautet:

1. Das Zusammenführen von Deklarationen funktioniert mit Schnittstellen, jedoch nicht mit Typen.
2. Sie können keine Implementierungen in einer Klasse mit Union-Typen verwenden.
3. Sie können keine Erweiterungen mit einer Schnittstelle verwenden, die Union-Typen verwendet.

Was den ersten Punkt betrifft: Was meine ich mit der Zusammenführung von Erklärungen?

Lass mich dir zeigen:
Ich habe dieselbe Schnittstelle zweimal definiert, während ich sie in einer Klasse verwendet habe. Die Klasse übernimmt dann die in beiden Definitionen deklarierten Eigenschaften.

const stringLength = returnLength(["Hello", "world"]);

Dies tritt bei Typen nicht auf. Wenn wir versuchen, einen Typ mehr als einmal zu definieren, gibt TypeScript einen Fehler aus.

class Addition<U> {
 add: (x: U, y: U) => U;
}

In Bezug auf die folgenden Punkte unterscheiden wir zwischen Vereinigungs- und Schnittmengentypen:

Union-Typen ermöglichen es uns anzugeben, dass ein Wert einer von mehreren Typen sein kann. Dies ist nützlich, wenn eine Variable mehrere Typen enthalten kann.

Überschneidungstypen ermöglichen es uns, Typen zu einem zu kombinieren. Es wird mit dem &-Operator definiert.

const operation = new Addition<number>();


operation.add = (x, y) => x + y; => We implement the function here


console.log(operation.add(5, 6)); // 11

Gewerkschaftstyp:

function returnGenericElement<T>(element: T): T {
 return element;
}

Kreuzungstyp:

function returnElement(element: string): string {
 return element;
}


const stringData = returnElement("Hello world");

Wenn wir versuchen, das Schlüsselwort „implements“ mit einem Union-Typ wie „Animal“ zu verwenden, gibt TypeScript einen Fehler aus. Dies liegt daran, dass „implements“ eine einzelne Schnittstelle oder einen einzelnen Typ anstelle eines Union-Typs erwartet.

const numberData = returnElement(5);

Typescript ermöglicht uns die Verwendung von „Implementierungen“ mit:

a. Kreuzungstypen

function returnNumber(element: number): number {
 return element;
}

b. Schnittstellen

function returnElement2(element: any): any {
 return element;
}

function returnGenericElement<T>(element: T): T {
 return element;
}

c. Einzeltyp.

const stringData2 = returnGenericElement("Hello world");


const numberData2 = returnGenericElement(5);

Das gleiche Problem tritt auf, wenn wir versuchen, Extends mit einem Union-Typ zu verwenden. TypeScript gibt einen Fehler aus, da eine Schnittstelle einen Union-Typ nicht erweitern kann. Hier ist ein Beispiel

function returnLength<T>(element: T[]): number {
 return element.length;
}

Sie können einen Union-Typ nicht erweitern, da er mehrere mögliche Typen darstellt und unklar ist, welche Typeigenschaften vererbt werden sollen.

ABER Sie können einen Typ oder eine Schnittstelle erweitern.

const stringLength = returnLength(["Hello", "world"]);

Außerdem können Sie einen einzelnen Typ erweitern.

class Addition<U> {
 add: (x: U, y: U) => U;
}

---

Frage 3: Was sind die Unterschiede zwischen „any“, „null“, „unknown“ und „never“?

Kurze Antwort:

Alle => Es handelt sich um eine Top-Typ-Variable (auch Universaltyp oder Universal-Supertyp genannt). Wenn wir „any“ in einer Variablen verwenden, kann die Variable jeden Typ enthalten. Es wird normalerweise verwendet, wenn der spezifische Typ einer Variablen unbekannt ist oder sich voraussichtlich ändern wird. Allerdings gilt die Verwendung von „any“ nicht als bewährte Vorgehensweise; Es wird empfohlen, stattdessen Generika zu verwenden.

const operation = new Addition<number>();


operation.add = (x, y) => x + y; => We implement the function here


console.log(operation.add(5, 6)); // 11

Während alle Vorgänge wie das Aufrufen von Methoden zulassen, erkennt der TypeScript-Compiler zu diesem Zeitpunkt keine Fehler. Zum Beispiel:

function returnGenericElement<T>(element: T): T {
 return element;
}

Sie können einer beliebigen Variablen einen beliebigen Wert zuweisen:

function returnGenericElement(element) {
 return element;
}

Darüber hinaus können Sie eine beliebige Variable einer anderen Variablen mit einem definierten Typ zuweisen:

interface CatInterface {
 name: string;
 age: number;
}


interface CatInterface {
 color: string;
}


const cat: CatInterface = {
 name: "Tom",
 age: 5,
 color: "Black",
};

---

Unbekannt => Dieser Typ kann, wie jeder andere auch, jeden Wert annehmen und wird auch als Top-Typ angesehen. Wir verwenden es, wenn wir den Variablentyp nicht kennen, er wird jedoch später zugewiesen und bleibt während der Laufzeit gleich. Unknow ist ein weniger freizügiger Typ als jeder andere.

type dog = {
 name: string;
 age: number;
};


type dog = { // Duplicate identifier 'dog'.ts(2300)
 color: string;
};


const dog1: dog = {
 name: "Tom",
 age: 5,
 color: "Black", //Object literal may only specify known properties, and 'color' does not exist in type 'dog'.ts(2353)
};

Der direkte Aufruf von Methoden auf unbekannt führt zu einem Fehler bei der Kompilierung:

type cat = {
 name: string;
 age: number;
};


type dog = {
 name: string;
 age: number;
 breed: string;
};

Bevor wir es verwenden, sollten wir Prüfungen durchführen wie:

type animal = cat | dog;

Wie bei jeder anderen Variable könnten wir auch der Variablen einen beliebigen Typ zuweisen.

type intersectionAnimal = cat & dog;

Wir können den unbekannten Typ jedoch nicht einem anderen Typ zuordnen, sondern einem beliebigen oder unbekannten.

function returnElement(element: string): string {
 return element;
}


const stringData = returnElement("Hello world");

Dies zeigt uns einen Fehler an

---

Null => Die Variable kann beide Typen enthalten. Das bedeutet, dass die Variable keinen Wert hat.

const numberData = returnElement(5);

Der Versuch, einer Nullvariablen einen anderen Typ zuzuweisen, führt zu einem Fehler:

function returnNumber(element: number): number {
 return element;
}

---

Nie => Wir verwenden diesen Typ, um anzugeben, dass eine Funktion keinen Rückgabewert hat.

function returnElement2(element: any): any {
 return element;
}

---

Das Ende...

Wir schließen mit Typescript ab,

Für heute (?

Ich hoffe, das hat jemandem geholfen.

Wenn Sie Fragen zu technischen Vorstellungsgesprächen haben, die ich Ihnen erklären soll, können Sie mir diese gerne in den Kommentaren mitteilen. ??

Haben Sie eine tolle Woche?

Das obige ist der detaillierte Inhalt vonTechnische Interviewfragen – Teil Typoskript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!