TypeScript の関数インターフェイス

Rana Hasnain Khan 2024年2月15日
TypeScript の関数インターフェイス

例を挙げて、TypeScript の関数インターフェイスを紹介します。

TypeScript の関数型としてのインターフェイス

インターフェイスを使用すると、特定のクラスまたは関数のアプリケーション全体で使用される親構造を作成できます。 アプリケーションのどの段階でも構造を変更すると、エラーが発生します。

インターフェイスは、プロパティ、関数から返されたオブジェクト、またはパラメーターとして渡されたオブジェクトの特定の構造を検証できます。 キーワード interface を使用して簡単にインターフェイスを定義し、プロパティとメソッドを含めることができます。

関数またはアロー関数を使用してメソッドを宣言できます。 以下に示すように、例を見て、コース用のインターフェースを作成してみましょう。

コード:

# typescript
interface CsCourse {
    subCode: number;
    subName: string;
    instructor(id): string;
    getCgpa: (number) => number;
}

関数にこのインターフェイスを使用しましょう。

コード:

# typescript
interface Course
{
    (subCode: number, subName: string): void;
};
function addSub(subCode:number, subName:string):void {
    console.log('Adding Subject: Subject Code = ' + subCode + ', Subject Name = ' + subName)
}

function updateSub(subCode:number, subName:string):void {
    console.log('Updating Subject: Subject Code = ' + subCode + ', Subject Name = ' + subName)
}

let sub: Course = addSub;
sub(301, 'Compiler Construction');

sub = updateSub;
sub(101, 'Introduction to Programming');

出力:

typescript での関数インターフェースの例

インターフェイスを作成することで、プロパティまたは関数の構造に従い、アプリケーション全体で同じ構造に従うことができます。 これらのプロパティにインターフェイスを使用すると、アプリケーションが安全になり、正しいデータが関数に送信されていることを確認できます。

ここで、インターフェイス コースで定義したシグネチャとは異なるシグネチャを持つ新しい関数を割り当ててみましょう。

コード:

# typescript
function delSub(subCode:number):void {
    console.log('Subject deleted.')
}

let sub: Course = delSub;

上記のコードでは、コンパイラ エラーが発生します。

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn

関連記事 - TypeScript Interface