Javascript 如何使用jQuery、RequireJS和KnockoutJS创建基本的TypeScript项目
我一直在寻找一个简单的操作方法，用RequireJS、jQuery和KnockoutJS创建Visual Studio 2012 TypeScript项目的最基本示例。有几个例子，但对我来说，有些比我想要的更复杂，所以我开始创建一个操作指南，并将其发布在这里供公众审查。作为问答式的知识共享练习，我回答了自己的问题 对于那些不熟悉的人，这里是所包含组件的快速分解 -Visual Studio扩展，允许脚本通过JavaScript超集语言创建.TS文件。这提供了定义与方法和变量相关联的数据类型的能力，而JavaScript中缺少这种数据类型。通过这样做，编译时检查可以确保正确使用，以减少运行时冲突。在构建VisualStudio项目时，VisualStudio扩展将把脚本编译成实际的JavaScript。因此，此扩展自带自己的编译器-tsc.exe。预期生成的JavaScript文件将部署到生产环境中，而不是源代码.ts文件 -用于HTML文档遍历和操作、事件处理、动画和Ajax交互的JavaScript框架 -依赖加载程序。有时JavaScript引用会变得疯狂。这试图帮助解决这些问题。我的示例显示，即使使用了许多JavaScript文件，HTML也只引用其中一个——加载其他文件的根JavaScript文件 -UI绑定，利用MVVM模式。HTML视图是指视图模型中的变量和方法。视图模型是一个JavaScript对象，JavaScript文件可能是编译.ts文件的结果-请参阅上面的TypeScript -还包括两个明确类型的NuGet软件包。因为TypeScript正在尝试验证数据类型的使用情况，所以它正在执行检查以确保它知道所有引用。JavaScript比这更松散。为了在引用外部JavaScript对象时满足TypeScript，我们需要一种方法来描述我们期望使用的对象。这些定义类型的脚本提供了这个定义。它们不提供任何功能，只为TypeScript编译器提供了清晰性，以便它可以执行这些检查 在下面的示例中，您将看到Javascript 如何使用jQuery、RequireJS和KnockoutJS创建基本的TypeScript项目,javascript,mvvm,knockout.js,requirejs,typescript,Javascript,Mvvm,Knockout.js,Requirejs,Typescript,我一直在寻找一个简单的操作方法，用RequireJS、jQuery和KnockoutJS创建Visual Studio 2012 TypeScript项目的最基本示例。有几个例子，但对我来说，有些比我想要的更复杂，所以我开始创建一个操作指南，并将其发布在这里供公众审查。作为问答式的知识共享练习，我回答了自己的问题 对于那些不熟悉的人，这里是所包含组件的快速分解 -Visual Studio扩展，允许脚本通过JavaScript超集语言创建.TS文件。这提供了定义与方法和变量相关联的数据类型的能力
/// <reference path="../Scripts/typings/requirejs/require.d.ts" />
class myTestModel {
public fieldZ: string;
public fieldY: string;
public fieldX: number;
}
export=myTestModel;
/// <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;
/// <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);
});
});
});
<!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>
<!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>
请随时发表评论…非常感谢。我花了一周时间在网上搜索同一个问题。这是第一个实际有效的建议。我已经能够使用require.js加载jquery和主干。最重要的是，我的断点是在VisualStudio中命中的@barrypicker，谢谢你的全面报道，你能不能加入淘汰绑定处理程序？它们似乎对KO至关重要，但我找不到任何关于将它们用于TS的文档。我的相关问题：