Les rebondissements amusants de JavaScript et comment TypeScript l'améliore

JavaScript est un langage que nous aimons tous, n'est-ce pas ? Il est flexible, léger et fonctionne partout. Mais malgré toute sa grandeur, soyons honnêtes, cela peut être bizarre. Le genre de bizarrerie qui vous fait remettre en question votre santé mentale après avoir vu quelque chose fonctionner qui ne devrait vraiment pas fonctionner.

Dans cet article, nous passerons en revue certains des problèmes de JavaScript : ces comportements qui vous surprennent lorsque vous vous y attendez le moins. Heureusement, il existe un chevalier en armure brillante pour les développeurs appelé TypeScript. Nous vous montrons ici comment cela peut vous éviter de vous arracher les cheveux en rendant les bizarreries de JavaScript un peu plus gérables.

---

1. Le grand débat == vs ===

JavaScript nous donne deux types d'égalité : == ou égalité lâche et === ou égalité stricte.

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

Attends, quoi ? Oui, JavaScript a fait en sorte que 0 et « 0 » soient considérés comme égaux avec ==, mais pas avec ===. En effet, == effectue une coercition de type, ou une conversion de types, avant de faire la comparaison. Il essaie d'être utile, en transformant cette chaîne en un nombre pour vous, mais cette aide conduit à des bugs.

Imaginez utiliser == sur la saisie de l'utilisateur pour vérifier un nombre. Vous pouvez obtenir vrai lorsque les types ne sont pas les mêmes, ce qui entraîne un comportement inattendu difficile à détecter. Pourquoi est-ce important ? Parce que le type de coercition de JavaScript fonctionne souvent jusqu'à ce qu'il brise quelque chose d'important.

Comment TypeScript aide

TypeScript applique déjà la sécurité des types dès le départ. Si vous comparez deux choses de types différents, cela va vous crier dessus bien avant même que vous puissiez exécuter un code :

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

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

Toute surprise est passée en comparant un nombre à une chaîne. TypeScript s'assure que vous comparez toujours des pommes et des pommes ou, dans ce cas, un numéro à un autre.

---

2. Le mystérieux indéfini vs nul

Indéfini et nul ne parlent à rien, mais de manière subtilement différente. undefined est ce que JavaScript attribue à une variable qui n'a pas été initialisée, tandis que null est utilisé lorsque vous souhaitez intentionnellement attribuer une valeur vide. Ils sont différents, mais suffisamment similaires pour être confondus.

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

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

À moins que vous ne soyez prudent, vous pourriez finir par vérifier l'un mais pas l'autre, ce qui entraîne des bugs déroutants.

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

Cela fonctionne mais peut conduire à des bugs subtils si vous ne faites pas clairement la distinction entre les deux.

Comment TypeScript aide

TypeScript vous encourage à être explicite et précis quant à savoir si quelque chose peut être nul ou indéfini. Pour ce faire, il vous oblige à gérer explicitement les deux cas, afin que vous soyez certain de ce qui se passe :

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

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

Avec TypeScript, vous décidez quels types sont autorisés afin de ne pas mélanger accidentellement les types. Ce type de rigueur vous protège des bugs où vous oubliez de vérifier null ou indéfini.

---

3. L'étrange cas de NaN (Not-a-Number)

Avez-vous déjà rencontré le redoutable NaN ? C'est l'abréviation de Not-a-Number et il apparaît lorsque vous essayez d'effectuer des opérations mathématiques qui n'ont pas de sens.

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

Voici le problème : NaN est en fait de type numéro. C'est vrai, Not-a-Number est un nombre !

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

Cela peut conduire à des résultats vraiment bizarres si vous ne vérifiez pas explicitement NaN. Pire encore, NaN n'est jamais égal à lui-même, on ne peut donc pas le comparer facilement pour vérifier s'il existe.

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

Comment TypeScript aide

TypeScript peut atténuer ce problème en appliquant des vérifications de type appropriées et en détectant les mauvaises opérations au moment de la compilation. Si TypeScript peut déduire qu'une opération renverra NaN, il peut générer une erreur avant même que votre code ne s'exécute.

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

TypeScript peut également vous aider à déterminer quand et où NaN peut apparaître, encourageant ainsi une meilleure gestion des valeurs numériques.

---

4. Le sauvage ceci

C'est en JavaScript l'un des concepts les plus puissants, mais facilement mal compris. La valeur de ceci dépend entièrement de la comment une fonction est appelée, ce qui peut conduire à un comportement involontaire dans certains contextes.

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

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

Vous pourriez vous attendre à voir « Bonjour, Alice » imprimé après une seconde, mais à la place, vous obtiendrez Bonjour, non défini. Pourquoi? Parce que cela à l'intérieur de setTimeout fait référence à l'objet global, pas à l'objet personne.

Comment TypeScript aide

TypeScript peut vous aider à éviter ce genre de problèmes en utilisant des fonctions fléchées qui n'ont pas leur propre this et en conservant le contexte de l'objet dans lequel elles se trouvent.

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

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

Plus de comportement inattendu. TypeScript vous oblige à réfléchir au contexte et vous aide à le lier correctement, réduisant ainsi le risque de bugs étranges non définis.

---

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!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!