免责声明
本指南将展示使用 TypeScript、jQuery、KnockoutJS 和 RequireJS 构建基本网站的“a”方法。还有很多其他方法可以做到这一点。
开始
安装 Visual Studio 扩展
安装 Visual Studio 2012 扩展 - TypeScript for Microsoft Visual Studio 2012 PowerTool 1.0.1.0
http://visualstudiogallery.msdn.microsoft.com/ac357f1e-9847-46ac-a4cf-520325beaec1
创建新的 Visual Studio 项目
- 启动 Visual Studio 2012。
- 选择菜单项“文件”->“新建”->“项目...”
- 导航到“模板”->“其他语言”->“TypeScript”（此
实际上创建了一个扩展名为 .csproj 的项目文件 - 很奇怪）
- 选择项目类型“带有 TypeScript 的 HTML 应用程序”
清理
从项目中删除文件 app.css、app.ts
添加组件
使用 NuGet，添加...
-
RequireJS （我为本教程选择了 2.1.15 版本）
-
KnockoutJS （我为本教程选择了 3.2.0 版本）
-
jQuery （我为本教程选择了 2.1.1 版本）
-
requirejs.TypeScript.DefinitelyTyped （我选择了版本 0.2.0 by
本教程的 Jason Jarrett。它安装了一个打字稿def文件
乔什·鲍德温（Josh Baldwin）- 2.1.8 版）
-
knockout.TypeScript.DefinitelyTyped （我选择了版本 0.5.7 by
本教程的 Jason Jarrett）
设置项目文件夹
在项目根目录创建项目文件夹
创建一个基本的 TypeScript 模型
将 TypeScript 文件添加到项目文件夹“Models”
- 在解决方案资源管理器中右键单击文件夹“Models”
- 选择上下文菜单项“添加”->“新建项...”
- 在左侧窗格中，突出显示“Visual C#”
- 在右侧窗格中，突出显示“TypeScript 文件”
- 在文件名文本框中，输入“myTestModel.ts” 点击“添加”按钮
修改文件“myTestModel.ts”
class myTestModel {
public fieldZ: string;
public fieldY: string;
public fieldX: number;
}
export=myTestModel;
创建一个 TypeScript 视图模型
将 TypeScript 文件添加到项目文件夹“ViewModels”
- 在解决方案资源管理器中右键单击文件夹“ViewModels”
- 选择上下文菜单项“添加”->“新建项...”
- 在左侧窗格中，突出显示“Visual C#”
- 在右侧窗格中，突出显示“TypeScript 文件”
- 在文件名文本框中，输入“myViewModel.ts”
- 点击“添加”按钮
修改文件 myViewModel.ts...
/// <reference path="../Scripts/typings/knockout/knockout.d.ts" />
import myTestModel = require("Models/myTestModel");
import ko = require("knockout");
class myViewModel {
public myString: KnockoutObservable<string>;
public myNumber: KnockoutObservable<number>;
public myComplexObject: KnockoutObservable<myTestModel>;
constructor() {
this.myString = ko.observable("some test data");
this.myNumber = ko.observable(987);
var tempComplexObject = new myTestModel;
tempComplexObject.fieldZ = "some bogus test data";
tempComplexObject.fieldY = "another bogus test data";
tempComplexObject.fieldX = 123;
this.myComplexObject = ko.observable(tempComplexObject);
}
myButton_Click() {
alert("I was clicked");
}
}
export=myViewModel;
添加配置
添加RequireJS配置文件
- 在解决方案资源管理器中右键单击项目文件夹“Application”
- 选择上下文菜单项“添加”->“新建项...”
- 在左侧窗格中，突出显示“Visual C#”
- 在右侧窗格中，突出显示“TypeScript 文件”
- 在文件名文本框中，输入“require-config.ts”
- 点击“添加”按钮
修改文件“require-config.ts”
/// <reference path="../Scripts/typings/requirejs/require.d.ts" />
require.config({
baseUrl: "",
paths: {
"jQuery": "Scripts/jquery-2.1.1",
"knockout": "Scripts/knockout-3.2.0.debug",
"myViewModel": "ViewModels/myViewModel"
},
shim: {
"jQuery": {
exports: "$"
}
},
});
require(["jQuery"], function ($) {
$(document).ready(function () {
require(["knockout", "myViewModel"], (knockout, myViewModel) => {
var viewModel = new myViewModel;
knockout.applyBindings(viewModel);
});
});
});
修改现有文件 index.html
需要将视图与视图模型对齐。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TypeScript HTML App</title>
<script data-main="Application/require-config" src="Scripts/require.js"></script>
</head>
<body>
<h1>TypeScript HTML App</h1>
<div id="myStringTest" data-bind="text: myString"></div>
<input id="myStringTest2" data-bind="value: myString" />
<input id="myNumberTest" data-bind="value: myNumber" />
<input id="myComplexObjectTest" data-bind="value: myComplexObject().fieldZ" />
<button id="myMethodTest" data-bind="click: myButton_Click" >click me</button>
</body>
</html>
运行它
好的 - 是时候试一试了。完成，在 .ts 文件中设置一些断点，然后按 F5。
结论：
如您所见，示例中的代码并不多。如果您运行示例并单击按钮，您会发现 index.html 上的按钮绑定到 myViewModel.ts 中名为 myButton_Click 的方法。此外，文本框 myStringTest2 和 myNumberTest 绑定到视图模型中定义的变量。
require-config.ts 文件包含已连接的依赖项列表。 “knockout.applyBindings(viewModel)”行将 myViewModel 的实例与 html 视图相关联。
注意 TypeScript 如何允许使用数据类型声明变量？
我希望这本入门书对您有所帮助。只需将几块放在桌子上就可以帮助我想象这些组件是如何一起发挥作用的。 KnockoutJS 有一些很酷的插件——例如敲除映射——它允许从 Web 服务中提取的数据直接绑定到视图模型，而无需中间转换或翻译。此外，knockoutjs 可以支持模板 - 大概是这样可以实现母版页。
为了完整起见，我将添加一个名为 Views 的项目文件夹，并在其中保存我的 html。我认为这对于 MVC/MVVM 开发来说更为传统。具有 .html 的 url 仍然在唠叨我。我喜欢 MVC 风格的路由（没有文件扩展名），但这也很酷——尤其是因为它只不过是 HTML 和 JavaScript——真正的跨平台。除了 Web 服务调用（未包含在示例中）之外，没有回发，客户端处理速度很快。
请随意评论...