TypeScript 是 Javascrip t超集，支持静态类型检测，可以在编译期提前暴露问题，节省 debug 时间，下面介绍一个基于 TypeScript 开发的网站的框架。
一 网站基础结构
首先，把网站的基本结构搭建起来。新键一个 www 目录，作为网站的根目录。然后新建一个 index.html ，作为网站入口，内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基于 TypeScript 的网站开发框架</title>
<script src="./js/index.js"></script>
</head>
<body>
</body>
</html>在网页中，使用 <script src="./js/index.js"></script> 引用了一个 js 文件。在 www 目录中新键一个 js 目录，在其中新键 index.js, 内容如下：
window.onload = function () {
console.log("onload");
}这时候使用浏览器打开 index.html 文件，可以在控制台看到输出 onload ，说明运行成功。
二 TypeScript 模块
一个网站可能功能很复杂，需要将各个不同的功能，封装到不同的模块中。在 www 同级目录，新建 app 和 framework 目录，app 作为 TypeScript 主要逻辑模块，framework 作为基础功能库模块，可以多个项目共用。添加完成后，目录结构如下：
为了方便测试，在两个项目分别添加一些内容。
1 framework 项目
在 framework 添加一个日志管理器，提供给其他模块使用，日志管理中有一个开关，控制是否打印日志。
在 framework 目录中添加 src 目录，在 src 目录中添加 LogMgr.ts 文件，代码内容如下：
namespace framework {
export class LogMgr {
// 日志开关
private static isDebug: boolean = true;
public static info(msg: string) {
if (this.isDebug) {
console.log(msg);
}
}
public static warn(msg: string) {
if (this.isDebug) {
console.warn(msg);
}
}
public static error(msg: string) {
if (this.isDebug) {
console.error(msg);
}
}
}
}2 app 项目
app 是网站的主要逻辑模块，也是 TypeScript 脚本的入口。测试代码中，引用日志管理器打印日志。
在 app 目录中添加 src 目录，在 src 目录中添加 App.ts 文件，代码内容如下：
namespace app {
import LogMgr = framework.LogMgr;
export class App {
public static main() {
LogMgr.info("app start");
LogMgr.warn("warn msg");
LogMgr.error("error msg");
LogMgr.info("app end");
}
}
App.main();
}3 TypeScript 编译配置
TypeScript 需要编译成 JavaScript 之后才能在网页中使用。TypeScript 的编译配置文件 tsconfig.json，支持集成，可以将多个项目公用的配置，放在基类 tsconfig-base.json 中。
跟 www 目录的同级添加基类配置文件 tsconfig-base.json，内容如下：
{
"compilerOptions": {
"target": "es6",
"module": "system",
"strict": true,
"sourceMap": true,
"removeComments": true,
"declaration": true,
"declarationDir": "./libs/"
}
}然后分别在 framework 和 app 目录分别添加项目的配置文件，内容如下：
{
"extends": "../tsconfig-base.json",
"compilerOptions": {
"outDir": "../www/js/framework"
},
"include": [
"src"
],
"exclude": [
"node_modules"
]
}{
"extends": "../tsconfig-base.json",
"compilerOptions": {
"outDir": "../www/js/app"
},
"include": [
"src"
],
"exclude": [
"node_modules"
],
"files": [
"../libs/LogMgr.d.ts"
]
}配置内容中，有几项需要另外说明，首先是基类配置文件中的
"declaration": true,
"declarationDir": "./libs/"declaration 为 true 时，编译时会生成声明文件 .d.ts，方便给其他模块使用，否则其他模块引用不到其他模块的内容。declarationDir 配置的是 .d.ts 的存放目录。
在 app 的配置文件中：
"files": [
"../libs/LogMgr.d.ts"
]就是引用 framework 导出的声明文件。
4 编译 TypeScript 模块
在 framework 目录和 app 目录执行 tsc 目录，会在 libs 目录下导出声明文件 .d.ts，在 www/js 目录中生成相应的 .js 文件。如下：
三 引用 TypeScript
在编译之后，js 文件已经生成到 js 目录中了，需要在网站的中引用生成的js文件，修改 index.js 的代码如下：
function loadLib(url) {
var script = document.createElement("script");
script.async = false;
script.src = url;
document.body.appendChild(script);
return script;
}
window.onload = function () {
// 加载 TypeScript 编译生成的 js 文件
loadLib("./js/framework/LogMgr.js");
loadLib("./js/app/app.js");
}在 index.js 中添加了一个 loadLib 函数，用于加载 TypeScript 编译生成的 js 文件，在 onload 方法中，分别加载两个模块的js。
运行可以看到在 app 项目中，调用日志管理器打印的log。
后续网站开发只需要在对应的 TypeScript 模块中进行。
