TypeScript 开发环境搭建

TypeScript是JavaScript类型的超集，它可以编译成纯JavaScript代码，TypeScript可以在任何浏览器，任何计算机和任何操作系统上运行。

目录

依赖环境

 搭建步骤

1.新建一个文件夹

2.初始化一个NPM项目

3.安装typescript 包

4.新建一个tsconfig.json

 5.新建一个index.ts

6.编译生成js文件

7.运行js文件

依赖环境

需要先安装Node.js环境，下载地址：下载 | Node.js

Windows环境下下载msi文件，点击下一步直接安装完成。

 按Win+R键，输入“cmd”字符，按回车键，输入：npm -v。如果返回版本信息，表示安装成功。

 搭建步骤

1.新建一个文件夹

  在命令行输入：

mkdir tsdemo

2.初始化一个NPM项目

在命令行输入：

npm init

先全部默认，按enter键，输入下一项，等到确认yes或者no的时候，输入'y'。生成package.json文件，和其他的node项目是一样的，都需要package.json文件。

3.安装typescript 包

在命令行输入：

npm install --save-dev typescript @types/node

在执行完以上三步之后，其实就可以使用自己喜欢的IDE来打开项目，我这里使用的是WebStorm。换成Visual Studio Code也是一样的。

4.新建一个tsconfig.json

文件内容包括：

{
  "compilerOptions": {
    //假定运行环境的API有哪些
    "lib": ["es2015"],
    //把代码编程成哪个模块系统
    "module": "commonjs",
    //生成的JavaScript代码存放到哪个文件夹中
    "outDir": "dist",
    //开启sourcemap方便调试
    "sourceMap": true,
    //检查无效代码，强制所有代码都应该正确声明了类型
    "strict": true,
    //把代码编译成哪个JavaScript版本
    "target": "es2015"
  },
//  在哪个文件夹寻找typescript文件
  "include": [
    "src"
  ]
}

 

 5.新建一个index.ts

我们现在可以先新建一个文件夹src，必须和上一步中"include"中配置的名称相同。一般都是src

在src下新建一个index.ts，输入以下内容:

console.log('Hello TypeScript!');

6.编译生成js文件

  可以通过在WebStorm当前文件中右键->选择Compile TypeScript

会在当前根目录下生成dist/index.js文件。旧版本的WebStorm需要刷新一下目录才会出现。 

7.运行js文件

可以看到生成的index.js文件内容：

"use strict";
console.log('Hello TypeScript!');
//# sourceMappingURL=index.js.map

我们在当前index.js文件中右键选择：

可以看到命令行的输出：

 

现在我们就可以开始愉快的TypeScript编程之旅了，虽然这个项目很简单，但是万丈高楼平地起，一砖一瓦皆根基。从这里起步，学习整个TypeScript编程，感受不一样的TypeScript。 

参考：

《TypeScript 编程》 

有问题欢迎大家留言私信交流，谢谢！