如何使用 jQuery、RequireJS 和 KnockoutJS 创建基本的 TypeScript 项目

Posted 2023-02-22

【中文标题】如何使用 jQuery、RequireJS 和 KnockoutJS 创建基本的 TypeScript 项目

【英文标题】：How to create basic TypeScript project using jQuery, RequireJS, and KnockoutJS

【发布时间】：2014-11-13 11:31:17

【问题描述】：

我一直在寻找一个简单的方法，使用 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 文件。

KnockoutJS - UI 绑定，利用 MVVM 模式。 HTML 视图是指视图模型中的变量和方法。视图模型是一个 JavaScript 对象（JavaScript 文件可能是编译 .ts 文件的结果 - 参见上面的 TypeScript）。

DefinitelyTyped - 还包括两个肯定类型的 NuGet 包。因为 TypeScript 正在尝试验证数据类型的使用，所以它正在执行检查以确保它知道所有引用。 JavaScript 比这更松散一些。为了满足 TypeScript（当引用外部 JavaScript 对象时），我们需要一种方法来描述（对 TypeScript）我们期望使用的对象。这些DefinitelyTyped 脚本提供了这个定义。它们不提供任何功能，只是为 TypeScript 编译器提供清晰度，以便它可以执行这些检查。

在下面的例子中，你会看到

/// <reference path="../Scripts/typings/requirejs/require.d.ts" />

这就是 TypeScript 编译器将如何包含 requirejsDefiniteTyped 定义文件的方式。创建这些DefinitelyTyped 脚本的组织已经创建了一个庞大的集合。这里我们只提到两个 - KnockoutJS 和 RequireJS（好吧，因为这是本教程的范围）

【参考方案1】：

免责声明

本指南将展示使用 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 服务调用（未包含在示例中）之外，没有回发，客户端处理速度很快。

请随意评论...

【讨论】：

非常感谢。我花了一周时间在网上搜索同样的问题。这是第一个真正奏效的建议。我已经能够使用 require.js 加载 jquery 和骨干网。最重要的是，我的断点是在 Visual Studio 中命中的！

@barrypicker，感谢您详尽的撰写，您是否可以包括淘汰赛 bindingHandlers？它们似乎对 KO 至关重要，但我找不到任何关于将它们与 TS 一起使用的文档。我的相关问题：***.com/questions/47876958/…