TypeScript のインターフェイスと型-jsチュートリアル-php.cn

TypeScript のインターフェイスと型

Linda Hamilton

リリース： 2024-11-17 06:26:03

オリジナル

605 人が閲覧しました

Interface vs Type in TypeScript

TypeScript は、JavaScript に静的型付けを追加し、コードに新しいレベルの信頼性と保守性をもたらす堅牢な言語です。 TypeScript は型定義を有効にすることで開発エクスペリエンスを強化し、コードのデバッグと読み取りを容易にします。 TypeScript は、その多くの機能の中でも、データの形状 (変数、オブジェクト、クラスなど) を定義するためのインターフェイスと型構造の両方を提供します。これらは類似点を共有していますが、それぞれに独自の長所があり、一方を他方よりもいつ使用するかを知ることで、コードをさらにクリーンかつ効率的にすることができます。

インタフェース

TypeScript の初期のバージョンで導入されたインターフェイスは、オブジェクト指向プログラミング (OOP) の概念からインスピレーションを受けています。これにより、オブジェクトの形状を簡単に定義でき、再利用可能で拡張可能なオブジェクトタイプを作成するための最上級の構造が提供されます。

基本的なインターフェイスの例

interface Car {
    brand: string;
    color: string;
}

ログイン後にコピー

インターフェースの継承

インターフェースの主な強みの 1 つは継承です。インターフェイスは他のインターフェイスを拡張できるため、既存の構造上に簡単に構築できます。

interface Person {
    name: string;
}

interface User extends Person {
    age: number;
}

const user: User = { name: 'Gerald', age: 30 };

ログイン後にコピー

クラスのインターフェース

インターフェイスは、クラスの構造または「コントラクト」を定義し、クラスが持つ必要があるメソッドとプロパティを指定する場合にも最適です。

interface Printable {
    print: () => void;
}

class Cart implements Printable {
    print() {
        console.log('Item has been added.');
    }
}

ログイン後にコピー

インターフェース宣言のマージ

インターフェイスはマージできます。同じ名前の複数のインターフェイスが同じスコープ内で宣言されている場合、それらは 1 つにマージされます。これは便利ですが、使いすぎると複雑になる可能性があります。

interface User {
    name: string;
}

interface User {
    age: number;
}

const user: User = { name: 'Gerald', age: 30 };

ログイン後にコピー

注: 宣言のマージは慎重に使用してください。過剰なマージは、意図しない副作用によりインターフェイスの理解やデバッグを困難にする可能性があります。

タイプ

インターフェイスの代わりに、TypeScript は type キーワードも提供します。これはより柔軟で、オブジェクトだけでなくさまざまな型を表すことができます。 type を使用すると、共用体、交差、さらにはプリミティブ型のエイリアスを定義できます。

型を持つ共用体型

たとえば、type では、インターフェイスでは処理できない共用体型を使用できます。

type Id = string | number;

ログイン後にコピー

型宣言の制限

インターフェイスとは異なり、型は宣言のマージをサポートしません。型を再宣言しようとすると、エラーが発生します。

type User = {
    name: string;
};

// Error: Duplicate identifier 'User'
type User = {
    age: number;
}

ログイン後にコピー

種類構成

type は、既存の型から新しい型を作成するのにも最適であり、複雑なデータ構造を定義するための強力なツールになります。

interface Car {
    brand: string;
    color: string;
}

ログイン後にコピー

それぞれをいつ使用する必要がありますか?

オブジェクトとクラスの構造を定義するときは、インターフェイスを使用します。これは、継承の柔軟性が向上し、TypeScript の型チェックとシームレスに連携するためです。
型は、共用体、交差、プリミティブ型のエイリアス、または複雑で再利用可能な型を作成する必要がある場合に使用します。

結論

インターフェイスと型の両方が TypeScript に貴重な機能をもたらします。それぞれの長所を理解することで、あらゆる状況に適したツールを選択できるようになり、コードがよりクリーンで理解しやすくなり、保守が容易になります。 TypeScript のタイピングシステムのパワーを活用し、プロジェクトにもたらす明瞭さと安全性をお楽しみください!

以上がTypeScript のインターフェイスと型の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。