序文インターフェースとタイプはどちらもタイプを定義するために使用され、これは形状を定義するものとして理解できます。形状は設計フレームワーク、つまり、特定の特性や動作を持つもののクラスを表します。 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: mysqlは内部コマンドエラーの解決策ではありません
MySQL を初めて学ぶときは、区切り文字の本当の目的を理解していないかもしれません。区切り文字は、...
目次1. Array.at() 2. Array.copyWithin() 3. 配列.entrie...
イメージを構築するこれまで、テストやデモンストレーションにさまざまなイメージを使用しました。多くの場...
Nginx ログの説明アクセス ログを通じて、ユーザーの地理的起源、ジャンプ元、使用端末、特定の U...
1. mysqlをインストールします。 udo apt-getでmysql-serverをインストー...
最近、Apple.com/Ebay.com/Amazon.com/shopping.yahoo.co...
目次ブール型数値型文字列型文字列と数値を連結する未定義およびnull配列型タプル型列挙型あらゆるタイ...
目次1. 文法2. 例3. その他の関連方法長い間、reduce() メソッドの具体的な使い方を理解...
この記事を読む前に、Volumes について予備知識を身に付けておいてください。詳細については、こち...
目次問題の説明:解決策1解決策2問題の説明:ページ A と B の 2 つがあり、各ページにはget...
意味Calcite は、Sql を SqlNode に解析し、次に SqlNode を特定のデータベ...
データベース インデックスは、テーブル操作の速度を向上させることを目的としたデータ構造です。高速なラ...
目次1. マップ方式2. 応用背景:需要開発プロセス中に、一部のインターフェースは、ページに表示する...
MQTT の紹介MQTT (Message Queuing Telemetry Transport)...
目次1. Reduxを選ぶ理由2. Reduxデータフロー3つの原則4. Reduxソースコード分析...