Memahami Jenis dan Antara Muka dalam TypeScript

Antara muka

Apakah antara muka:

• Antara muka ialah satu cara untuk menentukan bentuk atau struktur objek dalam Typescript.
• Ia digunakan terutamanya untuk menerangkan pelan tindakan untuk objek, memastikan ia mematuhi struktur tertentu.

Ciri-ciri Utama:

1. Digunakan untuk Struktur Objek

• Mentakrifkan sifat, kaedah dan jenisnya.

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

2. Sokongan Lanjutan:

• Antara muka boleh memanjangkan antara muka lain untuk mewarisi sifat.

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

3. Kelas boleh melaksanakan antara muka:

• Menguatkuasakan bahawa kelas mematuhi struktur antara muka.

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);

output:

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

4. Boleh mengisytiharkan fungsi

• Antara muka boleh mengisytiharkan tandatangan fungsi

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

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

taip

Apakah Jenis:

• Jenis ialah cara yang fleksibel untuk menentukan alias jenis untuk hampir semua perkara dalam Typescript.
• Ia boleh menerangkan objek, kesatuan, persilangan, tupel dan banyak lagi.

Ciri-ciri Utama:

1. Alias ​​untuk sebarang jenis:

• Boleh mentakrifkan jenis primitif, objek, malah kesatuan dan persimpangan.

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

2. Jenis Persimpangan Sokongan:

• Gabungkan berbilang jenis menjadi satu

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

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

3. Sokongan Tuple:

• Boleh menentukan tatasusunan panjang tetap dengan jenis tertentu untuk setiap elemen.

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

4. Tidak boleh dibuka semula:

• Tidak seperti antara muka, anda tidak boleh mengisytiharkan semula atau melanjutkan jenis sedia ada.

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

Perbezaan utama antara Antara Muka dan Jenis

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

Aspek Antaramuka Taip Penggunaan Tentukan struktur Objek Fleksibel: boleh mentakrifkan objek, kesatuan, persilangan, tupel. Kebolehlanjutan Boleh dipanjangkan menggunakan lanjutan Boleh digabungkan menggunakan & (persimpangan). Buka Semula/Pengisytiharan Boleh dibuka semula untuk menambah sifat baharu. Tidak boleh dibuka semula. Jenis Primitif Tidak boleh mewakili primitif secara langsung. Boleh alias primitif (cth,.type ID = string); Sokongan Kesatuan dan Jenis Tidak disokong. Disokong sepenuhnya

Bila untuk Antara Muka Pengguna lwn. Jenis

Gunakan Antara Muka:

• Apabila menerangkan bentuk objek atau semasa bekerja dengan kelas.

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

Jenis Penggunaan:

• Apabila mentakrifkan kesatuan atau tupel, atau sebarang definisi jenis lanjutan.

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

Jenis Gabungan:

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);

Amalan Terbaik:

1. Gunakan antara muka untuk menerangkan objek dan Jenis untuk semua yang lain.
2. Gunakan Jenis untuk kes penggunaan yang lebih maju seperti kesatuan atau persimpangan.
3. Pilih antara muka untuk konsistensi jika anda bekerja dalam pasukan yang merujuknya

Atas ialah kandungan terperinci Memahami Jenis dan Antara Muka dalam TypeScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!