1. 安装
先总结一下TypeScript开发环境用到的各种工具：
- Node——通过npm安装TypeScript及大量依赖包。从https://nodejs.org/下载并安装它；如果安装各种包不方便，可以将安装源改为国内镜像，具体方案网络上已经有很多了，可供参考；
- VS Code——从 https://code.visualstudio.com/ 下载并安装它；
- TypeScript——TypeScript语言，后面通过npm安装；
- concurrently——Node包，同时执行命令用。 后面通过npm安装；
- lite-server——Node包，轻量级的Node开发服务器。 后面通过npm安装；
1.1安装Node
Node的安装已经有很多说明了，这里不列举。没有FQ软件的，记得把Node的镜像地址换为无所不能的淘宝。
npm install -g cnpm --registry=https://registry.npm.taobao.org
1.2 安装TypeScript
建议先将TypeScript安装成全局包方式，打开终端或命令行窗口，执行以下命令安装TypeScript：
npm install -g typescript
1.3 安装concurrently
concurrently是我们在开发时所需要用到的工具，它是一个可以并行执行package.json scripts里面脚本的功能库。
npm install -g concurrently
1.4 安装lite-server
Lite-server是一个在开发时的轻量级HTTP服务器（相当于IIS提供的功能）
npm install -g lite-server
2. 手动配置
2.1在配置环境前，创建目录angular4
2.2在angular4目录下创建目录lesson1-manualEnvironment
2.3使用vscode打开目录angular4
2.4在vscode中打开终端
2.5 在终端输入如下命令
cd lesson1-manualEnvironment
npm init
输入默认的值即可，最终创建package.json文件，此步骤跳过也可以，手动新建文件package.json即可。
2.6 在vscode中打开文件package.json，使用如下内容覆盖
{ "name": "angular-lesson1", "version": "1.0.0", "description": "lesson1 package.json from the documentation, supplemented with testing support", "scripts": { "build": "tsc -p src/", "build:watch": "tsc -p src/ -w", "serve": "lite-server -c=bs-config.json", "prestart": "npm run build", "start": "concurrently \"npm run build:watch\" \"npm run serve\"" }, "keywords": [], "author": "", "license": "MIT", "dependencies": {}, "devDependencies": {}, "repository": {} }
简单解释如下：
"build": "tsc -p src/", //在执行npm start的时候进行编译，编译所有的ts文件 "build:watch": "tsc -p src/ -w", //监视ts文件，一旦修改，自动编译 "serve": "lite-server -c=bs-config.json", //启动web服务器，默认是3000端口，使用bs-config.json来设定启动项参数 "prestart": "npm run build",//在执行npmstar之前执行 "start": "concurrently \"npm run build:watch\" \"npm run serve\"" //定义 npm start 命令内容
2.7 在vscode中,目录下lesson1-manualEnvironment新建文件bs-config.json，内容如下：
1 { 2 "server": { 3 "baseDir": "src", 4 "routes": { 5 "/node_modules": "node_modules" 6 } 7 } 8 }
2.8 在lesson1-manualEnvironment目录下新建目录src，同时在src目录下加入文件main.ts，index.html，内容如下
class BirdWhisperer { chirping: string; constructor(message: string) { this.chirping = message; } chirp() { return \'Ah~ oh~ \' + this.chirping; } } let birdWhisperer = new BirdWhisperer(\'coo-coo-coo...\'); document.body.innerHTML = birdWhisperer.chirp();
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script src="main.js"></script> </body> </html>
最终结果如下：
2.9 在终端输入npm start
2-10 如果要退出终端，输入快捷键 ctrl + c
3. 自动快速配置
手动配置的只是最基本的typeccript环境，还不包括angular4在内，如果需要一个个的去填写package.json也是很痛苦的事情，angular团队提供了快速方式来搭建
3.1在配置环境前，创建目录angular4(如果经过第2节，跳过)
3.2在angular4目录下创建目录lesson1-autoEnvironment
3.3使用vscode打开目录angular4
3.4在vscode中打开终端，在终端输入如下命令
git clone https://github.com/angular/quickstart.git lesson1-autoEnvironment
3.5继续输入如下
cd lesson1-autoEnvironment
npm intall
npm start
3.6 从服务器上自动下载的包括了太多的测试，可以删除多余的文件。用命令行的方式进入目录，执行以下命令
for /f %i in (non-essential-files.txt) do del %i /F /S /Q rd .git /s /q rd e2e /s /q
