Twist Seronok JavaScript dan Cara TypeScript Menjadikannya Lebih Baik

JavaScript ialah bahasa yang kita semua suka, bukan? Ia fleksibel, ringan dan berjalan di mana-mana. Tetapi untuk semua kehebatannya, katakan secara jujur, ia boleh menjadi pelik. Jenis pelik yang membuat anda mempersoalkan kewarasan anda selepas melihat sesuatu yang tidak sepatutnya berfungsi.

Dalam artikel ini, kami akan meninjau beberapa kelemahan dalam JavaScript - tingkah laku yang mengejutkan anda apabila anda tidak menjangkakannya. Nasib baik, terdapat seorang kesatria dalam perisai bersinar untuk pembangun yang dipanggil TypeScript. Kami menunjukkan kepada anda di sini bagaimana ia boleh menyelamatkan anda daripada merobek rambut anda dengan menjadikan keanehan JavaScript tersebut agak lebih terurus.

---

1. Yang Hebat == vs === Debat

JavaScript memberi kita dua rasa kesaksamaan: == atau kesaksamaan longgar dan === atau kesaksamaan yang ketat.

console.log(0 == '0'); // true
console.log(0 === '0'); // false

Tunggu, apa? Ya, JavaScript membuat 0 dan '0' dianggap sama dengan ==, tetapi tidak dengan ===. Ini kerana == melakukan paksaan menaip, atau menukar jenis, sebelum melakukan perbandingan. Ia cuba membantu, menjadikan rentetan itu menjadi nombor untuk anda—tetapi bantuan ini membawa kepada pepijat.

Bayangkan menggunakan == pada input pengguna untuk menyemak nombor. Anda mungkin menjadi benar apabila jenisnya tidak sama yang membawa kepada tingkah laku yang tidak dijangka yang sukar untuk dikesan. Mengapa perkara ini penting? Kerana jenis paksaan JavaScript sering berfungsi sehingga ia memecahkan sesuatu yang penting.

Bagaimana TypeScript Membantu

TypeScript sudah pun menguatkuasakan keselamatan jenis di luar kotak. Jika anda membandingkan dua perkara daripada jenis yang berbeza, ia akan menjerit lama sebelum anda boleh menjalankan sebarang kod:

let a: number = 0;
let b: string = '0';

console.log(a === b); // TypeScript Error: This comparison is invalid

Sebarang kejutan hilang membandingkan nombor dengan rentetan. TypeScript memastikan anda sentiasa membandingkan epal dan epal atau dalam kes ini nombor dengan nombor.

---

2. The Mysterious undefined vs null

Kedua-dua undefined dan null bercakap tiada apa-apa, tetapi dengan cara yang berbeza secara halus. undefined ialah perkara yang diberikan oleh JavaScript kepada pembolehubah yang belum dimulakan, manakala null digunakan apabila anda sengaja mahu memberikan nilai kosong. Mereka berbeza, namun cukup serupa untuk mengelirukan.

let foo;
console.log(foo); // undefined

let bar = null;
console.log(bar); // null

Melainkan anda berhati-hati, anda mungkin akhirnya menyemak satu tetapi tidak yang lain, yang mengakibatkan beberapa pepijat yang mengelirukan.

if (foo == null) {
    console.log("This catches both undefined and null");
}

Ini berfungsi tetapi boleh membawa kepada pepijat halus jika anda tidak membezakan dengan jelas antara keduanya.

Bagaimana TypeScript Membantu

TypeScript menggalakkan anda untuk menyatakan dengan jelas dan tepat sama ada sesuatu boleh menjadi batal atau tidak ditentukan. Ia melakukan ini dengan membuat anda mengendalikan kedua-dua kes secara eksplisit, jadi anda pasti tentang perkara yang berlaku:

let foo: number | undefined;
let bar: number | null = null;

// TypeScript will enforce these constraints
foo = null; // Error
bar = 5; // No problem!

Dengan TypeScript, anda memutuskan jenis yang dibenarkan supaya anda tidak mencampurkan jenis secara tidak sengaja. Ketegasan jenis ini melindungi anda daripada pepijat yang anda terlupa untuk menyemak sama ada batal atau tidak ditentukan.

---

3. Kes Penasaran NaN (Bukan Nombor)

Pernahkah anda terserempak dengan NaN yang digeruni? Ia adalah singkatan untuk Not-a-Number, dan ia muncul apabila anda cuba melakukan operasi matematik yang tidak masuk akal.

console.log(0 / 0);  // NaN
console.log("abc" - 5);  // NaN

Inilah hasil tangkapannya: NaN sebenarnya daripada jenis nombor. Betul, Bukan-Nombor ialah nombor!

console.log(typeof NaN); // "number"

Ini boleh membawa kepada beberapa hasil yang benar-benar pelik jika anda tidak menyemak NaN secara eksplisit. Lebih buruk lagi, NaN tidak pernah sama dengan dirinya sendiri, jadi anda tidak boleh membandingkannya dengan mudah untuk memeriksa sama ada ia wujud.

console.log(NaN === NaN); // false

Bagaimana TypeScript Membantu

TypeScript boleh mengurangkan isu ini dengan menguatkuasakan pemeriksaan jenis yang betul dan menangkap operasi yang tidak baik pada masa penyusunan. Jika TypeScript boleh menyimpulkan bahawa operasi akan mengembalikan NaN, ia boleh menimbulkan ralat sebelum kod anda berjalan.

let result: number = 0 / 0; // Warning: Possible 'NaN'

TypeScript juga boleh membantu anda mengecilkan masa dan tempat NaN mungkin muncul, menggalakkan pengendalian nilai berangka yang lebih baik.

---

4. The Wild ini

ini dalam JavaScript ialah salah satu konsep yang paling berkuasa tetapi mudah disalah fahami. Nilai ini bergantung sepenuhnya pada bagaimana fungsi dipanggil, yang boleh membawa kepada tingkah laku yang tidak diingini dalam konteks tertentu.

const person = {
    name: 'Alice',
    greet() {
        console.log('Hello, ' + this.name);
    }
};

setTimeout(person.greet, 1000); // Uh-oh, what happened here?

Apa yang anda jangkakan ialah melihat "Hello, Alice" dicetak selepas satu saat, tetapi sebaliknya, anda akan mendapat Hello, undefined. kenapa? Kerana setTimeout dalam ini merujuk kepada objek global, bukan objek orang.

Bagaimana TypeScript Membantu

TypeScript boleh membantu anda mengelakkan jenis isu ini dengan menggunakan fungsi anak panah yang tidak mempunyai ini sendiri dan mengekalkan konteks objek yang berada di dalamnya.

const person = {
    name: 'Alice',
    greet: () => {
        console.log('Hello, ' + person.name); // Always refers to 'person'
    }
};

setTimeout(person.greet, 1000); // No more surprises!

Tiada lagi tingkah laku ini yang tidak dijangka. TypeScript memaksa anda berfikir tentang konteks dan membantu anda mengikat ini dengan betul, mengurangkan risiko pepijat pelik yang tidak ditentukan.

---

5. Function Hoisting: When Order Does Not Matter

JavaScript functions are hoisted to the top of the scope; that means you can invoke them even before you have declared them in your code. This is kind of a cool trick, but can also be confusing if you are not paying attention to what's going on.

greet();

function greet() {
    console.log('Hello!');
}

While this can be convenient, it can also cause confusion, especially when you're trying to debug your code.

This works just fine, because of function declaration hoisting. But it can make your code harder to follow, especially for other developers (or yourself after a few months away from the project).

How TypeScript Helps

TypeScript does not change how hoisting works but it gives you clearer feedback about your code's structure. If you accidentally called a function before it is defined, TypeScript will let you know immediately.

greet(); // Error: 'greet' is used before it’s defined

function greet() {
    console.log('Hello!');
}

TypeScript forces you to do some cleanup, where your functions are declared before they are used. It makes your code much more maintainable this way.

---

Wrapping It Up

JavaScript is an amazing language, but it can certainly be quirky at times. By using TypeScript, you can tame some of JavaScript’s weirdest behaviors and make your code safer, more reliable, and easier to maintain. Whether you’re working with null and undefined, taming this, or preventing NaN disasters, TypeScript gives you the tools to avoid the headaches that can arise from JavaScript’s flexible—but sometimes unpredictable—nature.

So next time you find yourself puzzling over a strange JavaScript quirk, remember: TypeScript is here to help!

Happy coding!

Atas ialah kandungan terperinci Twist Seronok JavaScript dan Cara TypeScript Menjadikannya Lebih Baik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!