安装npm init 生成package.json文件npm install 生成node_modules文件夹npm install -g typescript 安装typescriptnpm i
安装
npm init 生成package.json文件npm install 生成node_modules文件夹npm install -g typescript 安装typescriptnpm install -g typings 安装Typings工具npm install webpack --save-dev 安装webpacknpm install webpack-dev-server -g 安装webpacknpm install ts-loader --save-dev 安装ts-loader如果想在TypeScript代码中直接使用npm上的JS库，需要借助Typings这个工具。
Typings也是一个包管理器，它管理的是JS代码“定义文件”，用Typings安装相应的定义文件后，编辑器和编译器就可以去node_modules目录中找到相应的JS库，并编译到最终的JS代码中。
项目结构
mkdir dist 编译后文件目录mkdir src 源文件目录touch src/main.ts 入口文件touch index.html 模板文件src/main.ts文件是我们的typescript的入口文件，内容如下
function Add(left: number,right: number):number{ return left + right;}console.log(Add(5,9))function area2(shape:string,width:number,height:number){ var area = width * height; return shape + ":" + width+"*"+height+"="+area;}document.body.innerHTML = area2("长方形的面积",10,30);index.html 是我们的模板文件，内容如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Learning TypeScript</title></head> <body> <script src="dist/build.js"></script></body> </html>###配置package.json文件
修改scripts节点，修改后的内容是
"scripts": { "start": "webpack-dev-server --inline --hot --colors --progress"},package.json配置文件详解请看这里：http://www.runoob.com/nodejs/nodejs-npm.html
###创建tsconfig.json文件
为了方便编译器和编辑器识别TypeScript项目，TypeScript约定了tsconfig.json文件来存储项目配置，如果运行tsc时不指定输入文件，编译器则会查找项目目录中的这个文件，如果找不到则会依次向父级目录查找
在根目录下新建tsconfig.json文件，内容如下
{ "compilerOptions": { "target": "es5", "module": "commonjs", "outDir":"./dist/" }, "include": [ "src/**/*.ts" ], "exclude": [ "node_modules", "**/*.spec.ts" ]}上面文件内容的意思是，在src目录下的所有.ts文件编译，输出到dist/index.js,现在我们可以在根目录下使用命令行，运行tsc，就会发现dist/index.js生成了编译后的内容
关于tsconfig.json配置的说明看这里：http://www.w3cschool.cn/typescript/typescript-tsconfig-json.html
创建webpack配置文件
上面我们安装了webpack和webpack-dev-server，现在我们添加webpack配置文件在根目录下新建webpack.config.json文件，内容如下
var path = require('path')module.exports = { entry: './src/main.ts', output: { path: path.resolve(__dirname, './dist'), filename: 'build.js' }, module: { loaders: [ { test: //.ts$/, loader: 'ts-loader' } ] }, // 配置 webpack-dev-server devServer:{ historyApiFallback: true, hot: true, inline: true, port: 7777 // 修改端口，一般默认是8080 } }在命令行输入webpack会发现dist/build.js已经编译生成好了，现在双击根目录下的index.html会发现页面上输出了”长方形:10*30=300“,说明webpack正常工作，下面测试webpack-dev-server服务，在命令行输入npm start，打开浏览器，在地址栏中输入：http://localhost:7777/,恭喜你，配置成功。关于webpack配置文件的说明请看这里http://www.jianshu.com/p/b95bbcfc590d
