一、JavaScript的痛点

1、比如ES5以及之前的使用的var关键字关于作用域的问题
2、比如最初JavaScript设计的数组类型并不是连续的内存空间
3、比如直到今天JavaScript也没有加入类型检测这一机制

二、类型带来的问题

首先你需要知道，编程开发中我们有一个共识：错误出现的越早越好
能在写代码的时候发现错误，就不要在代码编译时再发现（IDE的优势就是在代码编写过程中帮助我们发现错
误）。
能在代码编译期间发现错误，就不要在代码运行期间再发现（类型检测就可以很好的帮助我们做到这一点）。
能在开发阶段发现错误，就不要在测试期间发现错误，能在测试期间发现错误，就不要在上线后发现错误。
现在我们想探究的就是如何在代码编译期间发现代码的错误：
JavaScript可以做到吗？不可以，我们来看下面这段经常可能出现的代码问题。

// 当前foo函数, 在被其他地方调用时, 没有做任何的参数校验
// 1> 没有对类型进行校验
// 2> 没有对是否传入参数进行校验
function foo(message) {
  if (message) {
    console.log(message.length);
  }
}

foo("Hello World");
foo("你好啊,李银河");

foo(123)

foo()

// 永远执行不到
console.log("渲染界面成千上万行的JavaScript代码需要执行, 去渲染界面")

这是我们一个非常常见的错误：

这个错误很大的原因就是因为JavaScript没有对我们传入的参数进行任何的限制，只能等到运行期间才发现这个错误；
并且当这个错误产生时，会影响后续代码的继续执行，也就是整个项目都因为一个小小的错误而深入崩溃
如果我们可以给JavaScript加上很多限制，在开发中就可以很好的避免这样的问题了
比如我们的foo函数中str是一个必传的类型，没有调用者没有传编译期间就会报错；
比如我们要求它的必须是一个String类型，传入其他类型就直接报错；
那么就可以知道很多的错误问题在编译期间就被发现，而不是等到运行时再去发现和修改；

三、认识TypeScript

我们来看一下TypeScript在GitHub和官方上对自己的定义

GitHub说法：TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TypeScript官网：TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
翻译一下：TypeScript是拥有类型的JavaScript超集，它可以编译成普通、干净、完整的JavaScript代码

怎么理解上面的话呢？

我们可以将TypeScript理解成加强版的JavaScript。
JavaScript所拥有的特性，TypeScript全部都是支持的，并且它紧随ECMAScript的标准，所以ES6、ES7、ES8等新语法标准，它都是支持的；
并且在语言层面上，不仅仅增加了类型约束，而且包括一些语法的扩展，比如枚举类型（Enum）、元组类型（Tuple）等；
TypeScript在实现新特性的同时，总是保持和ES标准的同步甚至是领先；
并且TypeScript最终会被编译成JavaScript代码，所以你并不需要担心它的兼容性问题，在编译时也不需要借助于Babel这样的工具；
所以，我们可以把TypeScript理解成更加强大的JavaScript，不仅让JavaScript更加安全，而且给它带来了诸多好用的好用特性；

四、TypeScript的特点

始于JavaScript，归于JavaScript

TypeScript从今天数以百万计的JavaScript开发者所熟悉的语法和语义开始。使用现有的JavaScript代码，包括流行的JavaScript库，并从JavaScript代码中调用TypeScript代码；
TypeScript可以编译出纯净、简洁的JavaScript代码，并且可以运行在任何浏览器上、Node.js环境中和任何支持ECMAScript 3（或更高版本）的JavaScript引擎中；

TypeScript是一个强大的工具，用于构建大型项目

类型允许JavaScript开发者在开发JavaScript应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构；
类型是可选的，类型推断让一些类型的注释使你的代码的静态验证有很大的不同。类型让你定义软件组件之间的接口和洞察现有JavaScript库的行为；

拥有先进的 JavaScript

TypeScript提供最新的和不断发展的JavaScript特性，包括那些来自2015年的ECMAScript和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件；
这些特性为高可信应用程序开发时是可用的，但是会被编译成简洁的ECMAScript3（或更新版本）的JavaScript；

五、TypeScript的编译环境

在前面我们提到过，TypeScript最终会被编译成JavaScript来运行，所以我们需要搭建对应的环境：
我们需要在电脑上安装TypeScript，这样就可以通过TypeScript的Compiler将其编译成JavaScript；
所以，我们需要先可以先进行全局的安装：

初体验

let message: string = 'hello typescript'

function foo(payload: string) {
  console.log(payload.length)
}

// foo(123)
foo("abc")

然后在终端输入tsc 文件名就可以编译出js代码了。

六、TypeScript的运行环境

如果我们每次为了查看TypeScript代码的运行效果，都通过经过两个步骤的话就太繁琐了：

第一步：通过tsc编译TypeScript到JavaScript代码；
第二步：在浏览器或者Node环境下运行JavaScript代码；

是否可以简化这样的步骤呢？

比如编写了TypeScript之后可以直接运行在浏览器上？
比如编写了TypeScript之后，直接通过node的命令来执行？

上面我提到的两种方式，可以通过两个解决方案来完成：

方式一：通过webpack，配置本地的TypeScript编译环境和开启一个本地服务，可以直接运行在浏览器上；
方式二：通过ts-node库，为TypeScript的运行提供执行环境；

方式一
1、创建项目

2、通过npm init 初始化package.json文件

3、本地依赖TypeScript

因为我们之后是通过webpack进行编译我们的TypeScript代码的，并不是通过tsc来完成的。（tsc使用的是全局安装的TypeScript依赖）
那么webpack会在本地去查找TypeScript的依赖，所以我们是需要本地依赖TypeScript的；
npm install typescript

4、初始化tsconfig.json文件

在进行TypeScript开发时，我们会针对TypeScript进行相关的配置，而这些配置信息是存放在一个tsconfig.json文件中的
我们并不需要手动去创建它，可以通过命令行直接来生成这样的一个文件：
tsc --init

5、安装webpack相关的依赖

首先需要安装webpack和webpack-cli以及webpack-dev-serve

npm install webpack webpack-cli webpack-dev-serve

6、在package.json中添加启动命令

为了方便启动webpack，我们在package.json中添加如下启动命令
在这里插入图片描述
7、添加webpack的其他相关依赖
ts-loader
因为我们需要解析.ts文件，所以需要依赖对应的loader：ts-loader
npm install ts-loader -D

html-webpack-plugin
编译后的代码需要对应的html模块作为它的运行环境，所以我们需要使用html-webpack-plugin来将它插入到对应的模板中：
npm install html-webpack-plugin -D

8、配置webpack.config.js文件
将如下配置到webpack.config.js文件中：
在这里插入图片描述
9、下面我们就可以愉快的在main.ts中编写代码，之后只需要启动服务即可：
看一下demo目录结构

math.ts

main.ts

packpage.jsom

webpack.config.js