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

以上是【面試精要】常見TypeScript面試題的詳細內容。更多資訊請關注PHP中文網其他相關文章！