我一直在寻找一个简单的方法，以使用RequireJS，jQuery和KnockoutJS创建Visual Studio 2012 TypeScript项目的最基本示例。有几个示例可供使用，但对我而言，有些示例比我想的要复杂，因此我着手创建方法，并将其发布在此处以供公众审查。作为问答式知识共享练习，我已经回答了自己的问题。
对于那些不熟悉的人，这里是其中包含的组件的快速分割...
TypeScript-一个Visual Studio扩展，允许脚本通过JavaScript的超集语言创建.TS文件。这提供了定义与方法和变量关联的数据类型的功能-否则JavaScript会丢失该数据类型。这样，编译时检查可以确保正确使用，以减少运行时冲突。在构建Visual Studio项目时，Visual Studio扩展会将脚本编译为实际的JavaScript。因此，此扩展程序带有其自己的编译器-tsc.exe。预期生成的JavaScript文件将部署到生产环境，而不是源代码.ts文件。
jQuery-一个用于HTML文档遍历和操纵，事件处理，动画和Ajax交互的JavaScript框架。
RequireJS-依赖加载器。有时JavaScript引用可能会变得疯狂。这试图帮助解决这些问题。我的示例显示，即使使用了许多JavaScript文件，HTML也仅引用其中一个-加载其他JavaScript文件的根JavaScript文件。
KnockoutJS-UI绑定(bind)，利用MVVM模式。 HTML View 引用 View 模型中的变量和方法。 View 模型是一个JavaScript对象(JavaScript文件可能是编译.ts文件的结果-请参见上面的TypeScript)。
DefinitelyTyped-还包括两个DefinitelyTyped NuGet软件包。因为TypeScript试图验证数据类型的使用情况，所以它正在执行检查以确保它知道所有引用。 JavaScript比这更宽松。为了满足TypeScript(在引用外部JavaScript对象时)，我们需要一种方法(对TypeScript)描述我们期望使用的对象。这些DefinitelyTyped脚本提供了此定义。它们没有提供功能，只是为TypeScript编译器提供了清晰度，因此它可以执行这些检查。
在下面的示例中，您将看到
/// <reference path="../Scripts/typings/requirejs/require.d.ts" />
这就是TypeScript编译器将包括requirejs DefinitelyTyped定义文件的方式。创建这些DefinitelyTyped脚本的组织已经创建了一个庞大的集合。在这里，我们仅提及两个-KnockoutJS和RequireJS(好吧，因为这是本教程的范围)
最佳答案
免责声明
此操作方法将显示“a” 使用TypeScript，jQuery，KnockoutJS和RequireJS构建基本网站的方式。还有许多其他方法可以做到这一点。
入门
安装Visual Studio扩展
安装Visual Studio 2012扩展-Microsoft Visual Studio 2012 PowerTool 1.0.1.0的TypeScript
http://visualstudiogallery.msdn.microsoft.com/ac357f1e-9847-46ac-a4cf-520325beaec1
创建新的Visual Studio项目
实际上创建扩展名为.csproj的项目文件-奇怪)
清理
从项目中删除文件app.css，app.ts
添加组件
使用NuGet，添加...
Jason Jarrett本教程。它安装了一个 typescript def文件
由Josh Baldwin-版本2.1.8)
本教程的Jason Jarrett)
设置项目文件夹
在项目的根目录下创建项目文件夹
创建一个基本的TypeScript模型
将TypeScript文件添加到项目文件夹“模型”
修改文件“myTestModel.ts”
class myTestModel {
public fieldZ: string;
public fieldY: string;
public fieldX: number;
}
export=myTestModel;
创建一个TypeScript View 模型
将TypeScript文件添加到项目文件夹“ViewModels”
修改文件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配置文件
修改文件“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
需要将 View 与 View 模型对齐。
<!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上的按钮绑定(bind)到myViewModel.ts中名为myButton_Click的方法。此外，文本框myStringTest2和myNumberTest绑定(bind)到 View 模型中定义的变量。
require-config.ts文件包含已连接的依赖项列表。 “knockout.applyBindings(viewModel)”行将myViewModel的实例与html View 相关联。
注意TypeScript如何允许使用数据类型声明变量？
希望本入门手册对您有所帮助。只需将几张桌子放在桌子上，就可以使我看到这些组件如何一起发挥作用。 KnockoutJS有一些很酷的插件(例如， knockout 映射)，它允许从Web服务提取的数据直接绑定(bind)到 View 模型，而无需中间转换或转换。另外，knockoutjs可以支持模板-大概可以实现母版页。
为了完整起见，我将添加一个名为Views的项目文件夹，并在其中保存我的html。我认为对于MVC/MVVM开发而言，这更为传统。具有.html的网址仍在困扰我。我喜欢MVC样式的路由(没有文件扩展名)，但这也很酷-尤其是因为它只不过是HTML和JavaScript-真正的跨平台。除了Web服务调用(示例中未包括)外，没有回发，客户端处理速度很快。
请随意发表评论...
关于javascript - 如何使用jQuery，RequireJS和KnockoutJS创建基本的TypeScript项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25924288/