Bagaimana untuk membuat jenis bersyarat dalam TypeScript?

Dalam TypeScript, kita perlu menentukan jenis untuk setiap pembolehubah dan objek kerana ia adalah jenis bahasa yang ketat dan juga mengandungi jenis bersyarat.

Daripada jenis keadaan perkataan, kita boleh meramalkan bahawa kita perlu memilih pembolehubah berdasarkan keadaan tertentu. Ya, anda mendengarnya dengan betul. Sama seperti kita menggunakan pernyataan if-else untuk melaksanakan blok kod tertentu berdasarkan syarat tertentu, kita juga boleh memilih jenis pembolehubah berdasarkan syarat tertentu.

Dalam tutorial ini, kita akan belajar membuat jenis bersyarat dalam TypeScript.

Tatabahasa

Pengguna boleh mencipta jenis bersyarat dalam TypeScript mengikut sintaks berikut.

first_type extends second_type ? true_type : false_type;

Kami menggunakan operator ternary dalam sintaks di atas untuk mencipta jenis bersyarat.

Penjelasan tentang operan

• First_type - Ia adalah jenis atau pembolehubah.

• Second_type - Ia adalah jenis seperti nombor, rentetan, boolean dll.

• True_type - Jika first_type mengandungi second_type, true_type akan diberikan kepada pembolehubah.

• False_type - Jika first_type tidak melanjutkan second_type, false_type akan diberikan kepada pembolehubah.

Sekarang kita akan melihat contoh yang berbeza untuk mengetahui lebih lanjut tentang jenis bersyarat dalam TypeScript.

Contoh

Dalam contoh di bawah, kami mentakrifkan dua antara muka. Dalam TypeScript, antara muka juga berfungsi sama seperti alias jenis kerana ia mentakrifkan struktur objek atau kelas.

Selepas itu, kami melanjutkan antara muka2 dengan antara muka1. Ini bermakna antara muka2 mengandungi semua sifat antara muka1. Selepas itu, kami menetapkan jenis syarat kepada alias type1 dan type2 menggunakan operator ternary.

Dalam output, pengguna boleh menyemak jenis pembolehubah var1 dan var2.

// Creating the first interface
interface interface1 {
   prop1?: string;
   prop2: boolean;
}

// creating the second interface and extending it with the interface1
interface interface2 extends interface1 {
   prop3?: number;
   prop4: boolean;
}

// type of the type1 is number as interface2 extends interface1
type type1 = interface2 extends interface1 ? number : string;
let var1: type1 = 20;

// type of the type2 is string as interface1 doesn't extends the interface2
type type2 = interface1 extends interface2 ? number : string;
let var2: type2 = "Hello";

console.log("The type of var1 variable is " + typeof var1);
console.log("The type of var2 variable is " + typeof var2);

Apabila disusun, ia akan menjana kod JavaScript berikut -

var var1 = 20;
var var2 = "Hello";
console.log("The type of var1 variable is " + typeof var1);
console.log("The type of var2 variable is " + typeof var2);

Output

Kod di atas akan menghasilkan output berikut -

The type of var1 variable is number
The type of var2 variable is string

Kami telah mempelajari asas jenis bersyarat dan cara menciptanya.

Kenapa guna jenis bersyarat?

Kami akan mempelajari sebab dan cara jenis bersyarat berguna dalam pembangunan dunia sebenar.

Mari kita lihat kod berikut di mana kita membebankan fungsi func1() dengan menukar jenis pemulangannya berdasarkan jenis parameter. Kita boleh perhatikan bahawa jika jenis parameter adalah boolean, jenis pulangan ialah rentetan. Selain itu, jika jenis parameter ialah rentetan dan nombor, jenis pulangan masing-masing ialah nombor dan boolean.

function func1(param1: boolean): string;
function func1(param1: string): number;
function func1(param1: number): boolean;
function func1(param1: any): any {
   // function body of the overloaded function
}

Kita boleh membebankan fungsi dengan mencipta jenis bersyarat dengan satu definisi dalam satu baris dan bukannya menulis berbilang definisi dalam fungsi.

Contoh

Dalam contoh di bawah, kami telah mencipta jenis keadaan yang dipanggil test_type. Ia mendapat nilai dan mengembalikan jenis berdasarkan jenis nilai. Jika jenis nilai ialah nombor, ia mengembalikan nilai Boolean untuk nilai rentetan, ia mengembalikan nombor dan untuk nilai Boolean, ia mengembalikan jenis rentetan.

Dalam output, kita boleh memerhatikan pembolehubah yang diperolehi daripada test_type dan jenis pembolehubah abc.

// creating the conditional type
// it will accept the number, string, and boolean values
type test_type<T extends number | string | boolean> = T extends number
  ? boolean
  : T extends string
  ? number
  : string;
// getting the type of abc variable based on the value from the conditional test_type
let abc: test_type<"hello"> = 20;
console.log("The type of the variable abc is " + typeof abc);

let variable: test_type<typeof abc> = false;
console.log("The type of the variable is " + typeof variable);

Apabila disusun, ia akan menjana kod JavaScript berikut:

// getting the type of abc variable based on the value from the conditional test_type
var abc = 20;
console.log("The type of the variable abc is " + typeof abc);
var variable = false;
console.log("The type of the variable is " + typeof variable);

Output

Kod di atas akan menghasilkan output berikut -

The type of the variable abc is number
The type of the variable is boolean

Memandangkan kami telah menggunakan jenis bersyarat untuk pembolehubah, kami boleh menggunakannya untuk parameter fungsi atau jenis pulangan.

Pengguna dalam tutorial ini belajar tentang mencipta jenis bersyarat yang membolehkan kami memilih pembolehubah tertentu berdasarkan jenis atau nilai pembolehubah lain. Selain itu, kami mempelajari cara menggunakan jenis bersyarat untuk parameter fungsi dan jenis pulangan.

Atas ialah kandungan terperinci Bagaimana untuk membuat jenis bersyarat dalam TypeScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!