Die lustigen Wendungen von JavaScript und wie TypeScript es besser macht

JavaScript ist eine Sprache, die wir alle lieben, oder? Es ist flexibel, leicht und passt überall hin. Aber seien wir ehrlich: Bei aller Großartigkeit kann es seltsam sein. Die Art von Seltsamkeit, die einen an seinem Verstand zweifeln lässt, nachdem man gesehen hat, dass etwas funktioniert, was eigentlich nicht funktionieren sollte.

In diesem Artikel gehen wir auf einige der Fehler in JavaScript ein – jene Verhaltensweisen, die Sie überraschen, wenn Sie es am wenigsten erwarten. Glücklicherweise gibt es für Entwickler einen Ritter in glänzender Rüstung namens TypeScript. Wir zeigen Ihnen hier, wie es Ihnen das Ausreißen der Haare ersparen kann, indem es die Bizarrheit dieses JavaScripts etwas beherrschbarer macht.

---

1. Die große == vs === Debatte

JavaScript bietet uns zwei Arten von Gleichheit: == oder lose Gleichheit und === oder strikte Gleichheit.

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

Warte, was? Ja, JavaScript hat dafür gesorgt, dass 0 und '0' mit == gleichgesetzt werden, aber nicht mit ===. Das liegt daran, dass == vor dem Vergleich eine Typerzwingung oder eine Konvertierung von Typen durchführt. Es versucht hilfreich zu sein, indem diese Zeichenfolge für Sie in eine Zahl umgewandelt wird – aber diese Hilfe führt zu Fehlern.

Stellen Sie sich vor, Sie verwenden == bei Benutzereingaben, um mit einer Zahl zu vergleichen. Sie erhalten möglicherweise „true“, wenn die Typen nicht identisch sind, was zu unerwartetem Verhalten führt, das schwer aufzuspüren ist. Warum ist das wichtig? Weil JavaScripts Art von Zwang oft so lange funktioniert, bis etwas Wichtiges kaputt geht.

Wie TypeScript hilft

TypeScript erzwingt bereits standardmäßig die Typsicherheit. Wenn Sie zwei Dinge unterschiedlichen Typs vergleichen, wird es Sie anschreien, lange bevor Sie überhaupt Code ausführen können:

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

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

Alle Überraschungen sind vorbei, wenn man eine Zahl mit einer Zeichenfolge vergleicht. TypeScript stellt sicher, dass Sie immer Äpfel mit Äpfeln oder in diesem Fall Zahl mit Zahl vergleichen.

---

2. Das Mysteriöse undefiniert vs. null

Sowohl undefiniert als auch null sagen nichts aus, aber auf subtil unterschiedliche Weise. undefiniert ist das, was JavaScript einer Variablen zuweist, die nicht initialisiert wurde, während null verwendet wird, wenn Sie absichtlich einen leeren Wert zuweisen möchten. Sie sind unterschiedlich und doch ähnlich genug, um zu verwirren.

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

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

Wenn Sie nicht vorsichtig sind, kann es sein, dass Sie nach dem einen suchen, nach dem anderen jedoch nicht, was zu verwirrenden Fehlern führt.

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

Das funktioniert, kann aber zu subtilen Fehlern führen, wenn Sie nicht klar zwischen den beiden unterscheiden.

Wie TypeScript hilft

TypeScript ermutigt Sie, explizit und präzise anzugeben, ob etwas null oder undefiniert sein kann. Dies geschieht dadurch, dass Sie beide Fälle explizit behandeln, sodass Sie sicher sind, was vor sich geht:

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

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

Mit TypeScript entscheiden Sie, welche Typen zulässig sind, damit Sie nicht versehentlich Typen vermischen. Diese Art der Strenge schützt Sie vor Fehlern, bei denen Sie vergessen, nach null oder undefiniert zu suchen.

---

3. Der seltsame Fall von NaN (Not-a-Number)

Sind Sie jemals auf das gefürchtete NaN gestoßen? Es ist die Abkürzung für Not-a-Number und erscheint, wenn Sie versuchen, mathematische Operationen auszuführen, die keinen Sinn ergeben.

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

Hier ist der Haken: NaN ist eigentlich vom Typ Zahl. Genau, Not-a-Number ist eine Zahl!

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

Dies kann zu wirklich seltsamen Ergebnissen führen, wenn Sie nicht explizit nach NaN suchen. Was noch schlimmer ist: NaN ist nie sich selbst gleich, sodass Sie es nicht einfach vergleichen können, um zu überprüfen, ob es existiert.

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

Wie TypeScript hilft

TypeScript kann dieses Problem entschärfen, indem es ordnungsgemäße Typprüfungen erzwingt und fehlerhafte Vorgänge zur Kompilierungszeit erkennt. Wenn TypeScript herleiten kann, dass eine Operation NaN zurückgibt, kann es einen Fehler auslösen, bevor Ihr Code überhaupt ausgeführt wird.

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

TypeScript kann Ihnen auch dabei helfen, einzugrenzen, wann und wo NaN auftauchen könnte, und so eine bessere Handhabung numerischer Werte zu fördern.

---

4. Die Wildnis hier

Dies in JavaScript ist eines der mächtigsten, aber dennoch leicht missverstandenen Konzepte. Der Wert davon hängt vollständig davon ab, wie eine Funktion aufgerufen wird, was in bestimmten Kontexten zu unbeabsichtigtem Verhalten führen kann.

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

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

Was Sie vielleicht erwarten, ist, dass nach einer Sekunde „Hallo, Alice“ gedruckt wird, aber stattdessen wird „Hallo, undefiniert“ angezeigt. Warum? Denn dieser innere setTimeout bezieht sich auf das globale Objekt, nicht auf das Personenobjekt.

Wie TypeScript hilft

TypeScript kann Ihnen helfen, diese Art von Problemen zu vermeiden, indem es Pfeilfunktionen verwendet, die nicht über eine eigene Funktion verfügen, und den Kontext des Objekts, in dem sie sich befinden, beibehält.

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

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

Kein unerwartetes Verhalten mehr. TypeScript zwingt Sie dazu, über den Kontext nachzudenken und hilft Ihnen, diesen richtig zu binden, wodurch das Risiko seltsamer undefinierter Fehler verringert wird.

---

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!

Das obige ist der detaillierte Inhalt vonDie lustigen Wendungen von JavaScript und wie TypeScript es besser macht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!