生成.json文件
npm install 生成node_modules
npm install -g typescript 安装typescript
npm install -g typings 安装Typings工具
npm install webpack --save-dev 安装webpack
npm install webpack-dev-server -g 安装webpack
npm install ts-loader --save-dev
安装ts-loader
如果想在TypeScript代码中直接使用npm上的JS库，需要借助Typings这个工具。
Typings也是一个包管理器，它管理的是JS代码“定义文件”，用Typings安装相应的定义文件后，和就可以去node_modules目录中找到相应的JS库，并编译到最终的JS代码中。
mkdir dist
编译后文件目录
touch src/main.ts
touch index.html
src/main.ts文件是我们的typescript的入口文件，内容如下
function Add(left: number,right: number):number{
return left +
console.log(Add(5,9))
function area2(shape:string,width:number,height:number){
var area = width *
shape + ":" + width+"*"+height+"="+
document.body.innerHTML = area2("的面积",10,30);
index.html 是我们的模板文件，内容如下
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Learning TypeScript&/title&
&script src="https://my.oschina.net/tongjh/blog/dist/build.js"&&/script&
###配置package.json文件
修改scripts节点，修改后的内容是
"scripts": {
"start": "webpack-dev-server --inline --hot --colors --progress"
package.json详解请看这里：/nodejs/nodejs-npm.html
###创建tsconfig.json文件
为了方便编译器和编辑器识别TypeScript项目，TypeScript约定了tsconfig.json文件来项目配置，如果运行tsc时不指定输入文件，编译器则会查找项目目录中的这个文件，如果找不到则会依次向父级目录查找
在下新建tsconfig.json文件，内容如下
"compilerOptions": {
"target": "es5",
"module": "amd",
"outFile": "dist/index.js"
"include": [
"src/**/*.ts"
"exclude": [
"node_modules",
"**/*.spec.ts"
上面文件内容的意思是，在src目录下的所有.ts文件编译，输出到dist/index.js,现在我们可以在根目录下使用命令行，运行`tsc`，就会发现dist/index.js生成了编译后的内容
关于tsconfig.json配置的说明看这里：/typescript/typescript-tsconfig-json.html
### 创建webpack配置文件
上面我们安装了webpack和webpack-dev-server，现在我们添加webpack配置文件
在根目录下新建`webpack.config.json`文件，内容如下
var path = require('path')
module.exports = {
entry: './src/main.ts',
path: path.resolve(__dirname, './dist'),
filename: 'build.js'
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://:7777/`,恭喜你，配置成功。
关于webpack配置文件的说明请看这里`/p/b95bbcfc590d`如何使用TypeScript和Webpack编写网页应用_javascript_ThinkSAAS
如何使用TypeScript和Webpack编写网页应用
如何使用TypeScript和Webpack编写网页应用
内容来源： 网络
TypeScript所做的，是在JavaScript的基础上加入了类型，TypeScript编译器将TypeScript编译成JavaScript，可以在浏览器或者nodejs平台上运行。最新版本的TypeScript语法根ES6标准已经十分接近，而且因为是JS的超集，TS代码中夹杂普通JS代码也是可以的。所以，如果你也考虑开始使用Bable＋ES6，不妨也看一下TypeScript。
TypeScript项目和tsconfig.json
首先安装TypeScript编译器
npm i -g typescript
进入项目目录，新建一个hello.ts
function sayHello(name: string) {
return &Hello, & +
let myName = &Cheng Wang&;
console.log(sayHello(myName));
tsc hello.ts
编译器会生成 hello.js
function sayHello(name) {
return &Hello, & +
var myName = &Cheng Wang&;
console.log(sayHello(myName));
为了方便编译器和编辑器识别TypeScript项目，TypeScript约定了tsconfig.json文件来存储项目配置，如果运行tsc时不指定输入文件，编译器则会查找项目目录中的这个文件，如果找不到则会依次向父级目录查找。比如这样：
"compilerOptions": {
"outFile": "dist/app.js",
"sourceMap": true
"files": [
"src/app.ts"
直接运行tsc，会自动把src/app.ts编译到dist/app.js。
关于这个配置文件的更多选项，可以看。
TypeScript中，模块的使用方法与ES6一致。
src/modules/utilities.ts：
function getUrlParam(key: string) {
const REG_PATTERN = new RegExp(&(^|&)& + key + &=([^&]*)(&|$)&, &i&);
let result: string[] = location.search.substr(1).match(REG_PATTERN);
if (result !== null) {
return decodeURIComponent(result[2]);
export { getUrlParam }
src/app.ts：
import { getUrlParam } from &./modules/utilities&;
let deviceType: string = getUrlParam(&deviceType&);
console.log(deviceType);
编译后的app.js（TypeScript编译器在输出单个文件时，只能使用AMD或System模块规范）：
define("modules/utilities", ["require", "exports"], function (require, exports) {
"use strict";
function getUrlParam(key) {
var REG_PATTERN = new RegExp(&(^|&)& + key + &=([^&]*)(&|$)&, &i&);
var result = location.search.substr(1).match(REG_PATTERN);
if (result !== null) {
return decodeURIComponent(result[2]);
exports.getUrlParam = getUrlP
define("app", ["require", "exports", "modules/utilities"], function (require, exports, utilities_1) {
"use strict";
var deviceType = utilities_1.getUrlParam(&deviceType&);
console.log(deviceType);
我们开发JS程序的时候，要用到NPM上的第三方的库，比如jQuery、Lodash等，但是绝大多数库都是用JS写的，没有类型提示，我们也不能在在代码中将这些库作为模块引入。
比如我们需要在项目中使用Lodash：
npm i --save lodash
然后在代码中引入：
import * as _ from &lodash&;
console.log(_.camelCase(&helloworld&))
运行 tsc 则报错：
src/app.ts(1,20): error TS2307: Cannot find module &lodash&.
如果想在TypeScript代码中直接使用npm上的JS库，需要借助Typings这个工具。
Typings也是一个包管理器，它管理的是JS代码“定义文件”，用Typings安装相应的定义文件后，编辑器和编译器就可以去node_modules目录中找到相应的JS库，并编译到最终的JS代码中。
先安装Typings工具：
npm i -g typings
然后安装Lodash的定义文件：
typings install --save lodash
Typings会去NPM、Bower上寻找库的作者加的定义文件，但是有的库如jQuery并没有官方的定义文件，则需要从社区维护的目录下安装：
typings install --save --ambient jquery
然后再tsconfig.json中的files配置中加入一条：
"files": [
"src/app.ts"，
"typings/main.d.ts"
此时编译就不会提示找不到模块了。
安装好定义文件之后，如果使用Visual Studio Code等对TypeScript支持较好的编辑器，则会提供更加强大的代码提示功能。
使用Webpack构建
TypeScript编译器支持很多模块组织规范，如ES6、commonJS、AMD等，但是如果想要将多个ts文件打包成一个文件，TypeScript只支持AMD和System，对于浏览器应用来说，还需要引入第三方的模块加载器。如果使用Webpack配合TypeScript的loader，则可以方便地构建浏览器可以运行的JS代码。
首先安装Webpack和ts-loader：
npm i webpack -g
npm i ts-loader --save-dev
然后配置项目目录中的webpack.config.js:
module.exports = {
entry: &./src/app.ts&,
filename: &app.js&,
path: &./dist&
resolve: {
extensions: [&&, &.webpack.js&, &.web.js&, &.ts&, &.js&]
loaders: [
{ test: /.ts$/, loader: &ts-loader& }
然后就可以通过运行webpack来构建了，构建生成的代码自带了webpack的模块加载器，可以直接在浏览器中运行。内容来源：
PHP开发框架
开发工具/编程工具
服务器环境
ThinkSAAS商业授权：
ThinkSAAS为用户提供有偿个性定制开发服务
ThinkSAAS将为商业授权用户提供二次开发指导和技术支持
让ThinkSAAS更好，把建议拿来。
开发客服微信