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 での置換例の詳細な説明replace into は insert と似ていますが、rep...

after疑似要素を使用して中空の三角矢印とXアイコンを実装する例

フロントエンドのデザイン案では、「X」や「>」の形をした閉じるボタンや、他の 3 方向の白抜き...

MySql の忘れたパスワードの変更方法はバージョン 5.7 以上に適しています

1. まずmysqld.exeプロセスを停止します2. cmd を開き、mysql の bin ディ...

DIV+CSS命名規則の詳細な説明はSEO最適化に役立ちます

1. CSSファイルの命名規則提案: 文字、_、-、数字を使用します。文字で始まる必要があり、純粋な...

Vue で円形プログレスバーを実装する例

データ表示は、常にあらゆる職業の人々が求めているものです。特にフロントエンド開発業界では、データを表...

Vue.jsでタブ切り替えと色変更操作を実装する解説

この機能を実装するにあたり、本家ブロガーさんから拝借した方法では色の切り替えが実現できず、長い間考え...

データベース管理における 19 の MySQL 最適化方法

MySQL データベースを最適化すると、データベースの冗長性を削減できるだけでなく、データベースの実...

DIVマスクを使用して、マウスでチェックボックスを直接チェックすることが無効である問題を解決します

フロントエンドの開発過程で、チェックボックスが必要な状況が発生しました。ユーザー操作の利便性を考慮し...

js を使用して過去 1 週間、1 か月、3 か月の時間を取得する簡単な例

目次過去1週間の時間を取得する過去1か月の時間を取得する過去3か月分を取得新しい Date() と ...

div が contentEditable=true に設定されている場合、コンテンツをリセットした後にカーソルを配置することはできません。

最近、絵文字にコメントする機能が必要なコメント機能に取り組んでいたため、 contentEditab...

MySQLの共通関数の概要

序文: MySQL データベースは、よく使用される集計関数、日付および文字列処理関数など、幅広い関数...

Vue が Web オンラインチャット機能を実現

この記事では、Webオンラインチャットを実装するためのVueの具体的なコードを参考までに紹介します。...

HTML ページの先頭に戻るいくつかの実装の概要

最近、ウェブサイトを開発する際にトップに戻るボタンを作成する必要がありますが、私は主にバックエンドの...

Centos 7.4 サーバーの時刻同期設定方法 [NTP サービスに基づく]

この記事では、CentOS 7.4 サーバーで時刻同期を構成する方法について説明します。ご参考までに...

jQueryアニメーションを理解するのに役立つ記事

目次1. 要素の表示と非表示を制御する show() hide() 2. 要素の透明度を制御する f...