TypeScript-Interview: 20 Fragen und Antworten

TypeScript basiert auf derselben Syntax und Semantik, die Millionen von JavaScript-Entwicklern bekannt sind. TypeScript ermöglicht die Arbeit mit den neuesten und noch aufkommenden JS-Funktionen, einschließlich der in ECMAScript 2015 verfügbaren und der derzeit nur in Form von Sätzen vorhandenen. Zu diesen Merkmalen gehören beispielsweise asynchrone Funktionen und Dekoratoren. All dies soll dem Entwickler helfen, zuverlässige und moderne Anwendungen zu erstellen.

Das TypeScript-Programm wird in regulären JavaScript-Code kompiliert, der in jedem Browser oder in Node.js ausgeführt werden kann. Dieser Code wird von jeder JS-Engine verstanden, die ECMAScript 3 oder einen neueren Standard unterstützt.



Das Material, dessen Übersetzung wir heute veröffentlichen, enthält eine Diskussion über zwanzig Fragen, die möglicherweise jemanden stellen, der ein Interview bestehen wird und die Position des TypeScript-Programmierers beansprucht.

Frage Nr. 1 (1). Was ist TypeScript und warum wird es anstelle von JavaScript verwendet?

In Klammern wird nach der Fragennummer deren Komplexität angegeben und auf einer Fünf-Punkte-Skala bewertet.

TypeScript (TS) ist eine Obermenge von JavaScript (JS). Zu den Hauptmerkmalen zählen die Möglichkeit einer expliziten statischen Typzuweisung, die Unterstützung von Klassen und Schnittstellen. Einer der Hauptvorteile von TS gegenüber JS ist die Fähigkeit, in verschiedenen IDEs eine solche Entwicklungsumgebung zu erstellen, die es ermöglicht, direkt bei der Eingabe des Codes häufige Fehler zu identifizieren. Die Verwendung von TypeScript in großen Projekten kann die Zuverlässigkeit von Programmen erhöhen, die gleichzeitig in denselben Umgebungen bereitgestellt werden können, in denen reguläre JS-Anwendungen funktionieren.

Hier einige Details zu TypeScript:

• TypeScript unterstützt moderne Editionen von ECMAScript-Standards, deren Code unter Berücksichtigung der Möglichkeit seiner Ausführung auf Plattformen kompiliert wird, die ältere Versionen der Standards unterstützen. Dies bedeutet, dass der TS-Programmierer die Funktionen von ES2015 und neueren Standards wie Module, Pfeilfunktionen, Klassen, Spread-Operator, Destrukturierung nutzen und das ausführen kann, was er in vorhandenen Umgebungen tut, die diese Standards noch nicht unterstützen.
• TypeScript ist ein Add-On für JavaScript. In reinem JavaScript geschriebener Code ist gültiger TypeScript-Code.
• TypeScript erweitert JavaScript um die Möglichkeit, Typen statisch zuzuweisen. Das TS-Typ-System ist ziemlich umfangreich. Es enthält nämlich Schnittstellen, Aufzählungen, Hybridtypen, generische Typen, Vereinigungstypen und Schnittpunkttypen, Zugriffsmodifikatoren und vieles mehr. Die Verwendung von TypeScript erleichtert die Arbeit durch die Verwendung von Typinferenz.
• Die Verwendung von TypeScript im Vergleich zu JavaScript verbessert den Entwicklungsprozess erheblich. Tatsache ist, dass die IDE in Echtzeit Typinformationen vom TS-Compiler empfängt.
• Bei Verwendung des strengen null (hierfür wird das Compiler-Flag --strictNullChecks verwendet) erlaubt der TypeScript-Compiler nicht undefined Variablen der Typen, in denen in diesem Modus die Verwendung dieser Werte nicht zulässig ist, null und undefined --strictNullChecks .
• Um TypeScript verwenden zu können, müssen Sie den Projekterstellungsprozess organisieren, der die Phase des Kompilierens von TS-Code in JavaScript umfasst. Der Compiler kann eine Quellzuordnung in die von ihm generierten JS-Dateien einbetten oder separate .map-Dateien erstellen. Auf diese Weise können Sie Haltepunkte festlegen und die Werte von Variablen während der Programmausführung untersuchen, indem Sie direkt mit TypeScript-Code arbeiten.
• TypeScript ist ein Open Source- Microsoft-Projekt, das unter der Apache 2-Lizenz veröffentlicht wurde. Der Initiator der TypeScript-Entwicklung ist Anders Halesberg. Er ist an der Entwicklung von Turbo Pascal, Delphi und C # beteiligt.

→ Quelle

Frage Nr. 2 (1). Erzählen Sie uns von generischen Typen in TypeScript.

Mit verallgemeinerten Typen (Generika) können Sie Komponenten oder Funktionen erstellen, die mit verschiedenen Typen und nicht mit einem Typ arbeiten können. Betrachten Sie ein Beispiel:

 /**       */ class Queue<t> { private data = []; push = (item: T) => this.data.push(item); pop = (): T => this.data.shift(); } const queue = new Queue<number>(); queue.push(0); queue.push("1"); //  :      ,      

→ Quelle

Frage Nr. 3 (2). Unterstützt TypeScript alle Prinzipien der objektorientierten Programmierung?

Ja, das tut es. Es gibt vier Grundprinzipien der objektorientierten Programmierung:

• Kapselung
• Vererbung
• Abstraktion
• Polymorphismus

Mit den einfachen und übersichtlichen TypeScript-Tools können Sie all diese Prinzipien implementieren.

→ Quelle

Frage Nr. 4 (2). Wie kann man in TypeScript Werte auf Gleichheit null und undefiniert prüfen?

Um solche Überprüfungen durchzuführen, reicht es aus, die folgende Konstruktion zu verwenden:

 if (value) { } 

Der Ausdruck in Klammern ist true wenn er nicht aus der folgenden Liste stammt:

• null
• undefined
• NaN
• Leere Leitung
• 0
• false

TypeScript unterstützt dieselben Typkonvertierungsregeln wie JavaScript.

→ Quelle

Frage Nr. 5 (2). Wie implementiere ich Klasseneigenschaften, die Konstanten in TypeScript sind?

Wenn Sie in TypeScript Klasseneigenschaften deklarieren, können Sie das Schlüsselwort const nicht verwenden. Wenn Sie versuchen, dieses Schlüsselwort zu verwenden, wird die folgende Fehlermeldung angezeigt: A class member cannot have the 'const' keyword . TypeScript 2.0 verfügt über einen readonly Modifikator, mit dem Sie schreibgeschützte Klasseneigenschaften erstellen können:

 class MyClass {   readonly myReadonlyProperty = 1;   myMethod() {       console.log(this.myReadonlyProperty);   } } new MyClass().myReadonlyProperty = 5; // ,        

→ Quelle

Frage Nr. 6 (2). Was sind .map-Dateien in TypeScript?

Dateien mit der Erweiterung .map speichern Quellzuordnungen, die Daten zur Korrespondenz von in TypeScript geschriebenem Code mit auf dieser Basis erstelltem JavaScript-Code enthalten. Viele Debugger können mit dieser Datei arbeiten (z. B. Visual Studio und die Chrome-Entwicklertools). Dies ermöglicht es beim Debuggen, mit dem Quellcode von TypeScript-Programmen und nicht mit deren JS-Entsprechungen zu arbeiten.

→ Quelle

Frage Nr. 7 (2). Was sind Getter und Setter in TypeScript?

TypeScript unterstützt Getter und Setter, mit denen Sie den Zugriff auf Mitglieder von Objekten steuern können. Sie geben dem Entwickler die Kontrolle über die Lese- und Schreibeigenschaften von Objekten.

 class foo { private _bar:boolean = false; get bar():boolean {   return this._bar; } set bar(theBar:boolean) {   this._bar = theBar; } } var myBar = myFoo.bar;  //    myFoo.bar = true;  //    

→ Quelle

Frage Nr. 8 (2). Kann TypeScript in der Serverentwicklung verwendet werden und wenn ja, wie?

In TypeScript geschriebene Programme eignen sich nicht nur für die Front-End-Entwicklung, sondern auch zum Erstellen von Serveranwendungen. Auf TS können Sie beispielsweise Programme für die Node.js-Plattform schreiben. Dies gibt dem Programmierer zusätzliche Werkzeuge zur Typsteuerung und ermöglicht es Ihnen, andere Funktionen der Sprache zu verwenden. Um Serveranwendungen auf TS zu erstellen, müssen Sie nur den richtigen Codeverarbeitungsprozess einrichten, bei dessen Eingabe TypeScript-Dateien empfangen werden. Die Ausgabe sind JavaScript-Dateien, die für die Ausführung in Node.js geeignet sind. Um eine solche Umgebung zu organisieren, müssen Sie zuerst den TypeScript-Compiler installieren:

 npm i -g typescript 

Die Compilerparameter werden mithilfe der Datei tsconfig.json festgelegt, die unter anderem den Zweck der Kompilierung und den Ort bestimmt, an dem vorgefertigte JS-Dateien abgelegt werden sollen. Im Allgemeinen ist diese Datei den Konfigurationsdateien von babel oder webpack sehr ähnlich:

 { "compilerOptions": {   "target": "es5",   "module": "commonjs",   "declaration": true,   "outDir": "build" } } 

Vorausgesetzt, der Compiler muss etwas verarbeiten, müssen Sie es ausführen:

 tsc 

Und schließlich müssen Sie unter Berücksichtigung der Tatsache, dass sich JS-Dateien, die für die Ausführung in der Node.js-Umgebung geeignet sind, im build Ordner befinden, den folgenden Befehl im Stammverzeichnis des Projekts ausführen:

 node build/index.js 

→ Quelle

Frage Nr. 9 (3). Erzählen Sie uns von den Hauptkomponenten von TypeScript.

TypeScript besteht aus drei Hauptkomponenten:

• Sprache. Dies ist aus Sicht der Entwickler der wichtigste Teil von TypeScript. "Sprache" ist die Syntax, Schlüsselwörter, mit denen Sie Programme in TypeScript schreiben können.
• Compiler TypeScript verfügt über einen Open Source-Compiler, ist plattformübergreifend, offen spezifiziert und in TypeScript geschrieben. Der Compiler konvertiert TypeScript-Code in JavaScript-Code. Wenn etwas mit dem Programm nicht stimmt, werden außerdem Fehlermeldungen angezeigt. Sie können mehrere TypeScript-Dateien in einer einzigen Ausgabe-JS-Datei kombinieren und Code-Maps erstellen.
• Hilfswerkzeuge. TypeScript-Hilfstools sollen den Entwicklungsprozess durch die Verwendung in verschiedenen IDEs erleichtern. Darunter befinden sich Visual Studio, VS Code , Sublime, verschiedene Tools zum schnellen Starten von TS-Code und andere.

→ Quelle

Frage Nr. 10 (3). Gibt es Fehler im von Ihnen angegebenen TypeScript-Code? Erklären Sie Ihre Antwort.

Hier ist das Code-Snippet:

 class Point {   x: number;   y: number; } interface Point3d extends Point {   z: number; } let point3d: Point3d = {x: 1, y: 2, z: 3}; 

Dieser Code enthält keine Fehler. Eine Klassendeklaration erstellt zwei Entitäten: Dies ist der Datentyp, der zum Instanziieren der Klasse verwendet wird, und die Konstruktorfunktion. Da Klassen Datentypen erstellen, können Sie sie dort verwenden, wo Sie Schnittstellen verwenden können.

→ Quelle


Ich liebe diesen Film wirklich.

Frage Nr. 11 (3). Erzählen Sie uns von der Verwendung von Eigenschaftsdekoratoren in TypeScript.

Dekorateure können verwendet werden, um das Verhalten von Klassen zu ändern, und Sie können noch mehr davon profitieren, wenn Sie sie mit einem beliebigen Framework verwenden. Wenn Ihr Framework beispielsweise über Methoden verfügt, die auf den Zugriff beschränkt sind (z. B. nur für den Administrator), ist es einfach, den @admin Methodendekorator zu schreiben, der Benutzern, die keine Administratoren sind, den Zugriff auf die entsprechenden Methoden untersagt. Sie können einen @owner Dekorator erstellen, mit dem Sie ein Objekt nur an seinen Eigentümer ändern können. So könnte die Verwendung von Dekorateuren aussehen:

 class CRUD {   get() { }   post() { }   @admin   delete() { }   @owner   put() { } } 

→ Quelle

Frage Nr. 12 (3). Kann TypeScript stark typisierte Funktionen als Parameter verwenden?

Betrachten Sie das folgende Beispiel:

 class Foo {   save(callback: Function) : void {       //        var result : number = 42; //             //      -  ,        number?       callback(result);   } } var foo = new Foo(); var callback = (result: string) : void => {   alert(result); } foo.save(callback); 

Ist es möglich, die Arbeit mit einem getippten Rückruf in der save zu organisieren? Schreiben Sie den Code neu, um dies zu demonstrieren.

In TypeScript können Sie einen Rückruftyp deklarieren und dann den Code neu schreiben:

 type NumberCallback = (n: number) => any; class Foo {   //    save(callback: NumberCallback): void {       console.log(1)       callback(42);   } } var numCallback: NumberCallback = (result: number) : void => {   console.log("numCallback: ", result.toString()); } var foo = new Foo(); foo.save(numCallback) 

→ Quelle

Frage Nr. 13 (3). Wie kann man in einem Modul deklarierte Klassen außerhalb des Moduls zugänglich machen?

In einem Modul deklarierte Klassen sind in diesem Modul verfügbar. Außerhalb kann kein Zugang zu ihnen erhalten werden.

 module Vehicle {   class Car {       constructor (           public make: string,           public model: string) { }   }   var audiCar = new Car("Audi", "Q7"); } //     var fordCar = Vehicle.Car("Ford", "Figo"); 

Im obigen Code tritt ein Fehler auf, wenn versucht wird, die Variable fordCar zu initialisieren. Um eine in einem Modul deklarierte Klasse außerhalb dieses Moduls zugänglich zu machen, müssen Sie das Schlüsselwort export :

 module Vehicle {   export class Car {       constructor (           public make: string,           public model: string) { }   }   var audiCar = new Car("Audi", "Q7"); } //       var fordCar = Vehicle.Car("Ford", "Figo"); 

→ Quelle

Frage Nr. 14 (3). Unterstützt TypeScript das Überladen von Funktionen?

TypeScript unterstützt das Überladen von Funktionen, aber die Implementierung dieses Mechanismus unterscheidet sich von der in anderen objektorientierten Sprachen. In TS erstellen sie nämlich nur eine Funktion und eine bestimmte Anzahl von Ansagen. Wenn ein solcher Code in JavaScript kompiliert wird, ist nur eine bestimmte Funktion sichtbar. Dieser Mechanismus funktioniert, weil JS-Funktionen aufgerufen werden können, indem ihnen eine andere Anzahl von Parametern übergeben wird.

 class Foo {   myMethod(a: string);   myMethod(a: number);   myMethod(a: number, b: string);   myMethod(a: any, b?: string) {       alert(a.toString());   } } 

→ Quelle

Frage Nr. 15 (4). Was ist falsch an dem Code, der Ihnen zur Verfügung gestellt wird?

Hier ist der fragliche Code:

 /* */ interface Fetcher {   getObject(done: (data: any, elapsedTime?: number) => void): void; } 

Es wird empfohlen, optionale Parameter in Rückrufen nur zu verwenden, wenn Sie die Konsequenzen eines solchen Schritts absolut genau verstehen. Dieser Code hat eine ganz bestimmte Bedeutung: Der Rückruf kann mit 1 oder 2 Argumenten aufgerufen werden. Der Autor des Codes wollte uns wahrscheinlich mitteilen, dass der Rückruf möglicherweise nicht auf den Parameter elapsedTime Um dies zu erreichen, können Sie jedoch jederzeit einen Rückruf erstellen, der weniger Argumente benötigt.

→ Quelle

Frage Nr. 16 (4). Wie überlade ich den Klassenkonstruktor in TypeScript?

Mit TypeScript können Sie viele Methodenvarianten deklarieren, es kann jedoch nur eine Implementierung geben. Diese Implementierung muss eine Signatur haben, die mit allen Varianten überladener Methoden kompatibel ist. Um den Klassenkonstruktor zu überladen, können Sie verschiedene Ansätze verwenden:

• Sie können den optionalen Parameter verwenden:
  
  

   class Box {   public x: number;   public y: number;   public height: number;   public width: number;   constructor();   constructor(obj: IBox);   constructor(obj?: any) {          this.x = obj && obj.x || 0       this.y = obj && obj.y || 0       this.height = obj && obj.height || 0       this.width = obj && obj.width || 0;   } } 

• Sie können die Standardeinstellungen verwenden:
  
  

   class Box {   public x: number;   public y: number;   public height: number;   public width: number;   constructor(obj : IBox = {x:0,y:0, height:0, width:0}) {          this.x = obj.x;       this.y = obj.y;       this.height = obj.height;       this.width = obj.width;   } } 

• Sie können zusätzliche Überladungen als statische Factory-Methoden verwenden:
  
  

   class Person {   static fromData(data: PersonData) {       let { first, last, birthday, gender = 'M' } = data       return new this(           `${last}, ${first}`,           calculateAge(birthday),           gender       )   }   constructor(       public fullName: string,       public age: number,       public gender: 'M' | 'F'   ) {} } interface PersonData {   first: string   last: string   birthday: string   gender?: 'M' | 'F' } let personA = new Person('Doe, John', 31, 'M') let personB = Person.fromData({   first: 'John',   last: 'Doe',   birthday: '10-09-1986' }) 

• Sie können den Unionstyp verwenden:
  
  

   class foo {   private _name: any;   constructor(name: string | number) {       this._name = name;   } } var f1 = new foo("bar"); var f2 = new foo(1); 

→ Quelle

Frage Nr. 17 (4). Was sind die Unterschiede zwischen Schnittstellen- und Typschlüsselwörtern in TypeScript?

Hier sind Beispiele für die Verwendung dieser Schlüsselwörter:

 interface X {   a: number   b: string } type X = {   a: number   b: string }; 

Im Gegensatz zu einer Schnittstellendeklaration, die immer einen benannten Typ eines Objekts darstellt, können Sie mit dem Schlüsselwort type einen Alias ​​für jede Art von Typ angeben, einschließlich primitiver Typen, Vereinigungstypen und Schnittpunkttypen.

Bei Verwendung des Schlüsselworts type anstelle des Schlüsselworts interface folgende Möglichkeiten verloren:

• Eine Schnittstelle kann in einem extends oder implements Ausdruck verwendet werden, ein Alias ​​für ein Objekttypliteral jedoch nicht.
• Eine Schnittstelle kann mehrere zusammengeführte Deklarationen haben. Bei Verwendung des Schlüsselworts type diese Funktion nicht verfügbar.

→ Quelle

Frage Nr. 18 (5). Erzählen Sie uns, wann TypeScript das Schlüsselwort declare verwendet.

Das Schlüsselwort declare wird in TypeScript verwendet, um Variablen zu deklarieren, deren Quelle möglicherweise eine Datei ist, die keine TypeScript-Datei ist.

Angenommen, wir haben eine Bibliothek namens myLibrary . Es gibt keine Datei mit TypeScript-Typdeklarationen, sondern nur den myLibrary Namespace im globalen Namespace. Wenn Sie diese Bibliothek in Ihrem TS-Code verwenden möchten, können Sie die folgende Konstruktion verwenden:

 declare var myLibrary; 

TypeScript weist myLibrary Variable myLibrary zu. Das Problem hierbei ist, dass Sie zum Zeitpunkt der Entwicklung keine intelligenten Hinweise für diese Bibliothek haben, obwohl Sie sie in Ihrem Code verwenden können. In dieser Situation können Sie einen anderen Ansatz verwenden, der zum gleichen Ergebnis führt. Wir sprechen über die Verwendung einer Variablen vom Typ any :

 var myLibrary: any; 

In beiden Fällen ist das Ergebnis beim Kompilieren des TS-Codes in JavaScript dasselbe, aber die declare ist besser lesbar. Die Verwendung dieses Schlüsselworts führt zur Erstellung der sogenannten externen Deklaration einer Variablen (Umgebungsdeklaration).

Frage Nr. 19 (5). Was sind externe Variablendeklarationen in TypeScript und wann sollten sie verwendet werden?

Eine externe Deklaration einer Variablen (Umgebungsdeklaration) ist ein Mechanismus, der den TypeScript-Compiler darüber informiert, dass ein Quellcode irgendwo außerhalb der aktuellen Datei vorhanden ist. Externe Anzeigen helfen bei der Integration von JavaScript-Bibliotheken von Drittanbietern in TS-Programme.

Diese Deklarationen werden in der Typdeklarationsdatei mit der Erweiterung .d.ts erstellt. Externe Variablen oder Module deklarieren wie folgt:

 declare module Module_Name { } 

Dateien, die externen Code enthalten, müssen wie folgt in die TS-Datei aufgenommen werden:

 /// <reference path=" Sample.d.ts"></reference> 

→ Quelle

Frage Nr. 20 (5). Kann ich automatisch TypeScript-Motive aus JS-Bibliotheken generieren?

JavaScript enthält nicht immer genügend Informationen, damit TypeScript automatisch auf Typen schließen kann. Daher ist es fast unmöglich, Typdeklarationen basierend auf JavaScript automatisch zu erstellen. Sie können dies jedoch mit den folgenden Tools versuchen:

• Microsoft / dts-gen ist das offizielle Tool, das von Microsoft als Ausgangspunkt für die Erstellung von Typdeklarationen verwendet wird.
• dtsmake ist ein vielversprechendes Entwicklungstool zum automatischen Erstellen von Typdeklarationen basierend auf JS-Dateien. Dies hängt vom Tern- Code-Analysesystem ab, mit dem einige Editoren den Mechanismus für die automatische Vervollständigung bei der Eingabe von JS-Code implementieren.

→ Quelle

Zusammenfassung

Wir hoffen, dass eine Diskussion der Fragen in diesem Material Ihnen hilft, TypeScript besser kennenzulernen, vielleicht auf das zu achten, was Sie zuvor nicht beachtet haben, und, wenn Sie sich auf ein Interview vorbereiten, Ihre Chancen erhöht, es erfolgreich zu bestehen.

Liebe Leser! Welche Fragen würden Sie dem Interviewer stellen, der sich für eine Stelle bewirbt, für die TypeScript-Kenntnisse erforderlich sind?


- Und was ist der Rabatt für diesen Promo-Code ?!
- Es scheint 7%. Ich werde prüfen, ob Sie wollen ...
"Ja, du überprüfst." Meiner Meinung nach ist der Rabatt etwas überteuert!
...
- Entschuldigung, ich habe mich ein wenig über den Rabatt geirrt. 10% auf allen virtuellen Servern.