TypeScript与Knockout.js集成开发指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01090/article/details/148464881

TypeScript与Knockout.js集成开发指南

TypeScript TypeScript 使用手册（中文版）翻译。http://www.typescriptlang.org 项目地址: https://gitcode.com/gh_mirrors/typ/TypeScript

前言

本文主要介绍如何在TypeScript项目中使用Knockout.js框架。Knockout.js是一个轻量级的MVVM（Model-View-ViewModel）JavaScript库，它通过数据绑定简化了UI开发。结合TypeScript的类型系统，可以显著提升开发体验和代码质量。

环境准备

在开始之前，需要确保系统已安装以下工具：

Node.js - JavaScript运行环境
npm - Node.js包管理器
TypeScript - 全局安装TypeScript编译器

项目初始化

创建项目结构

首先创建一个标准的TypeScript项目结构：

project/
   ├─ src/        # TypeScript源代码
   ├─ built/      # 编译输出目录
   └─ externals/  # 第三方库文件

初始化npm项目

通过npm init命令初始化项目，生成package.json文件。这个文件将记录项目的依赖和配置信息。

安装依赖

开发依赖

安装TypeScript和Knockout的类型定义文件：

npm install -g typescript
npm install --save @types/knockout

运行时依赖

需要手动下载以下两个库文件并放入externals目录：

Knockout.js - MVVM框架
RequireJS - 模块加载器

配置TypeScript

创建tsconfig.json文件配置TypeScript编译器：

{
    "compilerOptions": {
        "outDir": "./built/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "amd",
        "target": "es5"
    },
    "files": [
        "./src/require-config.ts",
        "./src/hello.ts"
    ]
}

关键配置说明：

outDir：指定输出目录
module：使用AMD模块规范（与RequireJS兼容）
target：编译为ES5代码
files：指定要编译的文件列表

编写代码

1. 创建ViewModel

在src/hello.ts中定义ViewModel类：

import * as ko from 'knockout';

class HelloViewModel {
    language: KnockoutObservable<string>;
    framework: KnockoutObservable<string>;

    constructor(language: string, framework: string) {
        this.language = ko.observable(language);
        this.framework = ko.observable(framework);
    }
}

ko.applyBindings(new HelloViewModel('TypeScript', 'Knockout'));

这里我们：

导入Knockout库
定义包含两个可观察属性的ViewModel
创建实例并应用绑定

2. 配置RequireJS

在src/require-config.ts中配置模块加载：

declare var require: any;
require.config({
    paths: {
        knockout: 'externals/knockout-3.4.0'
    }
});

3. 创建视图

在项目根目录创建index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>TypeScript + Knockout</title>
</head>
<body>
    <p>
        Hello from
        <strong data-bind="text: language">todo</strong>
        and
        <strong data-bind="text: framework">todo</strong>!
    </p>

    <p>Language: <input data-bind="value: language" /></p>
    <p>Framework: <input data-bind="value: framework" /></p>

    <script src="./externals/require.js"></script>
    <script src="./built/require-config.js"></script>
    <script>
        require(["built/hello"]);
    </script>
</body>
</html>

视图包含：