TypeScript におけるインターフェースと型メソッドの正しい使用例

序文

インターフェースとタイプはどちらもタイプを定義するために使用され、これは形状を定義するものとして理解できます。形状は設計フレームワーク、つまり、特定の特性や動作を持つもののクラスを表します。 Java などの一部の言語では、インターフェースは動作を定義するために使用されます。クラスがインターフェースを実装する場合、そのクラスには書き込み可能や読み取り可能などの特定の動作または機能があることを意味します。物事は行動によって分けられます。インターフェースは Golang で広く使用されていますが、TypeScript ではインターフェースは型の形状に似ています。TypeScript は型を定義するための type も提供します。実際、TypeScript ではインターフェースと型に大きな違いはありませんが、それでも少し違いがあります。

インタフェース

インターフェースは、クラス、オブジェクト、または関数を形成するために使用できます。

インターフェース Tut{
    タイトル:文字列
    isComplete:ブール値
}

Tut型を表すインターフェースinterfaceを定義し、次にTut型の変数machineLearningTutを定義します。

const machineLearningTut:Tut = {
    タイトル:「機械学習の基礎」
    完全:true
}

Tut 型の machineLearningTut がインターフェース定義属性またはメソッドを完全に実装していない場合、コンパイルフェーズ中にわかりやすいプロンプトが表示されます。

const 機械学習Tut:Tut = {
    タイトル:「機械学習の基礎」
}

ヒント: Tut 型の machineLearningTut は、インターフェースで宣言された isComplete プロパティを実装しません。

プロパティ 'isComplete' はタイプ '{ title: string; }' にありませんが、タイプ 'Tut'.ts(2741) には必要です。

[demo2.ts(3, 5): ]()'isComplete' はここで宣言されています。

クラス VideoTut は Tut を実装します{
    タイトル:文字列;
    isComplete:ブール値;
}

Tutインターフェースを実装するためにVideoTutクラスを定義することもできます。

インターフェース Greet{
    (名前:文字列):文字列
}

const greeting:Greet = (name) => `hello ${name}`

また、shape 関数の Greet インターフェイスを定義して、関数のパラメーターと関数の戻り値の型を定義することもできます。

インターフェース AdvanceTut は Tut を拡張します{
    isFree:ブール値
}

const machineLearningTut:AdvanceTut = {
    タイトル:「機械学習の基礎」
    完全:true、
    isFree:true
}

インターフェースは extend を通じて拡張できます。AdvanceTut は Tut の拡張です。type が extend をサポートしていない場合は、type 間で拡張できます。

インターフェース Tut{
    タイトル:文字列
    isComplete:ブール値
}

インターフェース Tut{
    isFree:ブール値
}

const machineLearningTut:Tut = {
    タイトル:「機械学習の基礎」
    isComplete:true、
    isFree:true
}

同じインターフェース名を持つ 2 つの Tut が連続して宣言されています。これらの 2 つの Tut は、オーバーライド関係ではなく拡張関係にあることが示されていますが、これも type にはない機能です。

タイプ

実際、type の使い方は interface の使い方と似ていますが、type は型に便利で、JavaScript の基本型のエイリアスにすることができます。実は、型とインターフェースは本質的に異なります。説明されても、実際にゆっくりと体験する必要があるかもしれません。

タイプ isComplete = ブール値
タイプ タイトル = 文字列
タイプgreet = (name:string)=>string

タイプ Tut = {
    タイトル:文字列;
    isComplete:ブール値
}

const 機械学習Tut:Tut = {
    タイトル:"機械学習のタイトル",
    完全:true
}

タイプ Tut = {
    タイトル:文字列;
    isComplete:ブール値
} と {
    isFree:ブール値
}

const machineLearningTut:Tut = {
    タイトル:"機械学習のタイトル",
    完全:true、
    isFree:true
}

型は型の拡張を実装できる

タイプ VideoTut = Tut | {
    isFree:ブール値
}

const machineLearningTut:VideoTut = {
    タイトル:"機械学習のタイトル",
    完全:true、
    isFree:true
}

エクスポートタイプ InputProps = {
    タイプ:'テキスト'|'メール';
    値:文字列;
    onChane:(newValue:文字列)=>void
}

また、フロントエンド型とバックエンド型も type を使用して定義できます。以下に示すように、複数の基本型を定義することができ、これらの定義された型で新しい型を定義することができます。

onChaneType 型 = (newValue:string)=>void

InputType = 'テキスト'|'メール'と入力します。

入力値 = 文字列

エクスポートタイプ InputProps = {
    タイプ:InputType;
    値:入力値;
    onChane:onChaneタイプ
}

付録: インターフェースとタイプの違い

type は、基本型のエイリアス、ユニオン型、タプルなどを宣言できます。

// 基本型エイリアス type Name = string;

//ユニオン型インターフェース Dog {
    ウォン()
}
インターフェース Cat {
    ミャオ();
}

タイプ ペット = 犬 | 猫;

//配列内の各位置の型を具体的に定義します type PetList = [Dog, Pet];

型ステートメントでは、typeofを使用して割り当てるインスタンスの型を取得することもできます。

// 変数の型を取得したい場合はtypeofを使用します
div = document.createElement('div'); とします。
タイプ B = typeof div;

タイプその他のトリック

type StringOrNumber = 文字列 | 数値;
タイプ Text = 文字列 | { テキスト: 文字列 };
NameLookup = Dictionary<文字列、Person>と入力します。
型 Callback<T> = (data: T) => void;
型 Pair<T> = [T, T];
type Coordinates = Pair<number>;
Tree<T> = T | { 左: Tree<T>、右: Tree<T> }; と入力します。

インターフェースはマージを宣言できる

インターフェース ユーザー {
    名前: 文字列;
    年齢: 番号;
}

インターフェース ユーザー {
    性別: 文字列;
}

ユーザーインターフェイスは次のとおりです。

{
    名前: 文字列;
    年齢: 番号;
    性別: 文字列;
}

要約する

TypeScript におけるインターフェースと型の正しい使い方に関するこの記事はこれで終わりです。TypeScript におけるインターフェースと型の使い方に関する詳細な内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: