Entretien de TypeScript: 20 questions et réponses

TypeScript est basé sur la même syntaxe et la même sémantique que des millions de développeurs JavaScript connaissent. TypeScript permet de travailler avec les fonctionnalités JS les plus récentes et émergentes, y compris celles qui sont disponibles dans ECMAScript 2015 et celles qui n'existent actuellement que sous forme de phrases. Parmi ces fonctionnalités figurent, par exemple, les fonctions asynchrones et les décorateurs. Tout cela vise à aider le développeur à créer des applications fiables et modernes.

Le programme TypeScript est compilé en code JavaScript standard qui peut être exécuté dans n'importe quel navigateur ou dans Node.js. Ce code sera compris par tout moteur JS qui prend en charge ECMAScript 3 ou une norme plus récente.



Le matériel, dont nous publions la traduction aujourd'hui, contient une discussion de vingt questions qui pourraient bien poser à quelqu'un qui va passer une interview, revendiquant le poste de programmeur TypeScript.

Question n ° 1 (1). Qu'est-ce que TypeScript et pourquoi l'utiliser à la place de JavaScript?

Entre parenthèses, après le numéro de la question, sa complexité est indiquée, évaluée sur une échelle de cinq points.

TypeScript (TS) est un sur-ensemble de JavaScript (JS), dont les principales caractéristiques sont la possibilité d'attribution explicite de type statique, la prise en charge des classes et des interfaces. L'un des principaux avantages de TS par rapport à JS est la possibilité de créer, dans divers IDE, un tel environnement de développement qui permet, en cours de saisie du code, d'identifier les erreurs courantes. L'utilisation de TypeScript dans les grands projets peut augmenter la fiabilité des programmes, qui, en même temps, peuvent être déployés dans les mêmes environnements où les applications JS normales fonctionnent.

Voici quelques détails sur TypeScript:

• TypeScript prend en charge les éditions modernes des normes ECMAScript, le code écrit en utilisant qui est compilé en tenant compte de la possibilité de son exécution sur des plates-formes qui prennent en charge les anciennes versions des normes. Cela signifie que le programmeur TS peut utiliser les capacités de la norme ES2015 et des normes plus récentes, telles que les modules, les fonctions fléchées, les classes, l'opérateur d'étalement, la déstructuration et effectuer ce qu'il fait dans des environnements existants qui ne prennent pas encore en charge ces normes.
• TypeScript est un module complémentaire pour JavaScript. Le code écrit en JavaScript pur est du code TypeScript valide.
• TypeScript étend JavaScript avec la possibilité d'attribuer statiquement des types. Le système de type TS est assez étendu. À savoir, il comprend des interfaces, des énumérations, des types hybrides, des types génériques, des types d'union et des types d'intersection, des modificateurs d'accès et bien plus encore. L'utilisation de TypeScript facilite également les choses en utilisant l'inférence de type.
• L'utilisation de TypeScript, par rapport à JavaScript, améliore considérablement le processus de développement. Le fait est que l'IDE, en temps réel, reçoit des informations de type du compilateur TS.
• Lors de l'utilisation du mode null strict (l'indicateur de compilation --strictNullChecks est utilisé à cet effet), le compilateur TypeScript ne permet pas d'affecter null et undefined variables de ces types dans lesquels, dans ce mode, l'utilisation de ces valeurs n'est pas autorisée.
• Pour utiliser TypeScript, vous devez organiser le processus de construction du projet, qui comprend l'étape de compilation du code TS en JavaScript. Le compilateur peut incorporer une carte source dans les fichiers JS qu'il génère ou créer des fichiers .map distincts. Cela vous permet de définir des points d'arrêt et d'examiner les valeurs des variables pendant l'exécution du programme, en travaillant directement avec le code TypeScript.
• TypeScript est un projet Microsoft open source publié sous la licence Apache 2. L'initiateur du développement TypeScript est Anders Halesberg. Il est impliqué dans la création de Turbo Pascal, Delphi et C #.

→ Source

Question n ° 2 (1). Parlez-nous des types génériques dans TypeScript.

Les types généralisés (génériques) vous permettent de créer des composants ou des fonctions qui peuvent fonctionner avec différents types et non avec aucun. Prenons un exemple:

 /**       */ 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"); //  :      ,      

→ Source

Question n ° 3 (2). TypeScript prend-il en charge tous les principes de la programmation orientée objet?

Oui, c'est vrai. Il existe quatre principes de base de la programmation orientée objet:

• Encapsulation
• Héritage
• Abstraction
• Polymorphisme

En utilisant les outils TypeScript simples et clairs, vous pouvez implémenter tous ces principes.

→ Source

Question n ° 4 (2). Comment en TypeScript pour vérifier les valeurs d'égalité nulle et non définie?

Pour effectuer de telles vérifications, il suffit d'utiliser la construction suivante:

 if (value) { } 

L'expression entre parenthèses sera true si elle ne fait pas partie de la liste suivante:

• null
• undefined
• NaN
• Ligne vide
• 0
• false

TypeScript prend en charge les mêmes règles de conversion de type que JavaScript.

→ Source

Question n ° 5 (2). Comment implémenter des propriétés de classe qui sont des constantes dans TypeScript?

Dans TypeScript, lors de la déclaration des propriétés d'une classe, vous ne pouvez pas utiliser le mot clé const . Lorsque vous essayez d'utiliser ce mot clé, le message d'erreur suivant s'affiche: A class member cannot have the 'const' keyword . TypeScript 2.0 possède un modificateur en readonly qui vous permet de créer des propriétés de classe en lecture seule:

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

→ Source

Question n ° 6 (2). Que sont les fichiers .map dans TypeScript?

Les fichiers avec l'extension .map stockent les cartes source, qui contiennent des données sur la correspondance du code écrit en TypeScript avec le code JavaScript créé sur sa base. De nombreux débogueurs peuvent fonctionner avec ce fichier (par exemple, Visual Studio et les outils de développement Chrome). Cela permet, pendant le débogage, de travailler avec le code source des programmes TypeScript, et non avec leurs équivalents JS.

→ Source

Question n ° 7 (2). Que sont les getters et setters dans TypeScript?

TypeScript prend en charge les getters et setters, qui vous permettent de contrôler l'accès aux membres des objets. Ils permettent au développeur de contrôler les propriétés de lecture et d'écriture des objets.

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

→ Source

Question n ° 8 (2). TypeScript peut-il être utilisé dans le développement de serveurs, et si oui, comment?

Les programmes écrits en TypeScript conviennent non seulement au développement frontal, mais également à la création d'applications serveur. Par exemple, sur TS, vous pouvez écrire des programmes pour la plate-forme Node.js. Cela donne au programmeur des outils supplémentaires pour le contrôle de type et vous permet d'utiliser d'autres fonctionnalités du langage. Pour créer des applications serveur sur TS, il vous suffit de configurer le processus de traitement de code correct, à l'entrée de quels fichiers TypeScript sont reçus, et la sortie est des fichiers JavaScript adaptés à l'exécution dans Node.js. Pour organiser un tel environnement, vous devez d'abord installer le compilateur TypeScript:

 npm i -g typescript 

Les paramètres du compilateur sont définis à l'aide du fichier tsconfig.json , qui détermine, entre autres, le but de la compilation et l'endroit où les fichiers JS prêts à l'emploi doivent être placés. En général, ce fichier est très similaire aux fichiers de configuration babel ou webpack:

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

Maintenant, à condition que le compilateur ait quelque chose à traiter, vous devez l'exécuter:

 tsc 

Et enfin, compte tenu du fait que les fichiers JS adaptés à l'exécution dans l'environnement Node.js se trouvent dans le dossier de build , vous devez exécuter la commande suivante dans le répertoire racine du projet:

 node build/index.js 

→ Source

Question n ° 9 (3). Parlez-nous des principaux composants de TypeScript.

TypeScript comprend trois composants principaux:

• Langue. Du point de vue des développeurs, c'est la partie la plus importante de TypeScript. "Langage" est la syntaxe, les mots-clés, tout ce qui vous permet d'écrire des programmes en TypeScript.
• Compilateur TypeScript possède un compilateur open source, il est multiplateforme, open-spec et est écrit en TypeScript. Le compilateur convertit le code TypeScript en code JavaScript. De plus, si quelque chose ne va pas avec le programme, il affiche des messages d'erreur. Il vous permet de combiner plusieurs fichiers TypeScript en un seul fichier JS de sortie et de créer des cartes de code.
• Outils auxiliaires. Les outils d'assistance TypeScript sont conçus pour faciliter le processus de développement grâce à son utilisation dans divers IDE. Parmi eux, Visual Studio, VS Code , Sublime, divers outils pour lancer rapidement TS-code, et d'autres.

→ Source

Question n ° 10 (3). Y a-t-il des erreurs dans le code TypeScript que vous avez fourni? Expliquez votre réponse.

Voici l'extrait de code:

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

Il n'y a aucune erreur dans ce code. Une déclaration de classe crée deux entités: c'est le type de données utilisé pour instancier la classe et la fonction constructeur. Comme les classes créent des types de données, vous pouvez les utiliser où vous pouvez utiliser des interfaces.

→ Source


J'adore vraiment ce film)

Question n ° 11 (3). Parlez-nous de l'utilisation de décorateurs de propriétés dans TypeScript.

Les décorateurs peuvent être utilisés pour changer le comportement des classes, et vous pouvez en tirer encore plus d'avantages lorsque vous les utilisez avec n'importe quel framework. Par exemple, si votre framework dispose de méthodes dont l'accès est restreint (par exemple, elles sont destinées uniquement à l'administrateur), il sera facile d'écrire le @admin méthode @admin , qui interdira aux utilisateurs qui ne sont pas administrateurs d'accéder aux méthodes correspondantes. Vous pouvez créer un décorateur @owner qui vous permet de modifier un objet uniquement à son propriétaire. Voici à quoi pourrait ressembler l'utilisation de décorateurs:

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

→ Source

Question n ° 12 (3). TypeScript peut-il utiliser des fonctions fortement typées comme paramètres?

Prenons l'exemple suivant:

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

Est-il possible d'organiser le travail avec un rappel tapé dans la méthode de save ? Réécrivez le code pour le démontrer.

Dans TypeScript, vous pouvez déclarer un type de rappel, puis réécrire le code:

 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) 

→ Source

Question n ° 13 (3). Comment rendre les classes déclarées dans un module accessibles en dehors du module?

Les classes déclarées dans un module sont disponibles dans ce module. Dehors, l'accès à ceux-ci ne peut être obtenu.

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

Dans le code ci-dessus, une erreur se produira lors de la tentative d'initialisation de la variable fordCar . Pour rendre une classe déclarée dans un module accessible en dehors de ce module, vous devez utiliser le mot-clé d' 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"); 

→ Source

Question n ° 14 (3). TypeScript prend-il en charge la surcharge de fonctions?

TypeScript prend en charge la surcharge de fonctions, mais la mise en œuvre de ce mécanisme est différente de ce qui peut être vu dans d'autres langages orientés objet. A savoir, dans TS, ils ne créent qu'une seule fonction et un certain nombre d'annonces. Lorsqu'un tel code est compilé en JavaScript, une seule fonction spécifique est visible. Ce mécanisme fonctionne car les fonctions JS peuvent être appelées en leur passant un nombre différent de paramètres.

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

→ Source

Question n ° 15 (4). Quel est le problème avec le code qui vous est fourni?

Voici le code en question:

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

Il est recommandé d'utiliser des paramètres facultatifs dans les rappels uniquement si vous comprenez parfaitement avec précision les conséquences d'une telle étape. Ce code a une signification très spécifique: le rappel done peut être appelé avec 1 ou 2 arguments. L'auteur du code avait probablement l'intention de nous dire que le rappel peut ne pas prêter attention au paramètre elapsedTime , mais pour y parvenir, vous pouvez toujours créer un rappel qui prend moins d'arguments.

→ Source

Question n ° 16 (4). Comment surcharger le constructeur de classe dans TypeScript?

TypeScript vous permet de déclarer de nombreuses variantes de méthodes, mais il ne peut y avoir qu'une seule implémentation, et cette implémentation doit avoir une signature compatible avec toutes les variantes de méthodes surchargées. Pour surcharger le constructeur de classe, vous pouvez utiliser plusieurs approches:

• Vous pouvez utiliser le paramètre facultatif:
  
  

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

• Vous pouvez utiliser les paramètres par défaut:
  
  

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

• Vous pouvez utiliser des surcharges supplémentaires comme méthodes d'usine statiques:
  
  

   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' }) 

• Vous pouvez utiliser le type d'union:
  
  

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

→ Source

Question n ° 17 (4). Quelles sont les différences entre les mots-clés d'interface et de type dans TypeScript?

Voici des exemples d'utilisation de ces mots clés:

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

Contrairement à une déclaration d'interface, qui représente toujours un type nommé d'objet, l'utilisation du mot-clé type vous permet de spécifier un alias pour tout type de type, y compris les types primitifs, les types d'union et les types d'intersection.

Lorsque vous utilisez le mot clé type au lieu du mot clé interface , les possibilités suivantes sont perdues:

• Une interface peut être utilisée dans une expression extends ou implements , mais pas un alias pour un littéral de type objet.
• Une interface peut avoir plusieurs déclarations fusionnées et lorsque vous utilisez le mot-clé type cette fonctionnalité n'est pas disponible.

→ Source

Question n ° 18 (5). Indiquez-nous quand TypeScript utilise le mot clé declare.

Le mot clé declare est utilisé dans TypeScript pour déclarer des variables, dont la source peut être un fichier qui n'est pas un fichier TypeScript.

Par exemple, supposons que nous ayons une bibliothèque appelée myLibrary . Il n'a pas de fichier avec des déclarations de type TypeScript, il n'a que l'espace de noms myLibrary dans l'espace de noms global. Si vous souhaitez utiliser cette bibliothèque dans votre code TS, vous pouvez utiliser la construction suivante:

 declare var myLibrary; 

TypeScript affectera la variable myLibrary à any . Le problème ici est qu'au moment du développement, vous n'aurez pas d'indices intelligents pour cette bibliothèque, bien que vous puissiez l'utiliser dans votre code. Dans cette situation, vous pouvez utiliser une autre approche conduisant au même résultat. Nous parlons d'utiliser une variable de type any :

 var myLibrary: any; 

Dans les deux cas, lors de la compilation du code TS en JavaScript, le résultat est le même, mais l'option declare est mieux lisible. L'utilisation de ce mot-clé conduit à la création de la soi-disant déclaration externe d'une variable (déclaration ambiante).

Question n ° 19 (5). Que sont les déclarations de variables externes dans TypeScript et quand doivent-elles être utilisées?

Une déclaration externe d'une variable (déclaration ambiante) est un mécanisme qui permet au compilateur TypeScript de savoir qu'un code source existe quelque part en dehors du fichier actuel. Les publicités externes aident à intégrer des bibliothèques JavaScript tierces dans les programmes TS.

Ces déclarations font dans le fichier de déclaration de type avec l'extension .d.ts. Les variables ou modules externes déclarent comme ceci:

 declare module Module_Name { } 

Les fichiers qui contiennent du code externe doivent être inclus dans le fichier TS en les utilisant, comme suit:

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

→ Source

Question n ° 20 (5). Puis-je générer automatiquement des créations TypeScript à partir des bibliothèques JS?

JavaScript ne contient pas toujours suffisamment d'informations qui permettent à TypeScript de déduire automatiquement les types. Par conséquent, il est presque impossible de créer automatiquement des déclarations de type basées sur JavaScript. Cependant, vous pouvez essayer de le faire à l'aide des outils suivants:

• Microsoft / dts-gen est l'outil officiel utilisé par Microsoft comme point de départ pour créer des déclarations de type.
• dtsmake est un outil de développement prometteur pour créer automatiquement des déclarations de type basées sur des fichiers JS. Cela dépend du système d'analyse de code Tern , que certains éditeurs utilisent pour implémenter le mécanisme d'auto-complétion lors de la saisie du code JS.

→ Source

Résumé

Nous espérons qu'une discussion des questions de ce document vous aidera à mieux connaître TypeScript, peut-être à faire attention à ce à quoi vous n'aviez pas prêté attention auparavant, et, si vous vous préparez à un entretien, augmentera vos chances de le réussir.

Chers lecteurs! Quelles questions poseriez-vous à l'intervieweur qui postule pour un emploi nécessitant des connaissances TypeScript?


- Et quel est le rabais pour ce code promo?!
- Il semble que 7%. Je vais vérifier si tu veux ...
"Ouais, tu vérifies." À mon avis, la remise est un peu trop chère!
...
- Désolé, je me suis un peu trompé sur la remise. 10% sur tous les serveurs virtuels.