Questions d'entretien technique - Partie Typescript

Introduction

Bonjour, bonjour !! :D

J'espère que vous allez tous bien !

Comment nous nous sentons vraiment :

Je suis de retour avec la deuxième partie de cette série. ?

Dans ce chapitre, nous aborderons les questions ✨Typescript✨ auxquelles j'ai été confronté lors des entretiens.

Je vais garder l’intro courte, alors allons-y directement !

## Questions
1. Que sont les génériques en dactylographie ? Qu'est-ce que  ?
2. Quelles sont les différences entre les interfaces et les types ?
3. Quelles sont les différences entre any, null, inconnu et jamais ?

---

Question 1 : Que sont les génériques en dactylographie ? Qu'est-ce que  ?

La réponse courte est...

Les génériques dans TypeScript nous permettent de créer des fonctions, des classes et des interfaces réutilisables qui peuvent fonctionner avec une variété de types, sans avoir à en spécifier un en particulier. Cela permet d'éviter d'en utiliser comme type fourre-tout.

La syntaxe est utilisé pour déclarer un type générique, mais vous pouvez également utiliser , ou tout autre espace réservé.

Comment ça marche ?

Décomposons cela avec un exemple.

Supposons que j'ai une fonction qui accepte un paramètre et renvoie un élément du même type. Si j'écris cette fonction avec un type spécifique, cela ressemblerait à ceci :

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


const stringData = returnElement("Hello world");

Je sais que le type de stringData sera « string » car je l'ai déclaré.

Mais que se passe-t-il si je souhaite renvoyer un type différent ?

const numberData = returnElement(5);

Je recevrai un message d'erreur car le type diffère de ce qui a été déclaré.

La solution pourrait être de créer une nouvelle fonction pour renvoyer un type numérique.

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

Cette approche fonctionnerait, mais elle pourrait conduire à une duplication de code.

Une erreur courante pour éviter cela consiste à utiliser any au lieu d'un type déclaré, mais cela va à l'encontre de l'objectif de la sécurité des types.

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

Cependant, l'utilisation de any nous fait perdre la fonctionnalité de sécurité de type et de détection d'erreurs dont dispose Typescript.
De plus, si vous commencez à en utiliser chaque fois que vous devez éviter le code en double, votre code perdra sa maintenabilité.

C’est précisément à ce moment-là qu’il est avantageux d’utiliser des génériques.

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

La fonction recevra un élément d'un type spécifique ; ce type remplacera le générique et le restera tout au long de l'exécution.

Cette approche nous permet d'éliminer le code dupliqué tout en préservant la sécurité des types.

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


const stringData = returnElement("Hello world");

Mais que se passe-t-il si j'ai besoin d'une fonction spécifique provenant d'un tableau ?

On pourrait déclarer le générique sous forme de tableau et l'écrire comme ceci :

const numberData = returnElement(5);

Alors,

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

Les types déclarés seront remplacés par le type fourni en paramètre.

Nous pouvons également utiliser des génériques en cours.

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

J'ai trois points à souligner à propos de ce code :

1. add est une fonction de flèche anonyme (dont j'ai parlé dans le premier chapitre).
2. Le générique peut être nommé , , ou même , si vous préférez.
3. Comme nous n'avons pas encore spécifié le type, nous ne pouvons pas implémenter d'opérations à l'intérieur des classes. Par conséquent, nous devons instancier la classe en déclarant le type du générique puis implémenter la fonction.

Voici à quoi ça ressemble :

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

Et, une dernière chose à ajouter avant de terminer cette question.
N'oubliez pas que les génériques sont une fonctionnalité de Typescript. Cela signifie que les génériques seront effacés lorsque nous les compilerons en Javascript.

De

const stringData2 = returnGenericElement("Hello world");


const numberData2 = returnGenericElement(5);

à

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

---

Question 2 : Quelles sont les différences entre les interfaces et les types ?

La réponse courte est :

1. La fusion de déclarations fonctionne avec les interfaces mais pas avec les types.
2. Vous ne pouvez pas utiliser d'outils dans une classe avec des types d'union.
3. Vous ne pouvez pas utiliser d'extensions avec une interface utilisant des types d'union.

Concernant le premier point, Qu'est-ce que j'entends par fusion de déclarations ?

Laissez-moi vous montrer :
J'ai défini deux fois la même interface en l'utilisant dans une classe. La classe incorporera alors les propriétés déclarées dans les deux définitions.

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

Cela ne se produit pas avec les types. Si nous essayons de définir un type plus d'une fois, TypeScript générera une erreur.

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

Concernant les points suivants, différencions les types d'union et d'intersection :

Les types d'union nous permettent de spécifier qu'une valeur peut être de plusieurs types. Ceci est utile lorsqu'une variable peut contenir plusieurs types.

Les types d'intersection nous permettent de combiner des types en un seul. Il est défini à l'aide de l'opérateur &.

const operation = new Addition<number>();


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


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

Type de syndicat :

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

Type d'intersection :

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


const stringData = returnElement("Hello world");

Si nous essayons d'utiliser le mot-clé Implements avec un type d'union, tel que Animal, TypeScript générera une erreur. En effet, les implémentations attendent une seule interface ou un seul type, plutôt qu'un type d'union.

const numberData = returnElement(5);

Typescript nous permet d'utiliser des « outils » avec :

a. Types d'intersections

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

b. Interfaces

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

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

c. Type unique.

const stringData2 = returnGenericElement("Hello world");


const numberData2 = returnGenericElement(5);

Le même problème se produit lorsque nous essayons d'utiliser des extensions avec un type d'union. TypeScript générera une erreur car une interface ne peut pas étendre un type d'union. Voici un exemple

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

Vous ne pouvez pas étendre un type d'union car il représente plusieurs types possibles et il n'est pas clair quelles propriétés de type doivent être héritées.

MAIS vous pouvez étendre un type ou une interface.

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

Vous pouvez également étendre un seul type.

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

---

Question 3 : Quelles sont les différences entre any, null, inconnu et jamais ?

Réponse courte :

Tout => Il s'agit d'une variable de type supérieur (également appelée type universel ou supertype universel). Lorsque nous utilisons any dans une variable, la variable peut contenir n’importe quel type. Il est généralement utilisé lorsque le type spécifique d'une variable est inconnu ou susceptible de changer. Cependant, leur utilisation n’est pas considérée comme une bonne pratique ; il est recommandé d'utiliser plutôt des génériques.

const operation = new Addition<number>();


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


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

Bien que any autorise des opérations telles que l'appel de méthodes, le compilateur TypeScript ne détectera pas les erreurs à ce stade. Par exemple :

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

Vous pouvez attribuer n'importe quelle valeur à n'importe quelle variable :

function returnGenericElement(element) {
 return element;
}

De plus, vous pouvez attribuer une variable n'importe quelle à une autre variable avec un type défini :

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


interface CatInterface {
 color: string;
}


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

---

Inconnu => Ce type, comme n’importe quel autre, peut contenir n’importe quelle valeur et est également considéré comme le type supérieur. Nous l'utilisons lorsque nous ne connaissons pas le type de variable, mais il sera attribué plus tard et restera le même pendant l'exécution. L'inconnu est un type moins permissif que n'importe quel autre.

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

L'appel direct de méthodes sur un inconnu entraînera une erreur de compilation :

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


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

Avant de l'utiliser, nous devons effectuer des vérifications telles que :

type animal = cat | dog;

Comme n'importe quel autre, nous pourrions attribuer n'importe quel type à la variable.

type intersectionAnimal = cat & dog;

Cependant, nous ne pouvons pas attribuer le type inconnu à un autre type, mais tout ou inconnu.

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


const stringData = returnElement("Hello world");

Cela nous montrera une erreur

---

Nul => La variable peut contenir l’un ou l’autre type. Cela signifie que la variable n'a pas de valeur.

const numberData = returnElement(5);

Tenter d'attribuer un autre type à une variable nulle entraînera une erreur :

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

---

Jamais => Nous utilisons ce type pour spécifier qu'une fonction n'a pas de valeur de retour.

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

---

La fin...

On termine avec Typescript,

Pour aujourd'hui (?

J'espère que cela a été utile à quelqu'un.

Si vous avez des questions techniques lors de l'entretien que vous aimeriez que je vous explique, n'hésitez pas à me le faire savoir dans les commentaires. ??

Passez une bonne semaine ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!