TypeScript のこれらのステートメント (interface
と)の違いは何ですか?type
interface X {
a: number
b: string
}
type X = {
a: number
b: string
};
ベストアンサー1
2019年アップデート
現在の回答と公式文書古くなっています。また、TypeScript を初めて使用する人にとっては、例がないと使用されている用語が明確ではありません。以下に、最新の相違点の一覧を示します。
1. オブジェクト/関数
どちらも、オブジェクトの形状や関数シグネチャを記述するために使用できます。ただし、構文は異なります。
インターフェース
interface Point {
x: number;
y: number;
}
interface SetPoint {
(x: number, y: number): void;
}
型エイリアス
type Point = {
x: number;
y: number;
};
type SetPoint = (x: number, y: number) => void;
2. その他のタイプ
インターフェースとは異なり、型エイリアスはプリミティブ、ユニオン、タプルなどの他の型にも使用できます。
// primitive
type Name = string;
// object
type PartialPointX = { x: number; };
type PartialPointY = { y: number; };
// union
type PartialPoint = PartialPointX | PartialPointY;
// tuple
type Data = [number, string];
3. 拡張する
どちらも拡張可能ですが、やはり構文が異なります。また、インターフェースと型エイリアスは相互に排他的ではないことに注意してください。インターフェースは型エイリアスを拡張することができ、その逆も可能です。
インターフェースはインターフェースを拡張します
interface PartialPointX { x: number; }
interface Point extends PartialPointX { y: number; }
型エイリアスは型エイリアスを拡張します
type PartialPointX = { x: number; };
type Point = PartialPointX & { y: number; };
インターフェースは型エイリアスを拡張します
type PartialPointX = { x: number; };
interface Point extends PartialPointX { y: number; }
型エイリアスはインターフェースを拡張します
interface PartialPointX { x: number; }
type Point = PartialPointX & { y: number; };
4. 道具
クラスは、インターフェースまたは型エイリアスをまったく同じ方法で実装できます。ただし、クラスとインターフェースは静的なブループリントと見なされることに注意してください。したがって、ユニオン型を指定する型エイリアスを実装/拡張することはできません。
interface Point {
x: number;
y: number;
}
class SomePoint implements Point {
x = 1;
y = 2;
}
type Point2 = {
x: number;
y: number;
};
class SomePoint2 implements Point2 {
x = 1;
y = 2;
}
type PartialPoint = { x: number; } | { y: number; };
// FIXME: can not implement a union type
class SomePartialPoint implements PartialPoint {
x = 1;
y = 2;
}
5. 宣言のマージ
型エイリアスとは異なり、インターフェースは複数回定義でき、単一のインターフェースとして扱われます (すべての宣言のメンバーがマージされます)。
// 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 };