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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Typescript におけるインターフェースと型の違いは何ですか?
  • TypeScript インターフェース定義ケースチュートリアル
  • TypeScript における型とインターフェースの違いは何ですか?

<<:  mysqlは内部コマンドエラーの解決策ではありません

>>:  DeepinでPyenvをインストールする手順

推薦する

MySQLにおける区切り文字の定義と機能の詳細な説明

MySQL を初めて学ぶときは、区切り文字の本当の目的を理解していないかもしれません。区切り文字は、...

JavaScript配列の組み込みメソッドの詳細な説明

目次1. Array.at() 2. Array.copyWithin() 3. 配列.entrie...

Dockerfile を使用して Docker でイメージを構築する方法

イメージを構築するこれまで、テストやデモンストレーションにさまざまなイメージを使用しました。多くの場...

Nginx ログ管理の概要

Nginx ログの説明アクセス ログを通じて、ユーザーの地理的起源、ジャンプ元、使用端末、特定の U...

Ubuntu で apt-get を使用して mysql をインストールおよび完全にアンインストールする方法の詳細な説明

1. mysqlをインストールします。 udo apt-getでmysql-serverをインストー...

TypeScriptの基本型の詳細な説明

目次ブール型数値型文字列型文字列と数値を連結する未定義およびnull配列型タプル型列挙型あらゆるタイ...

JS での Reduce() メソッドの使用の概要

目次1. 文法2. 例3. その他の関連方法長い間、reduce() メソッドの具体的な使い方を理解...

Dockerデータストレージのバインドマウントの詳細な説明

この記事を読む前に、Volumes について予備知識を身に付けておいてください。詳細については、こち...

Vueプロジェクトウォッチで関数が繰り返しトリガーされる問題の解決

目次問題の説明:解決策1解決策2問題の説明:ページ A と B の 2 つがあり、各ページにはget...

方言変換のためのApache Calciteコード

意味Calcite は、Sql を SqlNode に解析し、次に SqlNode を特定のデータベ...

MySQLインデックスの簡単な分析

データベース インデックスは、テーブル操作の速度を向上させることを目的としたデータ構造です。高速なラ...

vuex での mapState の考え方の応用

目次1. マップ方式2. 応用背景:需要開発プロセス中に、一部のインターフェースは、ページに表示する...

Docker MQTT のインストールと使用のチュートリアル

MQTT の紹介MQTT (Message Queuing Telemetry Transport)...

JavaScript 状態コンテナ Redux の詳細な説明

目次1. Reduxを選ぶ理由2. Reduxデータフロー3つの原則4. Reduxソースコード分析...