タイプエイリアスタイプ
タイプ エイリアスは、タイプに新しい名前を付けるために使用されます。タイプ エイリアスを作成するには、type を使用します。
型エイリアスは、基本型を表すためだけでなく、オブジェクト型、共用体型、タプル、および交差を表すためにも使用できます。
いくつかの例を見てみましょう。
type userName = string; // 基本类型
type userId = string | number; // 联合类型
type arr = number[];
// 对象类型
type Person = {
id: userId; // 可以使用定义类型
name: userName;
age: number;
gender: string;
isWebDev: boolean;
};
// 范型
type Tree<T> = {
value: T };
const user: Person = {
id: "901",
name: "椿",
age: 22,
gender: "女",
isWebDev: false,
};
const numbers: arr = [1, 8, 9];
インターフェースインターフェース
インターフェイスは、データ構造 (オブジェクトなど) に名前を付けるもう 1 つの方法です。タイプとは異なり、インターフェイスはオブジェクト タイプの記述に限定されます。
インターフェイスの宣言構文は、型エイリアスの宣言構文とも異なります。
上記の型エイリアス Person をインターフェイス宣言として書き直してみましょう。
interface Person {
id: userId;
name: userName;
age: number;
gender: string;
isWebDev: boolean;
}
インターフェイスと型の類似点
ObjectとFunctionの両方を記述可能
どちらもオブジェクトまたは関数を記述するために使用できますが、構文は異なります。
タイプ
type Point = {
x: number;
y: number;
};
type SetPoint = (x: number, y: number) => void;
インターフェース
interface Point {
x: number;
y: number;
}
interface SetPoint {
(x: number, y: number): void;
}
どちらも遺伝する可能性がある
インターフェイスと型の両方を継承できます。
もう 1 つ注意すべき点は、インターフェイスと型エイリアスは相互に排他的ではないということです。
型エイリアスはインターフェイスを継承でき、その逆も可能です。
実装形態にはわずかな違いがあります。
インターフェイスはインターフェイスを継承します
interface Person{
name:string
}
interface Student extends Person {
stuNo: number }
ninterface は型を継承します
type Person{
name:string
}
interface Student extends Person {
stuNo: number }
型継承型
type Person{
name:string
}
type Student = Person & {
stuNo: number }
型はインターフェイスを継承します
interface Person{
name:string
}
type Student = Person & {
stuNo: number }
実装する
クラスはインターフェイスと型を実装できます (共用体型を除く)
interface ICat{
setName(name:string): void;
}
class Cat implements ICat{
setName(name:string):void{
// todo
}
}
// type
type ICat = {
setName(name:string): void;
}
class Cat implements ICat{
setName(name:string):void{
// todo
}
}
上で述べた特殊なケースは、クラスが共用体型を実装できないということですが、これは何を意味するのでしょうか?
type Person = {
name: string; } | {
setName(name:string): void };
// 无法对联合类型Person进行实现
// error: A class can only implement an object type or intersection of object types with statically known members.
class Student implements Person {
name= "张三";
setName(name:string):void{
// todo
}
}
インターフェースとタイプの違い
基本型の別名を定義する
Type では基本的な型のエイリアスを定義できますが、インターフェイスでは次のように定義できません。
type userName = string
type stuNo = number
...
共用体の型を宣言する
type は、たとえば次のように共用体型を宣言できます。
type Student = {
stuNo: number} | {
classId: number}
タプルを宣言する
type はタプルの型を宣言できます。
type Data = [number, string];
上記は型でできることですが、インターフェースでできないことです。次に、型でできないことについて話しましょう。
ステートメントのマージ
同じ名前のインターフェイスを複数回宣言すると、TypeScript はそれらを 1 つの宣言にマージし、1 つのインターフェイスとして扱います。これを宣言のマージと呼びます。
例えば：
interface Person {
name: string }
interface Person {
age: number }
let user: Person = {
name: "Tolu",
age: 0,
};
この場合、type の場合、person が繰り返し使用されるとエラーが報告されます。
type Person {
name: string };
// Error: 标识符“Person”重复。ts(2300)
type Person {
age: number }
インデックス署名の問題
TypeScript を頻繁に使用する場合は、同様のエラーに遭遇したことがあるはずです。
Type 'xxx' is not assignable to type 'yyy'
Index signature is missing in type 'xxx'.
要約する
公式ではinterfaceの使用を推奨していますが、他の要件を満たせない場合はtypeを使用してください。
しかし実際には、共用体型や交差型は非常によく使われるため、必然的に多数の型を使用することになり、一部の複雑な型をアセンブルして型別名を作成して使用する必要もあります。
したがって、コードを統一したままにしたい場合でも、type を使用することを選択できます。上記の比較を通じて、型エイリアスは実際にほとんどのインターフェイス シナリオをカバーできます。
詳細については、WeChat で「 前端爱好者」を検索し、 「私」をクリックしてご覧ください。
参考ドキュメント:
- https://www.jb51.net/article/243639.htm