极简TypeScript教程--简介和环境搭建

认识TypeScript

我们可以将TypeScript理解成加强版的JavaScript。

JavaScript所拥有的特性，TypeScript全部都是支持的，并且它紧随ECMAScript的标准，所以ES6、ES7、ES8等新语法标准，它都是

支持的；

TypeScript在实现新特性的同时，总是保持和ES标准的同步甚至是领先；

并且在语言层面上，不仅仅增加了类型约束，而且包括一些语法的扩展，比如枚举类型（Enum）、元组类型（Tuple）等；

并且TypeScript最终会被编译成JavaScript代码，所以你并不需要担心它的兼容性问题，在编译时也可以不借助于Babel这样的工具；

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

Angular源码在很早就使用TypeScript来进行了重写，并且开发Angular也需要掌握TypeScript；

Vue3源码也采用了TypeScript进行重写，在阅读源码时你会看到大量TypeScript的语法；

包括目前已经变成最流行的编辑器VSCode也是使用TypeScript来完成的；

包括在React中已经使用的ant-design的UI库，也大量使用TypeScript来编写；

目前公司非常流行Vue3 TypeScript、React TypeScript的开发模式；

包括小程序开发，也是支持TypeScript的；

环境搭建

由于浏览器无法识别ts的代码，所以需要有工具来把ts代码编译成js代码,全局安装typescript，这样就能使用tsc命令来编译ts了

1.  
   # 安装命令
2.  
   npm install typescript -g
3.  
   # 查看版本
4.  
   tsc --version

新建一个ts文件叫index.ts,代码如下

1.  
   let message: string = 'Hello World'
2.  
   console.log(message)

通过tsc命令来编译

tsc index.ts

编译过后会生成一个index.js文件,看下编译过后的代码

1.  
   var message = 'Hello World';
2.  
   console.log(message);

然后把这个js文件引入到html文件里面就能通过浏览器来运行了

这种方式比较繁琐，还有一个方式可以直接运行ts代码

方式二：安装ts-node

npm install ts-node -g

◼ 另外ts-node需要依赖 tslib 和 @types/node 两个包：

npm install tslib @types/node -g

◼ 现在，我们可以直接通过 ts-node 来运行TypeScript的代码：

ts-node index.ts

这样就可以在node环境中运行ts而不用借助于浏览器，非常适合在学习中使用