JavaScript 的有趣之处以及 TypeScript 如何让它变得更好

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《JavaScript 的有趣之处以及 TypeScript 如何让它变得更好》，聊聊，我们一起来看看吧！

javascript 是一种我们都喜欢的语言，对吧？它灵活、轻便，并且可以随处运行。但老实说，尽管它很伟大，但它可能很奇怪。那种奇怪的感觉会让你在看到一些不应该起作用的东西后质疑自己的理智。

在本文中，我们将探讨 javascript 中的一些怪癖 - 那些在您最意想不到的时候让您感到惊讶的行为。幸运的是，对于开发者来说，有一位身穿闪亮盔甲的骑士，叫做typescript。我们在这里向您展示如何通过使这些 javascript 的怪异更易于管理来避免您烦恼。

---

1. == vs === 大辩论

javascript 为我们提供了两种相等性：== 或松散相等和 === 或严格相等。

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

等等，什么？是的，javascript 使 0 和 '0' 在 == 时被视为相等，但在 === 时则不然。这是因为 == 在进行比较之前会进行 类型强制 或类型转换。它试图为您提供帮助，将该字符串转换为数字，但是这个帮助会导致错误。

想象一下在用户输入上使用 == 来检查数字。当类型不同导致难以追踪的意外行为时，您可能会得到正确的结果。为什么这很重要？因为 javascript 的强制类型通常会起作用，直到它破坏了一些重要的东西。

typescript 如何提供帮助

typescript 已经强制执行开箱即用的类型安全。如果你比较两个不同类型的东西，在你运行任何代码之前它就会对你大喊大叫：

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

console.log(a === b); // typescript error: this comparison is invalid

将数字与字符串进行比较时任何惊喜都消失了。 typescript 确保您始终比较苹果和苹果，或者在这种情况下进行数字与数字的比较。

---

2. 神秘的 undefined 与 null

undefined 和 null 都表示什么都没有，但方式略有不同。 undefined 是 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");
}

这可行，但如果您没有清楚地区分两者，可能会导致微妙的错误。

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 实际上是数字类型。没错，不是数字是一个数字！

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

如果您没有明确检查 nan，这可能会导致一些真正奇怪的结果。更糟糕的是，nan 永远不会等于它自己，所以你不能轻易地比较它来检查它是否存在。

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

typescript 如何提供帮助

typescript 可以通过在编译时强制执行适当的类型检查和捕获错误操作来缓解此问题。如果 typescript 可以推断某个操作将返回 nan，那么它甚至可以在代码运行之前抛出错误。

let result: number = 0 / 0; // warning: possible 'nan'

typescript 还可以帮助您缩小 nan 可能出现的时间和位置，从而鼓励更好地处理数值。

---

4. 狂野这

javascript 中的 this 是最强大但最容易被误解的概念之一。这个值完全取决于如何调用函数，这可能会在某些上下文中导致意外的行为。

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

settimeout(person.greet, 1000); // uh-oh, what happened here?

您可能期望在一秒钟后看到“hello, alice”打印出来，但相反，您会得到 hello, undefined。为什么？因为settimeout里面的this指的是全局对象，而不是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. 函数提升：当顺序不重要时

javascript 函数被提升到作用域的顶部；这意味着您甚至可以在代码中声明它们之前调用它们。这是一个很酷的技巧，但如果您不注意正在发生的事情，也可能会感到困惑。

greet();

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

虽然这很方便，但也可能引起混乱，尤其是当您尝试调试代码时。

由于函数声明提升，这工作得很好。但它可能会使您的代码更难理解，尤其是对于其他开发人员（或离开该项目几个月后的您自己）。

typescript 如何提供帮助

typescript 不会改变提升的工作方式，但它可以为您提供有关代码结构的更清晰的反馈。如果您在定义函数之前不小心调用了该函数，typescript 会立即通知您。

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

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

typescript 会强制您进行一些清理工作，即在使用函数之前对其进行声明。这样可以让你的代码更易于维护。

---

总结一下

javascript 是一门令人惊叹的语言，但它有时确实很古怪。通过使用 typescript，您可以驯服 javascript 的一些最奇怪的行为，并使您的代码更安全、更可靠且更易于维护。无论您是使用 null 和 undefined、驯服它还是防止 nan 灾难，typescript 都可以为您提供工具来避免 javascript 的灵活（但有时不可预测）性质带来的麻烦。

所以下次当你发现自己对 javascript 的奇怪怪癖感到困惑时，请记住：typescript 可以为你提供帮助！

编码愉快！

今天关于《JavaScript 的有趣之处以及 TypeScript 如何让它变得更好》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！