Soalan Temuduga Teknikal - Skrip Taip Bahagian

pengenalan

Hello, hello!! :D

Semoga anda semua sihat!

Perasaan kami sebenarnya:

Saya kembali dengan bahagian kedua siri ini. ?

Dalam bab ini, kita akan menyelami soalan ✨Typescript✨ yang saya hadapi semasa temu duga.

Saya akan pendekkan intro, jadi mari masuk terus!

## Soalan
1. Apakah generik dalam skrip taip? Apakah itu ?
2. Apakah perbezaan antara antara muka dan jenis?
3. Apakah perbezaan antara mana-mana, batal, tidak diketahui dan tidak pernah?

---

Soalan 1: Apakah generik dalam skrip taip? Apakah ?

Jawapan ringkasnya ialah...

Generik dalam TypeScript membolehkan kami mencipta fungsi, kelas dan antara muka boleh guna semula yang boleh berfungsi dengan pelbagai jenis, tanpa perlu menentukan yang tertentu. Ini membantu untuk mengelakkan menggunakan mana-mana sebagai jenis tangkapan semua.

Sintaks digunakan untuk mengisytiharkan jenis generik, tetapi anda juga boleh menggunakan , , atau mana-mana pemegang tempat lain.

Bagaimana ia berfungsi?

Mari kita pecahkan dengan contoh.

Andaikan saya mempunyai fungsi yang menerima parameter dan mengembalikan elemen daripada jenis yang sama. Jika saya menulis fungsi itu dengan jenis tertentu, ia akan kelihatan seperti ini:

function returnElement(element: string): string {
 return element;
}


const stringData = returnElement("Hello world");

Saya tahu jenis stringData akan menjadi "rentetan" kerana saya mengisytiharkannya.

Tetapi apa yang berlaku jika saya mahu mengembalikan jenis yang berbeza?

const numberData = returnElement(5);

Saya akan menerima mesej ralat kerana jenisnya berbeza daripada yang diisytiharkan.

Penyelesaian mungkin dengan mencipta fungsi baharu untuk mengembalikan jenis nombor.

function returnNumber(element: number): number {
 return element;
}

Pendekatan itu akan berjaya, tetapi ia boleh membawa kepada kod pendua.

Kesilapan biasa untuk mengelakkan perkara ini ialah menggunakan mana-mana dan bukannya jenis yang diisytiharkan, tetapi itu mengalahkan tujuan keselamatan jenis.

function returnElement2(element: any): any {
 return element;
}

Walau bagaimanapun, menggunakan mana-mana menyebabkan kami kehilangan ciri keselamatan jenis dan pengesanan ralat yang ada pada TypeScript.
Selain itu, jika anda mula menggunakan mana-mana bila-bila masa anda perlu mengelakkan kod pendua, kod anda akan kehilangan kebolehselenggaraan.

Ini adalah tepat apabila ia berfaedah untuk menggunakan generik.

function returnGenericElement<T>(element: T): T {
 return element;
}

Fungsi akan menerima elemen jenis tertentu; jenis itu akan menggantikan generik dan kekal begitu sepanjang masa jalan.

Pendekatan ini membolehkan kami menghapuskan kod pendua sambil mengekalkan keselamatan jenis.

function returnElement(element: string): string {
 return element;
}


const stringData = returnElement("Hello world");

Tetapi bagaimana jika saya memerlukan fungsi khusus yang datang daripada tatasusunan?

Kami boleh mengisytiharkan generik sebagai tatasusunan dan menulisnya seperti ini:

const numberData = returnElement(5);

Kemudian,

function returnNumber(element: number): number {
 return element;
}

Jenis yang diisytiharkan akan digantikan dengan jenis yang disediakan sebagai parameter.

Kami juga boleh menggunakan generik dalam kelas.

function returnElement2(element: any): any {
 return element;
}

Saya ada tiga perkara untuk dibuat tentang kod ini:

1. add ialah fungsi anak panah tanpa nama (yang saya bincangkan dalam bab pertama).
2. Generik boleh dinamakan , , atau bahkan , jika anda mahu.
3. Memandangkan kami belum menentukan jenisnya lagi, kami tidak boleh melaksanakan operasi di dalam kelas. Oleh itu, kita perlu membuat instantiate kelas dengan mengisytiharkan jenis generik dan kemudian melaksanakan fungsi.

Begini rupanya:

function returnGenericElement<T>(element: T): T {
 return element;
}

Dan, satu perkara terakhir untuk ditambah sebelum menamatkan soalan ini.
Ingat bahawa generik ialah ciri Typescript. Ini bermakna generik akan dipadamkan apabila kami menyusunnya ke dalam Javascript.

Dari

const stringData2 = returnGenericElement("Hello world");


const numberData2 = returnGenericElement(5);

kepada

function returnLength<T>(element: T[]): number {
 return element.length;
}

---

Soalan 2: Apakah perbezaan antara antara muka dan jenis?

Jawapan ringkasnya ialah:

1. Pengisytiharan penggabungan berfungsi dengan antara muka tetapi tidak dengan jenis.
2. Anda tidak boleh menggunakan alat dalam kelas dengan jenis kesatuan.
3. Anda tidak boleh menggunakan lanjutan dengan antara muka menggunakan jenis kesatuan.

Mengenai perkara pertama, apa yang saya maksudkan dengan pengisytiharan penggabungan?

Biar saya tunjukkan kepada anda:
Saya telah menentukan antara muka yang sama dua kali semasa menggunakannya dalam kelas. Kelas kemudiannya akan menggabungkan sifat yang diisytiharkan dalam kedua-dua takrifan.

const stringLength = returnLength(["Hello", "world"]);

Ini tidak berlaku dengan jenis. Jika kami cuba menentukan jenis lebih daripada sekali, TypeScript akan menimbulkan ralat.

class Addition<U> {
 add: (x: U, y: U) => U;
}

Mengenai perkara berikut, mari kita bezakan antara jenis kesatuan dan persimpangan:

Jenis kesatuan membolehkan kami menentukan bahawa nilai boleh menjadi salah satu daripada beberapa jenis. Ini berguna apabila pembolehubah boleh menyimpan berbilang jenis.

Jenis persimpangan membolehkan kami menggabungkan jenis menjadi satu. Ia ditakrifkan menggunakan & operator.

const operation = new Addition<number>();


operation.add = (x, y) => x + y; => We implement the function here


console.log(operation.add(5, 6)); // 11

Jenis kesatuan:

function returnGenericElement<T>(element: T): T {
 return element;
}

Jenis persimpangan:

function returnElement(element: string): string {
 return element;
}


const stringData = returnElement("Hello world");

Jika kami cuba menggunakan kata kunci implements dengan jenis kesatuan, seperti Animal, TypeScript akan menimbulkan ralat. Ini kerana implement mengharapkan antara muka atau jenis tunggal, bukannya jenis kesatuan.

const numberData = returnElement(5);

Skrip taip membolehkan kami menggunakan “implements” dengan:

a. Jenis persimpangan

function returnNumber(element: number): number {
 return element;
}

b. Antara muka

function returnElement2(element: any): any {
 return element;
}

function returnGenericElement<T>(element: T): T {
 return element;
}

c. Jenis Tunggal.

const stringData2 = returnGenericElement("Hello world");


const numberData2 = returnGenericElement(5);

Isu yang sama berlaku apabila kami cuba menggunakan sambungan dengan jenis kesatuan. TypeScript akan membuang ralat kerana antara muka tidak dapat melanjutkan jenis kesatuan. Berikut ialah contoh

function returnLength<T>(element: T[]): number {
 return element.length;
}

Anda tidak boleh melanjutkan jenis kesatuan kerana ia mewakili berbilang jenis yang mungkin dan tidak jelas sifat jenis yang harus diwarisi.

TETAPI anda boleh memanjangkan jenis atau antara muka.

const stringLength = returnLength(["Hello", "world"]);

Selain itu, anda boleh melanjutkan satu jenis.

class Addition<U> {
 add: (x: U, y: U) => U;
}

---

Soalan 3: Apakah perbezaan antara mana-mana, batal, tidak diketahui, dan tidak pernah?

Jawapan ringkas:

Mana-mana => Ia adalah pembolehubah jenis teratas (juga dipanggil jenis universal atau supertype universal). Apabila kita menggunakan mana-mana dalam pembolehubah, pembolehubah boleh memegang sebarang jenis. Ia biasanya digunakan apabila jenis pembolehubah tertentu tidak diketahui atau dijangka berubah. Walau bagaimanapun, menggunakan mana-mana tidak dianggap sebagai amalan terbaik; adalah disyorkan untuk menggunakan generik sebaliknya.

const operation = new Addition<number>();


operation.add = (x, y) => x + y; => We implement the function here


console.log(operation.add(5, 6)); // 11

Walaupun mana-mana membenarkan operasi seperti kaedah panggilan, pengkompil TypeScript tidak akan menangkap ralat pada peringkat ini. Contohnya:

function returnGenericElement<T>(element: T): T {
 return element;
}

Anda boleh menetapkan sebarang nilai kepada mana-mana pembolehubah:

function returnGenericElement(element) {
 return element;
}

Selain itu, anda boleh menetapkan sebarang pembolehubah kepada pembolehubah lain dengan jenis yang ditentukan:

interface CatInterface {
 name: string;
 age: number;
}


interface CatInterface {
 color: string;
}


const cat: CatInterface = {
 name: "Tom",
 age: 5,
 color: "Black",
};

---

Tidak diketahui => Jenis ini, seperti mana-mana, boleh memegang sebarang nilai dan juga dianggap sebagai jenis teratas. Kami menggunakannya apabila kami tidak mengetahui jenis pembolehubah, tetapi ia akan ditetapkan kemudian dan kekal sama semasa masa jalan. Unknow ialah jenis yang kurang permisif berbanding mana-mana.

type dog = {
 name: string;
 age: number;
};


type dog = { // Duplicate identifier 'dog'.ts(2300)
 color: string;
};


const dog1: dog = {
 name: "Tom",
 age: 5,
 color: "Black", //Object literal may only specify known properties, and 'color' does not exist in type 'dog'.ts(2353)
};

Memanggil kaedah secara langsung pada yang tidak diketahui akan mengakibatkan ralat masa kompilasi:

type cat = {
 name: string;
 age: number;
};


type dog = {
 name: string;
 age: number;
 breed: string;
};

Sebelum menggunakannya, kita harus melakukan semakan seperti:

type animal = cat | dog;

Seperti mana-mana, kami boleh menetapkan sebarang jenis kepada pembolehubah.

type intersectionAnimal = cat & dog;

Walau bagaimanapun, kami tidak boleh menetapkan jenis yang tidak diketahui kepada jenis lain, tetapi mana-mana atau tidak diketahui.

function returnElement(element: string): string {
 return element;
}


const stringData = returnElement("Hello world");

Ini akan menunjukkan ralat kepada kami

---

Null => Pembolehubah boleh memegang sama ada jenis. Ini bermakna pembolehubah tidak mempunyai nilai.

const numberData = returnElement(5);

Percubaan untuk menetapkan sebarang jenis lain kepada pembolehubah nol akan mengakibatkan ralat:

function returnNumber(element: number): number {
 return element;
}

---

Jangan sekali-kali => Kami menggunakan jenis ini untuk menyatakan bahawa fungsi tidak mempunyai nilai pulangan.

function returnElement2(element: any): any {
 return element;
}

---

penghujungnya...

Kami selesai dengan Typescript,

Untuk hari ini (?

Saya harap ini berguna kepada seseorang.

Jika anda mempunyai sebarang soalan temuduga teknikal yang anda ingin saya jelaskan, sila beritahu saya dalam ulasan. ??

Selamat berhujung minggu ?

Atas ialah kandungan terperinci Soalan Temuduga Teknikal - Skrip Taip Bahagian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!