JavaScript の楽しい工夫と TypeScript がそれをどのように改善するか

JavaScript は誰もが愛する言語ですよね?柔軟性があり、軽量で、どこでも実行できます。しかし、その素晴らしさにもかかわらず、正直に言うと、それは奇妙である可能性があります。本来は機能しないはずのものが機能するのを見た後、自分の正気を疑うような奇妙なものです。

この記事では、JavaScript 内のいくつかの不具合、つまり予期せぬときに驚かれる動作について説明します。幸いなことに、TypeScript という開発者向けの輝く鎧を着た騎士がいます。ここでは、JavaScript の奇妙さをもう少し扱いやすくすることで、髪の毛が裂けるのを防ぐ方法を紹介します。

---

1. == vs === の大論争

JavaScript では、== または緩い等価と === または厳密な等価という 2 つの種類の等価性が得られます。

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

ちょっと待って、何？そうですね、JavaScript では 0 と '0' は == では等しいと見なされますが、=== ではそうではありません。これは、== が比較を行う前に 型強制、つまり型の変換を行うためです。この文字列を数字に変換して役に立とうとしていますが、このヘルプはバグにつながります。

ユーザー入力で == を使用して数値と照合することを想像してください。タイプが同じでない場合に true が発生し、追跡が難しい予期しない動作が発生する可能性があります。なぜこれが重要なのでしょうか?なぜなら、JavaScript のタイプの強制は、重要なものを壊すまで機能することが多いからです。

TypeScript がどのように役立つか

TypeScript は、すぐに使用できるタイプ セーフティをすでに適用しています。タイプの異なる 2 つのものを比較すると、コードを実行するずっと前に怒鳴られるでしょう。

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

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

数値と文字列を比較することで驚くことはなくなりました。 TypeScript では、常にリンゴとリンゴを比較するようにします。この場合は数値と数値を比較します。

---

2. 謎の未定義 vs null

未定義と null は両方とも 何も について話しますが、方法は微妙に異なります。 unknown は JavaScript が初期化されていない変数に割り当てるもので、null は意図的に空の値を割り当てたい場合に使用されます。これらは異なりますが、混同するほどよく似ています。

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

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

注意しないと、一方をチェックしてもう一方をチェックしないことになり、混乱を招くバグが発生する可能性があります。

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

これは機能しますが、この 2 つを明確に区別しないと微妙なバグが発生する可能性があります。

TypeScript がどのように役立つか

TypeScript では、何かが null または未定義である可能性があるかどうかを明示的かつ正確に示すことが推奨されます。これは、両方のケースを明示的に処理することで行われるため、何が起こっているかを確信できます。

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

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

TypeScript では、タイプを誤って混合しないように、許可するタイプを決定します。この種の厳格さにより、null または未定義のチェックを忘れるバグから保護されます。

---

3. NaN (非数) の奇妙なケース

恐ろしい NaN に遭遇したことがありますか?これは Not-a-Number, の略で、意味のない数学演算を実行しようとするとポップアップ表示されます。

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

ここに問題があります: NaN は実際には数値型です。そうです、Not-a-Number は数字です!

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

NaN を明示的にチェックしないと、本当に奇妙な結果が生じる可能性があります。さらに悪いことに、NaN は決してそれ自体と等しくないため、NaN が存在するかどうかを確認するために簡単に比較することができません。

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

TypeScript がどのように役立つか

TypeScript は、適切な型チェックを強制し、コンパイル時に不正な操作を検出することで、この問題を軽減できます。 TypeScript が操作が NaN を返すことを推論できる場合、コードが実行される前にエラーがスローされる可能性があります。

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

TypeScript は、NaN がいつどこでポップアップするかを絞り込み、数値の処理を改善するのにも役立ちます。

---

4. ザ・ワイルド・ディス

JavaScript におけるこれは、最も強力な概念の 1 つですが、誤解されやすい概念です。この値は関数の呼び出し方法に完全に依存しており、特定のコンテキストでは意図しない動作を引き起こす可能性があります。

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

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

1 秒後に「Hello, Alice」が表示されると予想されるかもしれませんが、代わりに「Hello, unknown」が表示されます。なぜ？ setTimeout 内のこれは、person オブジェクトではなく、グローバル オブジェクトを参照しているためです。

TypeScript がどのように役立つか

TypeScript では、独自の this を持たず、その関数が含まれるオブジェクトのコンテキストを保持するアロー関数を使用することで、この種の問題を回避できます。

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

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

このような予期しない動作はなくなりました。 TypeScript を使用すると、コンテキストについて考える必要が生じ、コンテキストを適切にバインドできるようになり、奇妙な未定義のバグが発生するリスクが軽減されます。

---

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!

以上がJavaScript の楽しい工夫と TypeScript がそれをどのように改善するかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。