【面試精要】常見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

	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 標題> 類型系統 帶有編譯時類型檢查的靜態類型。可以為變數、函數參數和傳回值指定類型。 帶有運行時類型檢查的動態類型，這可能會導致與類型相關的運行時錯誤。 輸入註解 支援類型註解來明確定義類型。例如，讓 name: string = "Alice"; 沒有型別註釋。類型是在運行時確定的。 編譯 需要編譯為 JavaScript。 TypeScript 編譯器檢查類型錯誤並產生等效的 JavaScript 程式碼。 直接在瀏覽器或 Node.js 中運行，無需編譯步驟。 物件導向程式設計 更豐富的 OOP 功能，例如類別、介面、抽象類別和存取修飾符。 具有基於原型的繼承的基本 OOP 功能。 高級功能 包括所有 ES6 和 ES7 功能，以及泛型、枚舉和裝飾器等附加功能。 支援 ES6 及更高版本的標準，但缺少 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 の面接の準備に役立ちます。

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