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

Question

我一直在寻找一个简单的操作方法,使用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 - 利用MVVM模式进行UI绑定.HTML视图引用视图模型中的变量和方法.视图模型是一个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(好吧,因为这是本教程的范围)

Answer 1

放弃

该方法文档将显示使用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项目

• 启动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 (
  本教程由Jason Jarrett 选择版本0.2.0 .它安装了Josh Baldwin的打字稿def文件 - 版本2.1.8)
• knockout.TypeScript.DefinitelyTyped (
  本教程由Jason Jarrett 选择版本0.5.7 )

设置项目文件夹

在项目的根目录下创建项目文件夹

• 应用
• 楷模
• 的ViewModels

创建一个基本的TypeScript模型

将TypeScript文件添加到项目文件夹"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的网址仍在唠叨我.我喜欢MVC风格的路由(没有文件扩展名),但这也很酷 - 特别是因为它只不过是HTML和JavaScript - 真正的跨平台.除了Web服务调用(不包括在示例中),没有回发,客户端处理速度很快.

请随意发表评论...