TypeScript Tagged Unions ialah OP

Pernah bergelut dengan mengendalikan pelbagai bentuk objek dalam TypeScript dan inginkan penyelesaian yang lebih selamat jenis?

Jika ya, anda tidak bersendirian. Ramai pembangun tidak mengetahui potensi penuh yang ditawarkan oleh kesatuan teg (juga dikenali sebagai kesatuan yang didiskriminasi) dalam TypeScript. Ciri berkuasa ini boleh meningkatkan keselamatan, kebolehbacaan dan kebolehselenggaraan kod anda. Dalam artikel ini, kami akan mendalami kesatuan berteg dan meneroka cara mereka boleh meningkatkan kemahiran TypeScript anda.

?️ Apakah Kesatuan Bertanda?

Kesatuan berteg membolehkan anda membuat jenis yang mewakili salah satu daripada beberapa bentuk yang mungkin, masing-masing dengan sifat membezakan yang dikenali sebagai "tag" atau "pendiskriminasi." Ini membolehkan TypeScript mengecilkan jenis dalam semakan bersyarat, memastikan kod anda mengendalikan semua kemungkinan kes secara eksplisit.

? Mengapa Anda Perlu Peduli?

Keselamatan Jenis Dipertingkat

Kesatuan bertanda membantu menangkap ralat pada masa penyusunan dengan memastikan semua kes yang mungkin dikendalikan. Ini mengurangkan ralat masa jalan dan menjadikan kod anda lebih mantap.

Kod yang Jelas dan Boleh Diselenggara

Dengan mentakrifkan bentuk setiap kes secara eksplisit, kod anda menjadi lebih mudah dibaca dan lebih mudah diselenggara. Pembangun masa depan (atau anda juga akan datang) akan berterima kasih kepada anda!

Pemeriksaan Kehabisan

TypeScript boleh memberi amaran kepada anda jika anda terlupa mengendalikan kemungkinan kes, memastikan kod anda mengambil kira semua senario.

? Kesatuan yang ditandai dengan Contoh

Pertimbangkan senario di mana anda mempunyai bentuk yang berbeza dan ingin mengira kawasannya:

// Define interfaces with a discriminant property 'kind'
interface Circle {
  kind: 'circle';
  radius: number;
}

interface Rectangle {
  kind: 'rectangle';
  width: number;
  height: number;
}

interface Triangle {
  kind: 'triangle';
  base: number;
  height: number;
}

// Create a union type of all shapes
type Shape = Circle | Rectangle | Triangle;

// Function to calculate the area based on shape kind
function calculateArea(shape: Shape): number {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius ** 2;

    case 'rectangle':
      return shape.width * shape.height;

    case 'triangle':
      return (shape.base * shape.height) / 2;

    default:
      // The 'never' type ensures all cases are handled
      const _exhaustiveCheck: never = shape;
      return _exhaustiveCheck;
  }
}

Apa yang Berlaku Di Sini?

• Harta Diskriminasi (jenis): Setiap antara muka termasuk sifat jenis dengan jenis literal. Sifat ini bertindak sebagai teg untuk kesatuan.
• Jenis Kesatuan (Bentuk): Menggabungkan semua antara muka bentuk menjadi satu jenis.
• Penyempitan Jenis: Di dalam penyataan suis, TypeScript mengetahui dengan tepat bentuk mana yang ditanganinya berdasarkan sifat jenis.
• Semakan Kehabisan: Kes lalai dengan jenis tidak pernah memastikan bahawa jika bentuk baharu ditambah tetapi tidak dikendalikan, TypeScript akan menghasilkan ralat masa kompilasi.

?️ Contoh: Pengurusan Negeri

Kesatuan bertanda sangat berguna dalam senario pengurusan negeri, seperti mewakili pelbagai keadaan operasi tak segerak (cth., pengambilan data).

interface LoadingState {
  status: 'loading';
}

interface SuccessState {
  status: 'success';
  data: string;
}

interface ErrorState {
  status: 'error';
  error: string;
}

type AppState = LoadingState | SuccessState | ErrorState;

function renderApp(state: AppState) {
  switch (state.status) {
    case 'loading':
      return 'Loading...';
    case 'success':
      return `Data: ${state.data}`;
    case 'error':
      return `Error: ${state.error}`;
    // default case can be omitted because typescript is making sure all cases are covered!
  }
}

? Mengapa Ini Bagus?

• Perwakilan Negeri yang Jelas: Setiap antara muka mewakili keadaan aplikasi yang berbeza, menjadikannya mudah difahami dan diurus.

• Jenis Keselamatan dengan Akses Data: Apabila keadaan 'berjaya', TypeScript mengetahui keadaan itu mempunyai sifat data. Begitu juga, apabila keadaan 'error', ia tahu tentang sifat ralat. Ini menghalang anda daripada mengakses sifat yang tidak wujud dalam keadaan tertentu secara tidak sengaja.

• Semakan Kehabisan: Jika anda menambah keadaan baharu (cth., EmptyState dengan status: 'kosong'), TypeScript akan memaklumkan anda untuk mengendalikan kes baharu ini dalam fungsi renderApp.

• Kebolehselenggaraan yang Dipertingkatkan: Apabila aplikasi anda berkembang, mengurus keadaan berbeza menjadi lebih terurus. Perubahan dalam satu bahagian kod menggesa kemas kini yang diperlukan di tempat lain, mengurangkan pepijat.

? Petua untuk Menggunakan Kesatuan Bertanda

Pendiskriminasi Konsisten: Gunakan nama harta yang sama (cth., jenis, jenis atau status) merentas semua jenis.
Jenis Literal: Pastikan sifat diskriminator menggunakan jenis literal ('e-mel', 'sms', dll.) untuk penyempitan jenis yang tepat.
Elakkan String Enums: Lebih suka jenis literal rentetan daripada enum untuk diskriminasi memastikan jenis mengecilkan terus.

? Kesimpulan

Kesatuan berteg ialah ciri berkuasa dalam TypeScript yang boleh membantu anda menulis kod yang lebih selamat dan boleh diselenggara. Dengan mengendalikan setiap jenis yang mungkin secara eksplisit, anda mengurangkan kemungkinan ralat yang tidak dijangka dan menjadikan kod anda lebih mudah difahami.

Beri kesatuan teg mencuba dalam projek TypeScript semasa atau seterusnya anda dan rasai manfaatnya secara langsung!

? Bacaan Selanjutnya

• Buku Panduan TypeScript: Kesatuan dan Jenis Persimpangan
• Apakah Kesatuan Terdiskriminasi TypeScript?

Atas ialah kandungan terperinci TypeScript Tagged Unions ialah OP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!