搭建TypeScript开发环境

时间:2022-08-09 14:48:17

TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进步的地方 包括:加入注释,让编译器理解所支持的对象和函数,编译器会移除注释,不会增加开销;增加一个完整的类结构,使之更象传统的面向对象语言。

TypeScript的优点

JavaScript 只是一个脚本语言,JavaScript 没有提供类和模块的概念,而 TypeScript 扩展了 JavaScript 实现了这些特性。
TypeScript 主要特点包括:

  • TypeScript 是微软推出的开源语言,使用 Apache 授权协议,
  • TypeScript 是 JavaScript 的超集。
  • TypeScript 增加了可选类型、类和模块
  • TypeScript 可编译成可读的、标准的 JavaScript
  • TypeScript 支持开发大规模 JavaScript 应用
  • TypeScript 设计用于开发大型应用,并保证编译后的 JavaScript 代码兼容性
  • TypeScript 扩展了 JavaScript 的语法,因此已有的 JavaScript 代码可直接与 TypeScript 一起运行无需更改
  • TypeScript 文件扩展名是 ts,而 TypeScript 编译器会编译成 js 文件

TypeScript语法特性

  • 兼容 ECMAScript 2015(ES6)规范,可选择编译成ES6或ES5规范的JavaScript代码;
  • 面向对象,并拥有一些函数式特性;
  • 类型语言;
  • 实现了注解、泛型等特性;
  • 类 Classes
  • 接口 Interfaces
  • 模块 Modules
  • 类型注解 Type annotations
  • 编译时类型检查 Compile time type checking
  • Arrow 函数

TypeScript环境搭建

搭建TypeScript开发环境就是安装TypeScript的compiler.那么什么是compiler?为什么需要compiler?
Compiler意思是编译器,就是把TypeScript的代码编译成javascript的代码。为什么需要一个compiler呢,是因为目前主流的浏览器并不是都支持ES6语法,这就需要把typescript代码转换成javascript代码,然后放到浏览器中去跑。

  1. 第一步:先安装nodejs,去nodejs官网下载最新的nodejs,然后一路next安装即可
    安装后,可在cmd中输入
    “`
    node -v
    npm -v
![这里写图片描述](http://img.blog.csdn.net/20170707222247479?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGlsaWdlbnRrb25n/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

2. 第二步:输入npm install -g typescript
查看是否安装成功,可用tsc -v 查看
![这里写图片描述](http://img.blog.csdn.net/20170707222419137?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGlsaWdlbnRrb25n/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
表示安装成功
接着,我们来看一下 typescript如何来用,我在我的桌面上建立一个文件夹typesc,此文件夹中建立一个文件Hello.ts 内容如下:

export class Hello{

}
“`

然后通过命令行进入文件中,然后执行 tsc Hello.ts 我们到文件夹中看一下,发现多了一个文件
搭建TypeScript开发环境
搭建TypeScript开发环境
打开看看 这两个文件
搭建TypeScript开发环境
其实这个过程挺麻烦的,不过我typescript有着强大的IDE支持 现在我们打开webstorm。新建一个工程,建立一个Hello.ts的文件,内容如上图。

然后配置为TypeScript文件更改编译设置,File->Setting->File Watchers->TypeScript
搭建TypeScript开发环境
这里我们需要选择TypeScript,但是
File Watchers下默认是不存在的。需要点击右侧“+”号,
点击“TypeScript”,

搭建TypeScript开发环境
输入file watcher 按步骤一步一步来。
搭建TypeScript开发环境

搭建TypeScript开发环境

这样就把 typescript的自动编译功能就设置好了。看看我们建的文件是不是自动帮我们生成了js文件
搭建TypeScript开发环境