TypeScript のインターフェイスと型の違いを確認するための簡単な比較

インターフェイスとタイプの違いは何ですか?この記事ではTypeScriptにおけるインターフェースと型を比較し、インターフェースと型の違いを知り、実際に使う際にはどちらを選べばよいのかを紹介します！

TypeScript を使用する場合、interface と type を使用しますが、これらは同じように使用されるようです。違いはなく、どれも非常によく使用できるため、両者の違いを実際に理解することはほとんどありません。私たちはよく次のようにタイプを定義します:

interface Point {
    x: number;
    y: number;
}

または次のように:

type Point = {
    x: number;
    y: number;
};

interface type の違いはマイナー構文宣言だけではありません。そこで今回は、この二人の間に隠された秘密を見ていきたいと思います。

型と型エイリアス

TypeScript には、boolean、number、string## などの基本的な型があります。 # 。高レベルの型を宣言したい場合は、type alias を使用する必要があります。

型のエイリアシングとは、型の新しい名前を作成することを指します。

という点に注意してください。新しい型は定義しませんでした。 type キーワードを使用すると、新しい型を作成しているように見えるかもしれませんが、型に新しい名前を付けているだけです。

したがって、type を使用するときは、新しいカテゴリを作成するのではなく、type のエイリアスを定義するだけです。

インターフェイス

typeとは異なり、インターフェイスはオブジェクト タイプに限定されます。これらは、オブジェクトとそのプロパティを説明する方法です。型エイリアス宣言は、任意のプリミティブ型、共用体、または交差に使用できます。 この点で、インターフェイスはオブジェクト タイプ に制限されます。

インターフェイスと型の類似点

両者の違いについて説明する前に、それらの類似点を見てみましょう。

両方継承可能

インターフェースと型の両方を継承できます。もう 1 つ注意すべき点は、インターフェイスと型エイリアスは相互に排他的ではないということです。型エイリアスはインターフェイスを継承でき、その逆も可能です。

インターフェイスの場合、別のインターフェイスを継承します

interface PartialPointX { x: number; }
interface Point extends PartialPointX { y: number; }

または、型を継承します

type PartialPointX = { x: number; };
interface Point extends PartialPointX { y: number; }

ある型は別の型を継承します:

type PartialPointX = { x: number; };
type Point = PartialPointX & { y: number; };

または、インターフェイスを継承します:

interface PartialPointX { x: number; }
type Point = PartialPointX & { y: number; };

実装

クラスはインターフェイスと型を実装できます (TS 2.7)。ただし、クラスは共用体型を実装できません。

interface Point {
 x: number;
 y: number;
}

class SomePoint implements Point {
 x = 1;
 y = 2;
}

type AnotherPoint = {
 x: number;
 y: number;
};

class SomePoint2 implements AnotherPoint {
 x = 1;
 y = 2;
}

type PartialPoint = { x: number; } | { y: number; };

// Following will throw an error
class SomePartialPoint implements PartialPoint {
 x = 1;
 y = 2;
}

インターフェイスと型の違い

ユニオン型と交差型

インターフェイスは拡張およびマージできますが、ユニオン形式とインターセクション形式で組み合わせることはできません。型では、和集合演算子と交差演算子を使用して新しい型を形成できます。

// object
type PartialPointX = { x: number; };
type PartialPointY = { y: number; };

// 并集
type PartialPoint = PartialPointX | PartialPointY;

// 交集
type PartialPoint = PartialPointX & PartialPointY;

宣言のマージ

TypeScript コンパイラは、同じ名前の 2 つ以上のインターフェイスをマージします。これは型では機能しません。同じ名前で異なるプロパティを持つ 2 つの型を作成しようとすると、TypeScript コンパイラはエラーをスローします。

// These two declarations become:
// interface Point { x: number; y: number; }
interface Point { x: number; }
interface Point { y: number; }

const point: Point = { x: 1, y: 2 };

タプル タイプ

タプル (キーと値のペア) は、

type キーワードを使用してのみ定義できます。

type Point = [x: number, y: number];

インターフェイスを使用してタプルを宣言する方法はありません。ただし、インターフェース内でタプルを使用することはできます。

interface Point {
  coordinates: [number, number]
}

どれを使用すればよいでしょうか?

一般的に、インターフェイスと型は非常に似ています。

ライブラリ内のパブリック API 定義またはサードパーティの型定義の場合、宣言のマージ機能を提供するためにインターフェイスを使用する必要があります。それ以外は好きなものを使用できますが、コードベース全体で一貫している必要があります。

#英語の元のアドレス: https://www.wisdomgeek.com/development/web-development/typescript/typescript-the-difference-between-interface-and-type/

著者: SARANSH KATARIA

プログラミング関連の知識については、

プログラミング入門

をご覧ください。 ！

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