TypeScript の面接の質問

Jan 05, 2025 pm 01:44 PM

TypeScript Interview Questions

質問 - TypeScript とは何ですか?

  • TypeScript は Javascript のスーパーセットです
  • 静的型を追加して、コード品質の向上と実行前のエラーチェックを可能にします。
  • インターフェイス、列挙型、ジェネリックなどの機能をサポートします。
  • より優れたエラーチェック、強化されたツール、改善されたコードの可読性を提供します。

質問 - 明示的および暗黙的な型の割り当てとは何ですか?

  • 明示的とは、型を書き出すことを意味します。以下のように -
let firstName: string = "Rutvik";
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
  • 暗黙的とは、TypeScript が値に基づいて型を推測することを意味します。以下の型は数値とみなされます
let age = 23;
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

質問 - TypeScript の any、unknown、never の違いは何ですか?

  • any の型は、任意の型の変数を割り当てるために使用されます。
  • 別の型を割り当て直してもエラーにはなりません。
let x: any = 10;
x = 'hello'; // No TypeScript error
console.log(x.toUpperCase()); // No TypeScript error
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
  • unknown 型は、値に対する操作を実行する前に型をチェックする必要があるため、any 型よりも優れています。
let y: unknown = 10;
// Type assertion needed before using y as number
if (typeof y === 'number') {
    console.log(y.toFixed(2));
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
  • 型は決して発生しない値を表すことはありません。
  • これは通常、正しく返されない関数の return ステートメントに使用されます。
function throwError(message: string): never {
    throw new Error(message);
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

質問 - 配列の型を指定するにはどうすればよいですか?

  • 配列を型指定するには、以下のように型を指定する必要があります。以下の例では、配列には文字列タイプのみを含めることができます。
const names: string[] = ["Rutvik", "Rohit", "Virat"];
names.push("Bumrah"); // no error
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
  • 配列の変更を防ぐ readonly キーワードを使用することもできます。
const names: readonly string[] = ["Rutvik", "Rohit", "Virat"];
names.push("Bumrah"); // Error: Property 'push' does not exist on type 'readonly string[]'.
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

質問 - 配列の型推論とは何ですか?

  • 配列に型を指定しない場合、配列は自動的に型を推測します。
const numbers = [1, 2, 3]; // inferred to type number[]
numbers.push(4); // no error
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

質問 - タプルとは何ですか?

  • これは、長さと型が事前定義された型配列です。
  • 異なる型の混合配列の型を与えるのに非常に便利です。
let ourTuple: [number, boolean, string];

// initialize correctly
ourTuple = [5, false, 'Coding Hero was here'];
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

質問 - 読み取り専用タプルとは何ですか?

  • タプルを読み取り専用にしない場合は、定義された項目にさらに項目を追加でき、TypeScript はエラーをスローしません。
let ourTuple: [number, boolean, string];

// initialize correctly
ourTuple = [5, false, 'Coding Hero was here'];
//No safety in indexes from 3
ourTuple.push('This is wrong');
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
  • ここで、これを修正するために、type の前にキーワード readonly を使用します。
let ourTuple: readonly [number, boolean, string];
// initialize correctly
ourTuple = [5, false, 'Coding Hero was here'];
// throws error as it is readonly
ourTuple.push('Coding Hero took a day off');
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

質問 - オブジェクトのタイプを指定するにはどうすればよいですか?

  • 別のオブジェクトのような構造を作成し、オブジェクト内のキーとキーのタイプを指定することで、オブジェクトのタイプを指定できます。
interface CarTypes {
    brand: string,
    model: string,
    year: number
}


const car: CarTypes = {
  brand: "Tata",
  model: "Punch",
  year: 2020
};
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

質問 - オブジェクトにオプションのプロパティを設定するにはどうすればよいですか?

  • オプションのプロパティまたはキーを指定するには、? を追加する必要があります。 t キーの後に。
let firstName: string = "Rutvik";
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

質問 - TypeScript の enum について説明してください。

  • 列挙型は定数である変数の一種です。その中の値のみを使用する必要があります。
  • 値はデフォルトでは数値であり、0 から始まり 1 ずつ増加します。
  • 数値または文字列ベースにすることができます
let age = 23;
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
let x: any = 10;
x = 'hello'; // No TypeScript error
console.log(x.toUpperCase()); // No TypeScript error
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

質問 - 型エイリアスとは何ですか?

  • カスタム名で型を定義でき、文字列や数値などのすべてのプリミティブ型だけでなく、オブジェクトや配列などの複合型にも使用できます。
let y: unknown = 10;
// Type assertion needed before using y as number
if (typeof y === 'number') {
    console.log(y.toFixed(2));
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

質問 - インターフェースとは何ですか?

  • インターフェイスは型に似ていますが、オブジェクトに対してのみ使用できます。
function throwError(message: string): never {
    throw new Error(message);
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

質問 - インターフェイスを拡張するにはどうすればよいですか?

  • インターフェイスは、extend キーワードを使用して拡張できます。
const names: string[] = ["Rutvik", "Rohit", "Virat"];
names.push("Bumrah"); // no error
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

質問 - Union タイプと Intersection タイプとは何ですか?

ユニオン:-

  • 共用体タイプは、プロパティが文字列や数値など、複数の値になる場合に使用されます。
  • このため、これらは OR とも呼ばれ、 | を使用して使用されます。シンボル。
const names: readonly string[] = ["Rutvik", "Rohit", "Virat"];
names.push("Bumrah"); // Error: Property 'push' does not exist on type 'readonly string[]'.
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

交差点:-

  • 交差タイプは、複数のタイプを 1 つに結合する場合に使用されます。
  • このため、AND とも呼ばれ、& 記号を使用して使用されます。
const numbers = [1, 2, 3]; // inferred to type number[]
numbers.push(4); // no error
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

質問 - Typescript の関数とは何ですか?

関数で戻り値の型を指定するにはどうすればよいですか?

  • 関数名の後に : 記号を付けると、関数の戻り値の型を指定できます。
let ourTuple: [number, boolean, string];

// initialize correctly
ourTuple = [5, false, 'Coding Hero was here'];
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

関数でパラメータの型を指定するにはどうすればよいですか?

  • 各パラメータの後に : 記号を使用してパラメータの種類を指定することができます。
let ourTuple: [number, boolean, string];

// initialize correctly
ourTuple = [5, false, 'Coding Hero was here'];
//No safety in indexes from 3
ourTuple.push('This is wrong');
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

関数にオプション、デフォルト、残りのパラメータを与えるにはどうすればよいですか?

  • デフォルトのパラメータを使用すると、パラメータをオプションとしてマークできます。このように、c はオプションであり、? で示されます。
let ourTuple: readonly [number, boolean, string];
// initialize correctly
ourTuple = [5, false, 'Coding Hero was here'];
// throws error as it is readonly
ourTuple.push('Coding Hero took a day off');
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
  • デフォルト値 (ES6 の機能) はタイプの後に続きます。
interface CarTypes {
    brand: string,
    model: string,
    year: number
}


const car: CarTypes = {
  brand: "Tata",
  model: "Punch",
  year: 2020
};
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
  • 残りのパラメータ (ES6 機能) は、渡された項目を配列に変換するため、配列の型が与えられます。
interface CarTypes {
    brand: string,
    model: string,
    year?: number
}

const car: CarTypes = {
  brand: "Tata",
  model: "Punch"
};
ログイン後にコピー
ログイン後にコピー

質問 - TypeScript のキャストとは何ですか?

  • キャストは、変数の型をオーバーライドするプロセスです。
  • 以下の例のように、型は不明ですが、as キーワードを使用すると文字列になります。
enum Direction {
  Up = 1,
  Down,
  Left,
  Right,
}
console.log(Direction.Up); // 1
console.log(Direction.Down); // 2
ログイン後にコピー
ログイン後にコピー
  • <> も使用できます。としての代わりに。どちらも同じ意味です。
let firstName: string = "Rutvik";
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

質問 - TypeScript のジェネリックとは何ですか?

  • Typeascript のジェネリックを使用すると、複数のデータ型を処理できる再利用可能なコンポーネントまたは命令を作成できます。
let age = 23;
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

質問 - Typescript のユーティリティ型?

  • TypeScript は、一般的な型変換を簡素化するユーティリティ型を提供します。
  • これらの型により、オブジェクトおよびインターフェイス型の操作と対話が容易になります。
  • 一般的に使用されるいくつかのユーティリティ タイプの内訳を次に示します。

1. 部分的

  • タイプ T のすべてのプロパティをオプションにします。
  • ユースケース: 一部のプロパティのみが必要なオブジェクトを作成する場合。
let x: any = 10;
x = 'hello'; // No TypeScript error
console.log(x.toUpperCase()); // No TypeScript error
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

2. 必須

  • タイプ T のすべてのプロパティを必須にします。
  • 使用例: すべてのプロパティが存在する必要があることを強制したい場合。
let y: unknown = 10;
// Type assertion needed before using y as number
if (typeof y === 'number') {
    console.log(y.toFixed(2));
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

3. 読み取り専用

  • タイプ T のすべてのプロパティを読み取り専用にします。
  • 使用例: オブジェクトのプロパティが変更できないようにするため。
function throwError(message: string): never {
    throw new Error(message);
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

4.ピック

  • 型 T からプロパティ K のセットを選択して型を作成します。
  • ユースケース: 型の特定のプロパティのみが必要な場合。
const names: string[] = ["Rutvik", "Rohit", "Virat"];
names.push("Bumrah"); // no error
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

5.省略

  • 型 T からプロパティ K のセットを省略して型を作成します。
  • ユースケース: 特定のプロパティを除くすべてのプロパティが必要な場合。
const names: readonly string[] = ["Rutvik", "Rohit", "Virat"];
names.push("Bumrah"); // Error: Property 'push' does not exist on type 'readonly string[]'.
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

6. 記録

  • キー K と型 T の値を使用して型を構築します。
  • 使用例: 固定キーと一​​貫した値タイプを持つオブジェクト タイプを作成します。
const numbers = [1, 2, 3]; // inferred to type number[]
numbers.push(4); // no error
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

7.除外する

  • U に割り当て可能なすべての型を型 T から除外します。
  • 使用例: 特定のタイプをフィルタリングして除外します。
let ourTuple: [number, boolean, string];

// initialize correctly
ourTuple = [5, false, 'Coding Hero was here'];
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

8. 抽出

  • 型 T から U に割り当て可能な型のみを抽出します。
  • 使用例: タイプを特定のサブセットに絞り込むため。
let ourTuple: [number, boolean, string];

// initialize correctly
ourTuple = [5, false, 'Coding Hero was here'];
//No safety in indexes from 3
ourTuple.push('This is wrong');
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

9.Null不可

  • 型 T から null と unknown を除外します。
  • 使用例: 値が null または未定義でないことを確認します。
let ourTuple: readonly [number, boolean, string];
// initialize correctly
ourTuple = [5, false, 'Coding Hero was here'];
// throws error as it is readonly
ourTuple.push('Coding Hero took a day off');
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

10. 戻り値の型

  • 関数型の戻り値の型を推論します。
  • 使用例: 関数の戻り値の型をキャプチャして使用します。
interface CarTypes {
    brand: string,
    model: string,
    year: number
}


const car: CarTypes = {
  brand: "Tata",
  model: "Punch",
  year: 2020
};
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

11. インスタンスタイプ

  • コンストラクター関数型 T のインスタンス型で構成される型を構築します。
  • 使用例: クラス インスタンスの型を取得します。
interface CarTypes {
    brand: string,
    model: string,
    year?: number
}

const car: CarTypes = {
  brand: "Tata",
  model: "Punch"
};
ログイン後にコピー
ログイン後にコピー

12. パラメータ

  • 関数型のパラメータの型を抽出します。
  • 使用例: 関数のパラメーターの型を再利用する。
enum Direction {
  Up = 1,
  Down,
  Left,
  Right,
}
console.log(Direction.Up); // 1
console.log(Direction.Down); // 2
ログイン後にコピー
ログイン後にコピー

以上がTypeScript の面接の質問の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

javascriptの分解:それが何をするのか、なぜそれが重要なのか javascriptの分解:それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

誰がより多くのPythonまたはJavaScriptを支払われますか? 誰がより多くのPythonまたはJavaScriptを支払われますか? Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

JavaScriptは学ぶのが難しいですか? JavaScriptは学ぶのが難しいですか? Apr 03, 2025 am 12:20 AM

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1)変数、データ型、関数などの基本概念を理解します。2)非同期プログラミングをマスターし、イベントループを通じて実装します。 3)DOM操作を使用し、非同期リクエストを処理することを約束します。 4)一般的な間違いを避け、デバッグテクニックを使用します。 5)パフォーマンスを最適化し、ベストプラクティスに従ってください。

Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は?
または:
Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか? Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は? または: Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか? Apr 04, 2025 pm 05:36 PM

この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト(https://www.shisido.co.co.jp/sb/wonderland/)と同様の達成方法について説明します。

JavaScriptの進化:現在の傾向と将来の見通し JavaScriptの進化:現在の傾向と将来の見通し Apr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は? JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は? Apr 04, 2025 pm 05:09 PM

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は?データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

Zustand非同期操作:UseStoreが取得した最新の状態を確保する方法は? Zustand非同期操作:UseStoreが取得した最新の状態を確保する方法は? Apr 04, 2025 pm 02:09 PM

Zustand非同期操作のデータの更新問題。 Zustand State Management Libraryを使用する場合、非同期操作を不当にするデータ更新の問題に遭遇することがよくあります。 �...

See all articles