vscode 配置typescript环境

默认安装好 node，npm， vscode

安装TypeScript Compiler

Complier将typescript编译成javascript

npm install -g typescript    
npm install --save -g @types/node    // 安装库的d.ts文件
npm update -g typescript   // 更新

npm init    // 创建package.json
tsc --init   // 创建tsconfig.json

因为写node.js你可以修改target为es6, 要调试把 sourceMap改为true, 添加allowjs为true,就可以ts和js混合用了.

配置TypeScript编译

1. 按 ctrl+shift+b 配置 task
2. 选择 tsc: build-tsconfig.json // 一次编译
   或 选择 tsc: build-tsconfig.json // 时时监控编译

package.json

package.json是包描述文件。其中列出了应用所需的各种依赖包、待执行脚本，以及其他一些设置内容

{
  "name": "hello-typescript",
  "version": "0.0.1",
  "description": "Learning TypeScript.",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\"",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "author": "2gua",
  "license": "ISC",
  "dependencies": {
  },
  "devDependencies": {
    "lite-server": "^2.2.0",
    "concurrently": "^2.0.0"
  }
}

package.json文件主要说明：

1. “name”——包的名称
2. “version”——版本
3. “description”——App描述，方便搜索
4. “scripts”——可执行的脚本
5. “start”: “tsc && concurrently “npm run tsc:w” “npm run lite””——同时执行的命令
6. “lite”: “lite-server”——启动lite-server服务器
7. “tsc”: “tsc”——执行一次TypeScript编译
8. “tsc:w”: “tsc -w”——以监控模式运行TypeScript编译器。后台始终保持进程。一旦TypeScript文件变化即会重编译
9. “dependencies”——生产环境中需要的依赖包
10. “devDependencies”——开发中要使用的安装包
    package.json的配置可以参考：npm-package.json

tsconfig.json

tsconfig.json 是TypeScript编译器配置文件

{
  "compilerOptions": {
    "target": "es5",
    "module": "amd",
    "sourceMap": true
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

tsconfig.json文件各项说明

1. “compilerOptions”——编译器选项；
2. “target”——编译目标，如这里编译为es5代码；
3. “module”——处理独立文件时的模块加载方式；
4. “sourceMap”——是否创建map文件以帮助调试；
5. “exclude”——编译器会编译TypeScript文件（.ts或.tsx），通过排除设置里的TypeScript文件不会被编译。
   关于tsconfig.json的进一步信息可以参考：tsconfig.json

安装http服务

http-server

用浏览器进行预览，可以安装一下http服务

npm install -g http-server
http-server    // 启动  http://localhost:8080/   

更多使用方法和命令，可以输入 http-sever -help 来查看。

lite-server

还有另一个可推荐的是：lite-server

轻量级的仅适用于开发 的 node 服务器， 它仅支持 web app, 它能够为你打开浏览器, 当你的html或是JavaScript文件变化时，它会识别到并自动帮你刷新浏览器, 还能使用套接字自动注入变化的CSS, 当路由没有被找到时，它将自动后退页面。

npm install -g lite-server --save-dev

–save-dev 选项，将会把安装的环境写入到pakage.json里面
在你的项目 package.json 文件中添加一个 “script” 入口:

"scripts": {          //
    "dev": "lite-server"     // npm run dev  启动项目啦
  },

lite-server 使用BrowserSync, 它是允许你去覆盖默认的配置，这得通过你项目里的文件 bs-config.json 或 bs-config.js 来完成
lite-server -c configs/my-bs-config.js
** 举例 ** 要改变端口号, 被监测的文件路径, 以及你项目的base路径, 在你项目中创建 bs-config.json 文件:

{
  "port": 8000,
  "files": ["./src/**/*.{html,htm,css,js}"],
  "server": { "baseDir": "./src" }
}