技術面接の質問 - パート タイプスクリプト

導入

こんにちは、こんにちは!! :D

皆さんお元気でいることを願っています!

私たちの本当の気持ち:

このシリーズの第 2 部に戻ります。 ?

この章では、私が面接中に直面した ✨Typescript✨ の質問について詳しく説明します。

イントロは短くするので、すぐに始めましょう!

## 質問
1. typescript のジェネリックスとは何ですか?
とは何ですか? 2. インターフェースとタイプの違いは何ですか?
3. any、null、unknown、never の違いは何ですか?

---

質問 1: typescript のジェネリックスとは何ですか? とは何ですか?

簡単に言うと...

TypeScript のジェネリックスを使用すると、特定の型を指定することなく、さまざまな型を処理できる再利用可能な関数、クラス、インターフェイスを作成できます。これは、any を包括的なタイプとして使用することを避けるのに役立ちます。

構文 はジェネリック型の宣言に使用されますが、、、またはその他のプレースホルダーを使用することもできます。

どのように機能しますか?

例を挙げて詳しく見てみましょう。

パラメータを受け取り、同じ型の要素を返す関数があるとします。その関数を特定の型で書くと、次のようになります:

function returnElement(element: string): string {
 return element;
}


const stringData = returnElement("Hello world");

stringData の型は宣言したので「string」になることがわかります。

しかし、別の型を返したい場合はどうすればよいでしょうか?

const numberData = returnElement(5);

宣言された型と異なるため、エラーメッセージが表示されます。

解決策は、数値型を返す新しい関数を作成することです。

function returnNumber(element: number): number {
 return element;
}

このアプローチは機能しますが、コードが重複する可能性があります。

これを避けるためのよくある間違いは、宣言された型の代わりに any を使用することですが、これは型安全性の目的に反します。

function returnElement2(element: any): any {
 return element;
}

ただし、any を使用すると、Typescript が持つタイプ セーフティとエラー検出機能が失われます。
また、コードの重複を避ける必要があるときに any を使用し始めると、コードの保守性が失われます。

まさにこのような場合にジェネリックを使用することが有益です。

function returnGenericElement<T>(element: T): T {
 return element;
}

関数は特定の型の要素を受け取ります。その型はジェネリックを置き換え、実行時を通じてそのまま残ります。

このアプローチにより、型安全性を維持しながら重複したコードを排除できます。

function returnElement(element: string): string {
 return element;
}


const stringData = returnElement("Hello world");

しかし、配列からの特定の関数が必要な場合はどうすればよいでしょうか?

ジェネリックを配列として宣言し、次のように書くことができます:

const numberData = returnElement(5);

それでは

function returnNumber(element: number): number {
 return element;
}

宣言された型は、パラメーターとして指定された型に置き換えられます。

クラス内でジェネリックスを使用することもできます。

function returnElement2(element: any): any {
 return element;
}

このコードについて 3 つのポイントがあります:

1. add は匿名のアロー関数です (最初の章で説明しました)。
2. ジェネリックには、必要に応じて、、、または という名前を付けることができます。
3. まだ型を指定していないため、クラス内で操作を実装することはできません。したがって、ジェネリックの型を宣言してクラスをインスタンス化し、関数を実装する必要があります。

次のようになります:

function returnGenericElement<T>(element: T): T {
 return element;
}

そして、この質問を終える前に最後に一つ付け加えておきます。
ジェネリックは Typescript の機能であることに注意してください。つまり、JavaScript にコンパイルするとジェネリックが消去されます。

から

const stringData2 = returnGenericElement("Hello world");


const numberData2 = returnGenericElement(5);

へ

function returnLength<T>(element: T[]): number {
 return element.length;
}

---

質問 2: インターフェイスとタイプの違いは何ですか?

簡単に言うと次のとおりです:

1. 宣言のマージはインターフェイスでは機能しますが、型では機能しません。
2. 共用体型を持つクラスでは実装を使用できません。
3. 共用体型を使用するインターフェースでは extends を使用できません。

最初の点については、宣言のマージとは何を意味しますか?

お見せしましょう:
クラスで使用しているときに、同じインターフェイスを 2 回定義しました。その後、クラスは両方の定義で宣言されたプロパティを組み込みます。

const stringLength = returnLength(["Hello", "world"]);

これは型では発生しません。型を複数回定義しようとすると、TypeScript はエラーをスローします。

class Addition<U> {
 add: (x: U, y: U) => U;
}

次の点に関して、和集合型と交差型を区別してみましょう:

共用体型を使用すると、値が複数の型のいずれかであることを指定できます。これは、変数が複数の型を保持できる場合に便利です。

交差タイプを使用すると、タイプを 1 つに結合できます。 & 演算子を使用して定義されます。

const operation = new Addition<number>();


operation.add = (x, y) => x + y; => We implement the function here


console.log(operation.add(5, 6)); // 11

共用体の種類:

function returnGenericElement<T>(element: T): T {
 return element;
}

交差点タイプ:

function returnElement(element: string): string {
 return element;
}


const stringData = returnElement("Hello world");

Animal などの共用体型でimplements キーワードを使用しようとすると、TypeScript はエラーをスローします。これは、実装では共用体型ではなく、単一のインターフェイスまたは型が想定されるためです。

const numberData = returnElement(5);

Typescript では、次のような「実装」を使用できます。

a.交差点の種類

function returnNumber(element: number): number {
 return element;
}

b.インターフェース

function returnElement2(element: any): any {
 return element;
}

function returnGenericElement<T>(element: T): T {
 return element;
}

c.シングルタイプ

const stringData2 = returnGenericElement("Hello world");


const numberData2 = returnGenericElement(5);

共用体型で extends を使用しようとすると、同じ問題が発生します。インターフェイスは共用体型を拡張できないため、TypeScript はエラーをスローします。以下にその例を示します

function returnLength<T>(element: T[]): number {
 return element.length;
}

共用体型は複数の可能な型を表しており、どの型のプロパティを継承する必要があるかが不明瞭であるため、共用体型を拡張することはできません。

ただし、型またはインターフェイスを拡張することはできます。

const stringLength = returnLength(["Hello", "world"]);

また、単一の型を拡張することもできます。

class Addition<U> {
 add: (x: U, y: U) => U;
}

---

質問 3: any、null、unknown、never の違いは何ですか?

短い答え:

任意 =>これはトップ型変数 (ユニバーサル型またはユニバーサル スーパータイプとも呼ばれます) です。 変数で any を使用すると、変数は任意の型を保持できます。通常、変数の特定の型が不明な場合、または変更されることが予想される場合に使用されます。ただし、any を使用することはベスト プラクティスとはみなされません。代わりにジェネリックを使用することをお勧めします。

const operation = new Addition<number>();


operation.add = (x, y) => x + y; => We implement the function here


console.log(operation.add(5, 6)); // 11

any ではメソッドの呼び出しなどの操作が可能ですが、TypeScript コンパイラーはこの段階ではエラーをキャッチしません。例:

function returnGenericElement<T>(element: T): T {
 return element;
}

任意の値を任意の変数に割り当てることができます:

function returnGenericElement(element) {
 return element;
}

さらに、定義された型を持つ別の変数に任意の変数を割り当てることができます。

interface CatInterface {
 name: string;
 age: number;
}


interface CatInterface {
 color: string;
}


const cat: CatInterface = {
 name: "Tom",
 age: 5,
 color: "Black",
};

---

不明 =>この型は、他の型と同様に、任意の値を保持でき、最上位の型とも見なされます。変数の型がわからない場合に使用しますが、後で割り当てられ、実行中は同じままになります。 Unknow は、どのタイプよりも寛容性が低いタイプです。

type dog = {
 name: string;
 age: number;
};


type dog = { // Duplicate identifier 'dog'.ts(2300)
 color: string;
};


const dog1: dog = {
 name: "Tom",
 age: 5,
 color: "Black", //Object literal may only specify known properties, and 'color' does not exist in type 'dog'.ts(2353)
};

不明なメソッドを直接呼び出すとコンパイル時エラーが発生します:

type cat = {
 name: string;
 age: number;
};


type dog = {
 name: string;
 age: number;
 breed: string;
};

使用する前に、次のようなチェックを実行する必要があります。

type animal = cat | dog;

他のものと同様に、任意の型を変数に割り当てることができます。

type intersectionAnimal = cat & dog;

ただし、不明な型を別の型 (any または未知の型) に割り当てることはできません。

function returnElement(element: string): string {
 return element;
}


const stringData = returnElement("Hello world");

これによりエラーが表示されます

---

Null =>変数はどちらの型も保持できます。これは、変数に値がないことを意味します。

const numberData = returnElement(5);

他の型を null 変数に代入しようとすると、エラーが発生します:

function returnNumber(element: number): number {
 return element;
}

---

決して =>この型を使用して、関数に戻り値がないことを指定します。

function returnElement2(element: any): any {
 return element;
}

---

終わり...

Typescript で終了します。

今日は (?

これが誰かの役に立てば幸いです。

技術面接で説明してほしい質問がある場合は、お気軽にコメント欄でお知らせください。 ??

良い一週間をお過ごしください?

以上が技術面接の質問 - パート タイプスクリプトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。