「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
表紙 > プログラミング > 【面接の必需品】ommon TypeScript 面接の質問

【面接の必需品】ommon TypeScript 面接の質問

2024 年 11 月 1 日に公開
ブラウズ:962

【Interview Essentials】ommon TypeScript Interview Questions

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

タイプスクリプト 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(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. インターフェースとタイプの違い

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

インタフェース タイプ
基本的な使い方 プロパティやメソッドを含むオブジェクトの形状を定義します。 プリミティブ型、オブジェクト型、共用体型、交差型などを定義します。
拡大 宣言のマージをサポートします。同じインターフェースの複数の宣言は自動的にマージされます。 宣言のマージはサポートされていません。
和集合と交差の種類 サポートされていません。 結合をサポートします (`
プリミティブ型エイリアス サポートされていません。 プリミティブ型のエイリアスをサポートします。
マップされたタイプ サポートされていません。 マップされた型をサポートします。
クラスの実装 implements を使用したクラス実装をサポートします。 クラスの直接実装はサポートされていません。

これらの質問と回答は、基本的な概念と実際の使用法をカバーすることで、TypeScript の面接の準備に役立ちます。

リリースステートメント この記事は次の場所に転載されています: https://dev.to/jessie_chen_4d333540e0c71/interview-essentials-8-common-typescript-interview-questions-4jki?1 侵害がある場合は、[email protected] に連絡して削除してください。
最新のチュートリアル もっと>

免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

Copyright© 2022 湘ICP备2022001581号-3