【Principes essentiels de l'entretien】 Questions d'entretien TypeScript courantes

github : https://github.com/Jessie-jzn
site Web : https://www.jessieontheroad.com/

1. Pourquoi utiliser TypeScript ?

1. Vérification de type statique

Le principal avantage de TypeScript est sa vérification de type statique, qui permet de détecter les erreurs courantes pendant la phase de compilation plutôt que lors de l'exécution. Cela améliore la fiabilité et la stabilité du code.

2. Expérience d'édition de code améliorée

Le système de types de TypeScript permet des fonctionnalités de complétion de code, de refactorisation, de navigation et de documentation plus précises dans les éditeurs, augmentant ainsi considérablement l'efficacité du développement.

3. Maintenabilité améliorée du code

Les déclarations de type facilitent la compréhension des intentions et de la structure du code, ce qui est particulièrement bénéfique dans les environnements de développement en équipe.

4. Fonctionnalités linguistiques avancées

TypeScript prend en charge des fonctionnalités avancées non présentes dans JavaScript, telles que les interfaces, les énumérations et les génériques, facilitant le développement d'un code plus structuré et évolutif.

5. Meilleur support d'outils

TypeScript propose diverses options de compilateur pour optimiser le code JavaScript généré et prend en charge différents environnements JS en compilant TypeScript en JavaScript compatible.

2. TypeScript contre JavaScript

	TypeScript	JavaScript
Type System	Static typing with compile-time type checks. Types can be specified for variables, function parameters, and return values.	Dynamic typing with runtime type checks, which can lead to type-related runtime errors.
Type Annotations	Supports type annotations to explicitly define types. E.g., let name: string = "Alice";	No type annotations. Types are determined at runtime.
Compilation	Requires compilation to JavaScript. TypeScript compiler checks for type errors and generates equivalent JavaScript code.	Runs directly in browsers or Node.js without a compilation step.
Object-Oriented Programming	Richer OOP features such as classes, interfaces, abstract classes, and access modifiers.	Basic OOP features with prototype-based inheritance.
Advanced Features	Includes all ES6 and ES7 features, plus additional features like generics, enums, and decorators.	Supports ES6 and later standards, but lacks some of the advanced features provided by TypeScript.

TypeScript JavaScript ête> Système de saisie Saisie statique avec vérifications de type au moment de la compilation. Des types peuvent être spécifiés pour les variables, les paramètres de fonction et les valeurs de retour. Saisie dynamique avec vérifications de type à l'exécution, ce qui peut entraîner des erreurs d'exécution liées au type. Annotations de type Prend en charge les annotations de type pour définir explicitement les types. Par exemple, laissez name: string = "Alice"; Aucune annotation de type. Les types sont déterminés au moment de l'exécution. Compilation Nécessite une compilation en JavaScript. Le compilateur TypeScript vérifie les erreurs de type et génère du code JavaScript équivalent. S'exécute directement dans les navigateurs ou Node.js sans étape de compilation. Programmation orientée objet Fonctionnalités POO plus riches telles que les classes, les interfaces, les classes abstraites et les modificateurs d'accès. Fonctionnalités POO de base avec héritage basé sur des prototypes. Fonctionnalités avancées Inclut toutes les fonctionnalités ES6 et ES7, ainsi que des fonctionnalités supplémentaires telles que les génériques, les énumérations et les décorateurs. Prend en charge les normes ES6 et ultérieures, mais ne dispose pas de certaines fonctionnalités avancées fournies par TypeScript.

3. TypeScript の基本データ型

• ブール値: true または false の値を表します。
• 数値: 整数と浮動小数点数の両方を表します。
• String: 一重引用符または二重引用符を使用してテキスト データを表します。
• Array: type[] または Array を使用して、指定された型の値のコレクションを表します。
• タプル: 指定された型の固定数の要素を含む配列を表します。
• Enum: 名前付き定数のセットを表します。
• Any: 任意のタイプの値を表します。型チェックは行いません。
• Void: 値が存在しないことを表し、値を返さない関数の戻り値の型として一般的に使用されます。
• Null と未定義: それぞれ、値の欠如と初期化されていない状態を表します。
• Never: エラーをスローする関数や無期限に実行する関数など、決して発生しない値を表します。
• オブジェクト: 非プリミティブ型を表します。

4. TypeScript のジェネリックとは何ですか?どのように使用されますか?

ジェネリックを使用すると、型安全性を確保しながら、関数、クラス、インターフェイスが任意の型で動作できるようになります。

例:

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

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

この例では、アイデンティティ関数は汎用の を使用し、任意の型の値を受け入れて返すことができます。

5. TypeScript におけるunknownとanyの違い

• any Type: 任意の型の値を表し、すべての型チェックをバイパスします。型チェックなしで任意の値を割り当てることができます。
• unknown Type: 不明なタイプを表します。不明な型の値は使用する前にチェックする必要があり、型が不明な値をより安全に処理できるようになります。

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. readonly 修飾子と const キーワードの違い

• readonly Modifier: 初期化後にオブジェクトのプロパティを不変にするためにオブジェクトのプロパティに使用されます。
• const キーワード: 不変参照を持つ変数を宣言するために使用されます。オブジェクトのプロパティは引き続き変更できます。

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. TypeScript のデコレーター

デコレーターは、メタデータの追加、またはクラス、メソッド、プロパティ、パラメーターの変更を可能にする特別な TypeScript 機能です。

タイプ:

• クラス デコレーター: クラスの動作を変更したり、メタデータを追加したりするためにクラス コンストラクターに適用されます。
• メソッド デコレータ: メソッドに適用され、動作を変更したり、メタデータを追加したりします。
• アクセサー デコレーター: アクセサーを取得または設定して動作を変更するために適用されます。
• プロパティ デコレータ: メタデータを追加したり、その動作を変更したりするためにクラス プロパティに適用されます。
• パラメータ デコレータ: メタデータを追加するためにメソッド パラメータに適用されます。

例:

• クラスデコレータ:

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

• メソッドデコレータ:

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

使用法:

デコレーターは、tsconfig.json で ExperimentalDecorators を true に設定することで有効になります。

8. インターフェースとタイプの違い

interface と type は両方ともオブジェクト タイプを定義するために使用されますが、いくつかの違いがあります。

	interface	type
Basic Usage	Defines the shape of objects, including properties and methods.	Defines primitive types, object types, union types, intersection types, etc.
Extension	Supports declaration merging. Multiple declarations of the same interface are automatically merged.	Does not support declaration merging.
Union and Intersection Types	Not supported.	Supports union (`
Primitive Type Aliases	Not supported.	Supports aliasing primitive types.
Mapped Types	Not supported.	Supports mapped types.
Class Implementation	Supports class implementation using implements.	Does not support direct class implementation.

インターフェース

タイプ

基本的な使い方 プロパティやメソッドなどのオブジェクトの形状を定義します。 プリミティブ型、オブジェクト型、共用体型、交差型などを定義します。 拡張子 宣言のマージをサポートします。同じインターフェースの複数の宣言は自動的にマージされます。 宣言の結合はサポートされていません。 和集合と交差の種類 サポートされていません。 結合をサポートします (` プリミティブ型エイリアス サポートされていません。 プリミティブ型のエイリアシングをサポートします。 マップされた型 サポートされていません。 マップされた型をサポートします。 クラスの実装 実装を使用したクラス実装をサポートします。 クラスの直接実装はサポートされていません。 これらの質問と回答は、基本的な概念と実際の使用法をカバーすることで、TypeScript の面接の準備に役立ちます。

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!