【面试精要】常见TypeScript面试题

github：https://github.com/Jessie-jzn
网站：https://www.jessieontheroad.com/

1. 为什么使用 TypeScript？

1。静态类型检查

TypeScript 的核心优势是它的静态类型检查，这有助于在编译阶段而不是运行时捕获常见错误。这增强了代码的可靠性和稳定性。

2。增强的代码编辑体验

TypeScript 的类型系统可以在编辑器中实现更准确的代码补全、重构、导航和文档功能，显着提高开发效率。

3。提高代码可维护性

类型声明使理解代码意图和结构变得更容易，这在团队开发环境中特别有益。

4。高级语言功能

TypeScript 支持 JavaScript 中不存在的高级功能，例如接口、枚举和泛型，有助于开发更加结构化和可扩展的代码。

5。更好的工具支持

TypeScript 提供各种编译器选项来优化生成的 JavaScript 代码，并通过将 TypeScript 编译为兼容的 JavaScript 来支持不同的 JS 环境。

2. TypeScript 与 JavaScript

3. Types de données de base dans TypeScript

• Booléen : Représente des valeurs vraies ou fausses.
• Nombre : représente à la fois des nombres entiers et des nombres à virgule flottante.
• String : représente des données textuelles, en utilisant des guillemets simples ou doubles.
• Array : représente une collection de valeurs d'un type spécifié, en utilisant type[] ou Array.
• Tuple : Représente un tableau avec un nombre fixe d'éléments avec des types spécifiés.
• Enum : Représente un ensemble de constantes nommées.
• Any : représente tout type de valeur. Ne fournit aucune vérification de type.
• Void : Représente l'absence de valeur, couramment utilisé comme type de retour des fonctions qui ne renvoient pas de valeur.
• Null et Undefined : représentent respectivement l'absence de valeur et l'état non initialisé.
• Jamais : représente des valeurs qui n'apparaissent jamais, telles que des fonctions qui génèrent des erreurs ou s'exécutent indéfiniment.
• Objet : Représente les types non primitifs.

4. Que sont les génériques dans TypeScript ? Comment sont-ils utilisés ?

Les génériques permettent aux fonctions, classes et interfaces de fonctionner avec n'importe quel type tout en garantissant la sécurité des types.

Exemple :

function identity<T>(arg: T): T {
  return arg;
}

const numberIdentity = identity<number>(42);
const stringIdentity = identity<string>("Hello");

Dans cet exemple, la fonction d'identité utilise un générique, lui permettant d'accepter et de renvoyer des valeurs de tout type.

5. Différence entre inconnu et tout dans TypeScript

• any Type : représente tout type de valeur et contourne toute vérification de type. N'importe quelle valeur peut lui être attribuée sans vérification de type.
• Type inconnu : Représente un type inconnu. Les valeurs de type inconnu doivent être vérifiées avant de pouvoir être utilisées, ce qui constitue un moyen plus sûr de gérer les valeurs dont le type est incertain.

let anyVar: any;
let unknownVar: unknown;

anyVar = 5;
anyVar.toUpperCase(); // No compile-time error, but might cause runtime error

unknownVar = "Hello";
if (typeof unknownVar === "string") {
  unknownVar.toUpperCase(); // Type check ensures safety
}

6. Différence entre le modificateur en lecture seule et le mot-clé const

• Modificateur en lecture seule : Utilisé sur les propriétés des objets pour les rendre immuables après initialisation.
• const Keyword : Utilisé pour déclarer des variables avec des références immuables. Les propriétés de l'objet peuvent toujours être modifiées.

const obj = { name: "John" };
obj.name = "Doe"; // Allowed

interface User {
  readonly id: number;
  name: string;
}

const user: User = { id: 1, name: "John" };
user.name = "Doe"; // Allowed
user.id = 2; // Error, `id` is readonly

7. Décorateurs en TypeScript

Les décorateurs sont une fonctionnalité TypeScript spéciale qui permet d'ajouter des métadonnées ou de modifier des classes, des méthodes, des propriétés ou des paramètres.

Types :

• Décorateurs de classe : appliqués aux constructeurs de classe pour modifier le comportement de la classe ou ajouter des métadonnées.
• Décorateurs de méthodes : appliqués aux méthodes pour modifier leur comportement ou ajouter des métadonnées.
• Décorateurs d'accesseurs : appliqués pour obtenir ou configurer les accesseurs afin qu'ils modifient leur comportement.
• Décorateurs de propriétés : appliqués aux propriétés de classe pour ajouter des métadonnées ou modifier leur comportement.
• Décorateurs de paramètres : appliqués aux paramètres de méthode pour ajouter des métadonnées.

Exemples :

• Décorateur de classe :

function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

@sealed
class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }

  greet() {
    return `Hello, ${this.greeting}`;
  }
}

• Méthode Décorateur :

function logMethod(target: any, propertyName: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`Method ${propertyName} called with args: ${JSON.stringify(args)}`);
    return originalMethod.apply(this, args);
  };
}

class Calculator {
  @logMethod
  add(a: number, b: number): number {
    return a + b;
  }
}

Utilisation :

Les décorateurs sont activés en définissant experimentalDecorators sur true dans tsconfig.json.

8. Différence entre l'interface et le type

interface et type sont tous deux utilisés pour définir des types d'objets, mais ils présentent quelques différences :

以上是【面试精要】常见TypeScript面试题的详细内容。更多信息请关注PHP中文网其他相关文章！