Setelah menemukan materi sesuai dengan prinsip-prinsip kode bersih untuk TypeScript dan membacanya, saya memutuskan untuk mengambil terjemahannya. Di sini saya ingin berbagi dengan Anda beberapa kutipan dari terjemahan ini, karena beberapa poin dari kode TypeScript murni mengulangi prinsip yang sama untuk JavaScript, saya tidak akan menjelaskannya di sini, jika itu akan menarik, terjemahan untuk JS sudah diterbitkan di hub (@ BoryaMogila ) atau Anda dapat membiasakan diri dengan mereka di sumber aslinya .

Untuk memulai, mari cari tahu apa prinsip-prinsip kode bersih ini. Namun sayangnya tidak mungkin memberikan definisi yang jelas tentang kode bersih. Sebagian itu semua tergantung pada orang-orang, misalnya, ketika Anda datang ke museum Anda melihat gambar dan berpikir apa itu keburukan, tetapi kemudian orang lain muncul dan mengatakan betapa megahnya. Ya, kita memiliki ciri-ciri umum tertentu yang pasti dari dunia di mana kita dapat mengatakan bahwa satu atau yang lain itu indah, tetapi kita tentu saja tidak dapat memberikan definisi untuk semua ini. Jadi di sini hanya beberapa kriteria kecil dari keindahan ini, ketaatan yang ia pilih sendiri sejak itu. ini bukan aturan yang diukir dalam granit. Ini hanya rekomendasi.

Variabel

Gunakan enum untuk mendokumentasikan

Enam dapat membantu mendokumentasikan kode Anda. Misalnya, ketika kami khawatir bahwa variabel kami berbeda dari nilai.

Buruk:

const GENRE = { ROMANTIC: 'romantic', DRAMA: 'drama', COMEDY: 'comedy', DOCUMENTARY: 'documentary', } projector.configureFilm(GENRE.COMEDY); class Projector { // delactation of Projector configureFilm(genre) { switch (genre) { case GENRE.ROMANTIC: // some logic to be executed } } } 

Baik:

 enum GENRE { ROMANTIC, DRAMA, COMEDY, DOCUMENTARY, } projector.configureFilm(GENRE.COMEDY); class Projector { // delactation of Projector configureFilm(genre) { switch (genre) { case GENRE.ROMANTIC: // some logic to be executed } } } 

Fungsi

Hindari pengecekan tipe

TypeScript adalah superset sintaksis JavaScript dan menambahkan pemeriksaan tipe statis tambahan untuk bahasa tersebut. Selalu lebih suka menentukan jenis variabel, parameter, dan mengembalikan nilai untuk memanfaatkan sepenuhnya TypeScript. Ini membuat refactoring masa depan lebih mudah.

Buruk:

 function travelToTexas(vehicle: Bicycle | Car) { if (vehicle instanceof Bicycle) { vehicle.pedal(currentLocation, new Location('texas')); } else if (vehicle instanceof Car) { vehicle.drive(currentLocation, new Location('texas')); } } 

Baik:

 type Vehicle = Bicycle | Car; function travelToTexas(vehicle: Vehicle) { vehicle.move(currentLocation, new Location('texas')); } 

Gunakan iterator dan generator

Gunakan generator dan iterator saat bekerja dengan koleksi data yang digunakan sebagai aliran.
Ada beberapa alasan untuk ini:

• memisahkan objek yang dipanggil dari implementasi generator dalam arti bahwa objek yang dipanggil menentukan berapa banyak elemen
  miliki untuk akses
• eksekusi malas, barang dilewatkan pada permintaan
• dukungan bawaan untuk elemen iterasi menggunakan sintaks for-of
• iterators memungkinkan Anda untuk menerapkan pola iterator yang dioptimalkan

Buruk:

 function fibonacci(n: number): number[] { if (n === 1) return [0]; if (n === 2) return [0, 1]; const items: number[] = [0, 1]; while (items.length < n) { items.push(items[items.length - 2] + items[items.length - 1]); } return items; } function print(n: number) { fibonacci(n).forEach(fib => console.log(fib)); } // Print first 10 Fibonacci numbers. print(10); 

Baik:

 // Generates an infinite stream of Fibonacci numbers. // The generator doesn't keep the array of all numbers. function* fibonacci(): IterableIterator<number> { let [a, b] = [0, 1]; while (true) { yield a; [a, b] = [b, a + b]; } } function print(n: number) { let i = 0; for (const fib of fibonacci()) { if (i++ === n) break; console.log(fib); } } // Print first 10 Fibonacci numbers. print(10); 

Ada perpustakaan yang memungkinkan Anda untuk bekerja dengan iterator dengan cara yang sama seperti dengan array Anda sendiri, dengan merantai metode seperti map , slice , forEach , dll. Lihat contoh itiriri untuk manipulasi iterator tingkat lanjut (atau itiriri-async untuk memanipulasi iterator asinkron).

 import itiriri from 'itiriri'; function* fibonacci(): IterableIterator<number> { let [a, b] = [0, 1]; while (true) { yield a; [a, b] = [b, a + b]; } } itiriri(fibonacci()) .take(10) .forEach(fib => console.log(fib)); 

Objek dan Struktur Data

Gunakan getter dan setter

TypeScript mendukung sintaks getter dan setter. Menggunakan getter dan setter untuk mengakses data objek jauh lebih baik daripada langsung mengakses propertinya. "Kenapa?" kamu bertanya. Berikut daftar alasannya:

• Jika Anda ingin menerapkan lebih dari sekadar akses ke properti, Anda perlu mengubah implementasi di satu tempat, dan tidak di seluruh kode
• Validasi mudah diimplementasikan pada level implementasi yang set
• Enkapsulasi keadaan internal
• Mudah untuk menambahkan pencatatan dan penanganan kesalahan pada tingkat pengambil dan penyetel
• Anda dapat dengan malas memuat properti objek Anda, misalnya, dari server

Buruk:

 type BankAccount = { balance: number; // ... } const value = 100; const account: BankAccount = { balance: 0, // ... }; if (value < 0) { throw new Error('Cannot set negative balance.'); } account.balance = value; 

Baik:

 class BankAccount { private accountBalance: number = 0; get balance(): number { return this.accountBalance; } set balance(value: number) { if (value < 0) { throw new Error('Cannot set negative balance.'); } this.accountBalance = value; } // ... } //  `BankAccount`   . //    ,      , //      ``, //      . const account = new BankAccount(); account.balance = 100; 

Buat objek dengan bidang pribadi / aman

TypeScript mendukung sarana public (default) , protected dan private untuk mengakses properti kelas.

Buruk:

 class Circle { radius: number; constructor(radius: number) { this.radius = radius; } perimeter() { return 2 * Math.PI * this.radius; } surface() { return Math.PI * this.radius * this.radius; } } 

Baik:

 class Circle { constructor(private readonly radius: number) { } perimeter() { return 2 * Math.PI * this.radius; } surface() { return Math.PI * this.radius * this.radius; } } 

Pembaca yang budiman, prinsip apa yang Anda gunakan saat menggunakan TypeScript?

Dilanjutkan ...