序文インターフェースとタイプはどちらもタイプを定義するために使用され、これは形状を定義するものとして理解できます。形状は設計フレームワーク、つまり、特定の特性や動作を持つもののクラスを表します。 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 での置換例の詳細な説明replace into は insert と似ていますが、rep...
フロントエンドのデザイン案では、「X」や「>」の形をした閉じるボタンや、他の 3 方向の白抜き...
1. まずmysqld.exeプロセスを停止します2. cmd を開き、mysql の bin ディ...
1. CSSファイルの命名規則提案: 文字、_、-、数字を使用します。文字で始まる必要があり、純粋な...
データ表示は、常にあらゆる職業の人々が求めているものです。特にフロントエンド開発業界では、データを表...
この機能を実装するにあたり、本家ブロガーさんから拝借した方法では色の切り替えが実現できず、長い間考え...
MySQL データベースを最適化すると、データベースの冗長性を削減できるだけでなく、データベースの実...
フロントエンドの開発過程で、チェックボックスが必要な状況が発生しました。ユーザー操作の利便性を考慮し...
目次過去1週間の時間を取得する過去1か月の時間を取得する過去3か月分を取得新しい Date() と ...
最近、絵文字にコメントする機能が必要なコメント機能に取り組んでいたため、 contentEditab...
序文: MySQL データベースは、よく使用される集計関数、日付および文字列処理関数など、幅広い関数...
この記事では、Webオンラインチャットを実装するためのVueの具体的なコードを参考までに紹介します。...
最近、ウェブサイトを開発する際にトップに戻るボタンを作成する必要がありますが、私は主にバックエンドの...
この記事では、CentOS 7.4 サーバーで時刻同期を構成する方法について説明します。ご参考までに...
目次1. 要素の表示と非表示を制御する show() hide() 2. 要素の透明度を制御する f...