Typescript の型とインターフェイスを理解する

インタフェース

インターフェースとは:

• インターフェイスは、Typescript でオブジェクトの形状や構造を定義する方法です。
• これは主にオブジェクトのブループリントを記述し、オブジェクトが特定の構造に準拠していることを確認するために使用されます。

主な特徴:

1.オブジェクト構造に使用されます

• プロパティ、メソッド、およびそれらの型を定義します。

interface User {
username: string, 
password: string,
email?: string // this is optional property
}

2.サポートの延長:

• インターフェイスは他のインターフェイスを拡張してプロパティを継承できます。

interface Address {
street: string,
city: string
}
interface User extends Address {
username: string,
password: string,
email?: string
}

3.クラスはインターフェイスを実装できます:

• クラスがインターフェイス構造に従うことを強制します。

class Admin implements User {
  username: string
  password: string
  email?: string
  street: string
  city: string

  constructor(username: string, password:string, street:string, city:string, email?:string){
    this.username = username;
    this.password = password;
    this.email = email || '';
    this.street = street;
    this.city = city;
  };
}

var aAdmin = new Admin("user1", "123", "3/2 street", "hcmc");
console.log(aAdmin);

出力:

Admin {
  username: 'user1',
  password: '123',
  email: '',
  street: '3/2 street',
  city: 'hcmc'
}

4.関数

を宣言できます

• インターフェイスは関数シグネチャを宣言できます

interface AddUser{
  (name: string) : void;
}

const user : AddUser = (name) => console.log(`Hello ${name}`);

タイプ

タイプとは:

• 型は、Typescript のほぼすべてのものに対して型のエイリアスを定義する柔軟な方法です。
• オブジェクト、ユニオン、交差、タプルなどを記述できます。

主な特徴:

1.任意のタイプのエイリアス:

• プリミティブ型、オブジェクト、さらには共用体や交差を定義できます。

type UserType = {
  id: string,
  name: string
}
type ID = string | number; //Union type

2.サポート交差点タイプ:

• 複数のタイプを 1 つに結合する

type UserType = {
  id: string,
  name: string
}

type AddressType = {
  street: string,
  city: string,
}
type UserWithAddress = UserType & AddressType;

3.サポートタプル:

• 各要素に特定の型を使用して固定長配列を定義できます。

type Coordinates = [number, number];
const point: Coordinates = [10, 20];

4.再度開くことはできません:

• インターフェースとは異なり、既存の型を再宣言したり拡張したりすることはできません。

class AdminType extends UserType {
  // ERROR: 'UserType' only refers to a type, but is being used as a value here.ts(2693)
}

インターフェイスとタイプの主な違い

Aspect	Interface	Type
Usage	Define Object structure	Flexible: can be define objects, unions, intersections, tuples.
Extensibility	Can be extended using extends	Can be combined using & (intersection).
Reopen/Declartion	Can be reopened to add new properties.	Cannot be reopened.
Primitive Type	Cannot represent primitives directly.	Can alias primitive (e.g,.type ID = string);
Union and Typle Support	Not supported.	Fully supported

アスペクト インターフェース タイプ 使用法 オブジェクト構造の定義 柔軟性: オブジェクト、ユニオン、交差、タプルを定義できます。 拡張性 extends を使用して拡張できます & (交差点) を使用して組み合わせることができます。 再開/宣言 再度開いて新しいプロパティを追加できます。 再度開くことはできません。 プリミティブ型 プリミティブを直接表すことはできません。 プリミティブにエイリアスを付けることができます (例:.type ID = string); 共用体と型のサポート サポートされていません。 完全にサポート テーブル>

ユーザー インターフェイスを使用する時期と種類

使用インターフェース:

• オブジェクトの形状を記述するとき、またはクラスを操作するとき。

interface User {
username: string, 
password: string,
email?: string // this is optional property
}

使用タイプ:

• ユニオン、タプル、または高度な型定義を定義するとき。

interface Address {
street: string,
city: string
}
interface User extends Address {
username: string,
password: string,
email?: string
}

結合タイプ:

class Admin implements User {
  username: string
  password: string
  email?: string
  street: string
  city: string

  constructor(username: string, password:string, street:string, city:string, email?:string){
    this.username = username;
    this.password = password;
    this.email = email || '';
    this.street = street;
    this.city = city;
  };
}

var aAdmin = new Admin("user1", "123", "3/2 street", "hcmc");
console.log(aAdmin);

ベストプラクティス:

1. オブジェクトの記述には interface を使用し、その他すべてには Type を使用します。
2. ユニオンや交差などのより高度な使用例には、Type を使用します。
3. それを参照するチームで作業する場合は、一貫性を保つために インターフェース を選択してください

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