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(arg: T): T {
  return arg;
}

const numberIdentity = identity(42);
const stringIdentity = identity("Hello");

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

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

• 任意の型: 任意の型の値を表し、すべての型チェックをバイパスします。型チェックなしで任意の値を割り当てることができます。
• 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 修飾子: 初期化後にオブジェクトのプロパティを不変にするためにオブジェクトのプロパティに使用されます。
• 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 の面接の準備に役立ちます。