【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

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 は両方ともオブジェクト タイプを定義するために使用されますが、いくつかの違いがあります。

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!