Sebelum TypeScript 3.7, referensi tipe rekursif akan menyebabkan kompiler TypeScript melempar pesan kesalahan referensi melingkar. Pengembang harus membuat solusi (yaitu menggunakan antarmuka) untuk mencapai referensi rekursif.

Jenis rekursif diperkenalkan sejak TypeScript 3.7. Ini memungkinkan referensi ke tipe dari definisinya sendiri dengan menunda referensi tipe hingga instantiating .

Karena rekursi adalah pola pemrograman yang umum, ada banyak kasus penggunaan di mana tipe rekursif sangat berguna. Menggunakan tipe rekursif, kita dapat merepresentasikan struktur data yang kompleks dengan cara yang ringkas.

Pada artikel ini, saya akan mengeksplorasi cara menggunakan alias tipe rekursif di TypeScript.

Gunakan tipe rekursif untuk mewakili struktur data

Tipe rekursif dapat digunakan untuk mewakili tipe data yang memiliki struktur bersarang. Di bawah ini adalah contohnya:

const myData = {
    top: 1,
    rest: {
        top: 2,
        rest: {
            top: 3,
            rest: null
        }
    }
};

type Stack<T> = {
  top: T;
  rest: Stack<T> | null;
} ;

// Then we can strong typed the data
const myData: Stack<number> = {
    top: 1,
    rest: {
        top: 2,
        rest: {
            top: 3,
            rest: null
        }
    }
};

Contoh bagus lainnya adalah tipe data JSON. Dalam contoh taman bermain TypeScript tipe rekursif, cuplikan kode berikut digunakan untuk menentukan tipe JSON:

type Json = string | number | boolean | null | Json[] | { [key: string]: Json };

const exampleStatusJSON: Json = {
  available: true,
  username: "Jean-loup",
  room: {
    name: "Highcrest",
    // Cannot add functions into the Json type
    // update: () => {}
  },
};

Seperti yang ditunjukkan pada contoh di atas, penggunaan tipe rekursif membuat definisi tipe lebih bersih dan lebih mudah dibaca, karena definisi tipe cocok dengan sifat rekursif dari struktur data.

Batasan Jenis Rekursif

Alias ​​​​tipe rekursif dalam TypeScript memiliki batasan untuk tidak mengizinkan "instansiasi mandiri" langsung. Di bawah ini adalah contohnya:

type Stack<T> = {
  top: T;
  rest: Stack<T> | null;
} ;

type Stack1 = Stack<Stack1>;

Penggunaan Tingkat Lanjut

Dengan menggabungkan alias tipe rekursif dengan fitur tipe lanjutan lainnya (yaitu Tipe Bersyarat), kita dapat mencapai beberapa operasi tipe yang kompleks.

Katakanlah kita memiliki ClientType yang mewakili data klien.

type Client = {
  id: number,
  name: string,
  address: {
    id: number,
    suburb: {
      postCode: number
    }
  }
};

type postCode = PropertyType<Client, 'address.suburb.postCode'>;
// the postCode type returns "number" 
type noExist = PropertyType<Client, 'address.suburb.noExist'>;
// return "never" because the path does not exist

Alias ​​​​tipe rekursif cocok untuk situasi ini, karena memungkinkan kita melintasi struktur tipe objek.

Di bawah ini adalah implementasi dariPropertyType

type PropertyType<T, Path extends string> =
    Path extends keyof T ? T[Path] :
        Path extends `${infer K}.${infer R}` ? K extends keyof T ? PropertyType<T[K], R> : 
        never :
    never;

• Generik
• Menyimpulkan
• Jenis Bersyarat
• keyof operator

Path extends keyof T ? T[Path]

Path extends `${infer K}.${infer R}` ? K extends keyof T ? PropertyType<T[K], R>

Ringkasan

Pada artikel ini, kita membahas beberapa contoh alias tipe rekursif. Alias ​​​​tipe rekursif dapat mewakili struktur data dengan sifat rekursi, dan kita juga dapat menggunakannya untuk melintasi atau memanipulasi tipe data yang kompleks.

Saya harap artikel ini dapat bermanfaat bagi Anda. Selamat pemrograman!

Tingkatkan Pengodean

Terima kasih telah menjadi bagian dari komunitas kami! Sebelum kamu pergi:

• Tepuk tangan untuk ceritanya dan ikuti penulisnya
• Lihat lebih banyak konten di publikasi Level Up Coding
• Kursus wawancara coding gratis ⇒ Lihat Kursus
• Ikuti kami: Twitter | LinkedIn | Buletin