TypeScript从入门到放弃(一)
先点赞后关注，防止会迷路
寄语：长风破浪会有时，直挂云帆济沧海。本文已收录至https://github.com/likekk/-Blog欢迎大家star ?????? ,共同学习，共同进步。如果文章有错误的地方，欢迎大家指出。后期将在将github上规划前端学习的路线和资源分享。
前言
亲爱的读者们，大家好，我是杨戬，一个在互联网前端苟且偷生的划水程序员，本编文章开始将带你入坑TypeScript。
个人认为TypeScript的前景还是可以的（可以接受反驳），怎么说呢？现在很多的框架已经从JavaScript向TypeScript拥抱了，谷歌也在大力支持TypScript的扩展，谷歌的Angular2.x+就是基于TypeScript，而且Vue3.0也在使用TypeScript进行重构（道听途说），我也不逼逼那么多了，我们直接开始吧！
TypeScript介绍
介绍的话我就直接引用一些吧！毕竟有些东西肯定比我讲的好（拥有一颗谦卑的心），
TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准，TypeScript扩展了JavaScript的语法。
TypeScript 由微软开发的自由和开源的编程语言。
TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上
谷歌也在大力支持TypScript的扩展，谷歌的angular2.x+就是基于TypeScript
最新的Vue、React也可以集成TypeScript
Node.js的框架nest.js、midway中用的就是TypeScript的语法
这里我多说一句：TypeScript入门十分简单，只要你有JavaScript语言的基础，那么学习TypeScript起来成本是相对较低的，可以不用像学习一门新的语言那样费劲。
TypeScript语言特性
TypeScript 是一种给 JavaScript 添加特性的语言扩展。在其上扩展的功能有许多，我们一起来看下都扩展了哪些功能。
- 类型批注和编译时类型检查
- 类型推断和类型擦除
- 接口（interface）、枚举（enum）、Mixin
- 泛型编程（很多编程语言都有）
- 名字空间（namespace）
- 元组（tuple）
- Await
当然还有一些功能是从ES6移植过来的
- 类（Class）
- 模块（module）
- lambda函数的箭头语法
- 可选参数和默认参数
简单说几点JavaScript和TypeScript的区别
- TypeScript是JavaScript的超集，扩展了JavaScript的语法，因此现有的JavaScript代码可与TypeScript一起工作无需任何修改，TypeScript通过类型注解提供编译时的静态类型检查。
- TypeScript可处理已有的JavaScript代码，并只对其中的TypeScript代码进行编译
TypeScript的优点VSTypescript的缺点
TypeScript的优点
- TypeScript增加了代码的可读性和可维护性
- TypeScript非常包容
- TypeScript拥用活跃的社区
TypeScript的缺点
- 有一定的学习成本，需要理解接口（Interfaces）、泛型（Generics）、类（Classes）、枚举类型（Enums）等前端工程师可能不是很熟悉的概念
- 短期可能会增加一些开发成本，毕竟要多写一些类型的定义，不过对于一个需要长期维护的项目，TypeScript 能够减少其维护成本
- 集成到构建流程需要一些工作量
- 可能和一些库结合的不是很完美
TypeScript安装，编译
首先需要安装TypeScript，必须有Node.js的环境，关于Node.js的安装环境推荐大家这一篇博文
Node.js安装配置教程，写得非常详细。
安装完成之后，我们使用命令行看下是否安装成功。
node -v 检查node版本
node.js环境配置成功之后，我们全局安装一下TypeScript，这里有几种方法供大家使用，大家选择自己喜欢的方法就可以了。
- 使用npm命令全局安装
npm install -g typescript
- 使用cnpm命令安装
npm install cnpm --registry=https://registry.npm.taobao.org
cnpm install -g typescript
- 使用yarn命令安装
npm install -g yarn 或者 cnpm install -g yarn
yarn global add typescript
安装完成之后，我们检查TypeScript是否安装成功
检查命令 tsc -v
如果出现版本信息，那么一般都是安装成功了，这里就不进行截图了
开发工具推荐使用 vscode进行开发，vscode也是微软旗下的产品，使用vscode开发TypeScript，只能用下面那张图来表达我内心的感受。
当然也还有许多优秀的开发工具，但是我还是首选vscode。
TypeScript的HelloWorld
所有的一切准备好之后，那就开始我们的开发之旅吧！
首先我们新建一个文件夹，创建好文件夹之后我们新建一个.ts为后缀名的文件，目录结构如下
然后我们在index.ts文件内编写helloworld代码
let str:string="Hello World" console.log(str)
TypeScript 转换为 JavaScript 过程如下图：
刚开始看到这段代码的时候瞬间有JavaScript的影子，和JavaScript声明的变量的代码差不多，就是指定了类型。比较严谨。
由于浏览器是无法识别TypeScript的，所以我们需要将TypeScript进行编译成JavaScript语言，让浏览器可以识别。
tsc index.ts（直接在vscode的控制台执行）
编译之后的代码（index.js）：
var str = "Hello World"; console.log(str);
此时编译成功之后该文件夹会自动生成index.js文件，而这个文件就是index.ts进行编译之后的文件。然后我们在新建index.html文件，引入编译之后的inde.js文件。文件目录如下。
之后运行index.html文件就可以看到输出结果了。
TypeScript开发工具vscode自动编译.ts文件
我们想一个这样的问题，如果每次写一段代码都需要自己编译一下，试想一下工作量有多么大，那么有没有可能可以实现一边写代码一边让它自己进行编译呢？答案是肯定的。
1、使用vscode的控制台输入tsc --init命令
tsc --init
此时目录下会生成一个tsconfig.json文件
找到outDir这是配置项，然后修改自己想要.ts文件通过编译之后在指定地方生成.js文件的目录，我这里是同级目录下js这个文件夹生成.ts编译之后的文件。
修改之后tsconfig.json文件
接下来看下整个文件的目录结构
2、配置tsconfig.json文件
找到vscode的Terminal选项
找到Run task选项
选择typescript选项
tsc:watch -tsconfig.json
完成这几个步骤之后你就可以疯狂编码了。
结尾
如果觉得本篇文章对您有用的话，可以麻烦您给笔者点亮那个点赞按钮。
对于杨戬这个暖男来说：真的非常有用，您的支持就是我前进的动力，我们下篇文章见。
【原创】|杨戬
原创不易，请勿白嫖。二郎神杨戬，一个在互联网前端苟且偷生的划水程序员，专注于前端开发，善于技术分享。如需转载，请联系作者或者保留原文链接，微信公众号搜索二郎神杨戬。
