使用 Visual Studio Code 开发 Angular2 应用程序 - 3

引言

我正在撰写文章 使用 Visual Studio Code 开发 Angular2 应用程序，使用的是基于 TypeScript 的 Angular2。有人问我为什么不使用纯 JavaScript 版本的 Angular2？我知道使用原生的 JavaScript 非常酷，因为我们使用的所有 JavaScript 都是基于它的。但在某些情况下，它不会明确告诉你对或错，只会告诉你“我不确定”。但可以肯定的是，有时它会让你抓狂。看看读完这篇文章后你是否会抓狂吧。

一些 VanillaJS 的测试

// test case 1 : typeof object
console.log("==================================");

var myValueIsNull = null;
console.log("typeof myValueIsNull is " + typeof myValueIsNull);

var myValueIsObject = new Object();
console.log("typeof myValueIsObject is " + typeof myValueIsObject);

var iAmAFunction = new function() {};
console.log("typeof iAmAFunction is " + typeof iAmAFunction);

var iAmAnArray = [];
console.log("typeof iAmAnArray is " + typeof iAmAnArray);

var myTypeIsInt = 1;
console.log("typeof myTypeIsInt is " + typeof myTypeIsInt);

var myTypeIsString = "abc";
console.log("typeof myTypeIsString is " + typeof myTypeIsString);

var myTypeIsDate = new Date();
console.log("typeof myTypeIsDate is " + typeof myTypeIsDate);

console.log("==================================");

所以结果是：null 是对象，函数是对象，数组是对象……，你可能会想，这很酷，它们实际上都是对象。是的，它们是。但是 string 是 string。这没问题，因为 string 是特殊的…… 假设你问我“你叫什么名字？”，我告诉你“我父亲的名字是 XXX”。我想你会抓狂的。

如果你仍然认为类型不重要，让我们看看下面的代码

// test case 2 : changed typeof object
console.log("==================================");

iAmAnUndefinedDate = new Date();
console.log("typeof iAmAnUndefinedDate is " + typeof iAmAnUndefinedDate);

iAmAnUndefinedDate = '08/15/2008';
console.log("typeof iAmAnUndefinedDate is " + typeof iAmAnUndefinedDate);

var i = Math.floor(Math.random() * (100 - 1) + 1);
console.log(i);

if (i % 2 === 0) {
    iAmAnUndefinedDate = '08/15/2008';

} else {
    iAmAnUndefinedDate = new Date();
}

console.log("is iAmAnUndefinedDate an object? " + typeof iAmAnUndefinedDate === "object");
console.log("==================================");

是的，var 的类型可以动态改变！太酷了！但是如果有人在大型项目中改变了你的 var 类型，你就会抓狂。

如果你仍然认为这个没问题，让我们看看下一个。

// test case 3 : return problem
console.log("==================================");
function return1()
{
  return {
      str1: "Hi 1"
  };
}

function return2()
{
  return
  {
      str2: "Hi 2"
  };
}

function return3()
{
  return;
  {
      str3: "Hi 3"
  };
}

console.log(return1);
console.log(return2);
console.log(return3);
console.log(return1());
console.log(return2());
console.log(return3());
console.log("==================================");

没有异常！但是结果出乎意料。抓狂！看看 return1 和 return2，你认为它们是相同的代码吗？事实上，return2 与 return3 相同。

另一个让人抓狂的事情是数字。

// test case 4 : numbers
console.log("==================================");
console.log(1 + 1);
console.log(1.1 + 1.1);
console.log(0.1 + 0.1);
console.log(0.1 + 0.2);
console.log(0.2 + 0.2);
console.log(0.2 + 0.2 == 0.4);
console.log(0.1 + 0.2 == 0.3);
console.log("==================================");

让我们看看结果。

这是真的。

但这仅仅是冰山一角。这就是为什么我们需要 TypeScript 来帮助我们减少抓狂的结果。为什么不使用它呢？在下一章中，我将继续对 NgTweet Angular2 应用程序进行一些修改。

摘要

尝试拥抱新事物，生活可能会变得更好。

历史

• 1.0.0