Это руководство призвано научить связывать TypeScript и Knockout.js.

Предполагается, что вы уже используете Node.js и npm.

Table of Contents #

• Создание структуры проекта
• Установка зависимостей для сборки
• Получение зависимостей времени выполнения
• Добавление файла конфигурации TypeScript
• Написание кода
• Собираем все вместе

Создание структуры проекта #

Начнем с создания новой папки. Мы назовем ее proj, однако ей можно дать любое необходимое имя.

mkdir proj
cd proj

Наш проект будет иметь следующую структуру:

proj/
   +- src/
   +- built/

Файлы TypeScript будут находиться в папке src, обрабатываться компилятором TypeScript, а результат помещаться в build.

Давайте создадим эту структуру:

mkdir src
mkdir built

Установка зависимостей для сборки #

Для начала убедимся, что TypeScript и Typings установлены глобально.

npm install -g typescript typings

Очевидно, что вы знаете, что такое TypeScript, но можете не знать о Typings. Typings — это менеджер пакетов для получения файлов объявлений. Теперь используем Typings, чтобы получить файлы объявлений для Knockout:

typings install --global --save dt~knockout

Опция --global сообщает Typings, что файлы объявлений нужно получить из DefinitelyTyped, репозитория с созданными сообществом файлами .d.ts. Данная команда создаст файл под именем typings.json, и добавит папку typings в текущую директорию.

Получение зависимостей времени выполнения #

Нам необходимо получить саму библиотеку Knockout, а также нечто, называемое RequireJS. RequireJS — это библиотека, которая позволяет асинхронно загружать модули во время выполнения.

Есть три способа, которыми можно это сделать:

1. Загрузить файлы вручную и разместить их.
2. Загрузить файлы через менеджер пакетов, например, Bower, и разместить их.
3. Использовать систему доставки контента (CDN), чтобы разместить файлы.

Мы не будем усложнять, и выберем первый вариант, но в документации Knockout есть подробное описание использования CDN, а другие библиотеки, подобные RequireJS, можно найти на cdnjs.

Создадим папку externals в корне нашего проекта.

mkdir externals

Теперь загрузим Knockout и RequireJS в эту папку. Самые последние и минифицированные версии этих файлов должны подойти.

Добавление файла конфигурации TypeScript #

Файлы TypeScript придется объединить — и написанный вами код, и необходимые файлы объявлений.

Для этого нужно создать файл tsconfig.json, содержащий список входных файлов и все настройки компиляции. Просто создайте новый файл под именем tsconfig.json в корневой директории проекта, и вставьте в него следующий код:

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

Здесь включается файл typings/index.d.ts, который был создан Typings. Этот файл автоматически включает все установленные зависимости.

Больше узнать о файлах tsconfig.json можно здесь.

Написание кода #

Напишем наш первый код на TypeScript с использованием Knockout. Сначала создадим файл под именем Hello.ts в папке src.

import * as ko from "knockout";

class HelloViewModel {
    language: KnockoutObservable
    framework: KnockoutObservable

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

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

Затем в той же папке src создадим файл require-config.ts.

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

Этот файл сообщит RequireJS, где искать Knockout, когда мы импортируем его как в файле hello.ts. Все страницы, которые вы создадите, должны включать этот файл сразу после RequireJS, но до импортирования чего-либо еще. Чтобы лучше понять структуру данного файла и то, как настраивать RequireJS, прочтите документацию.

Чтобы отобразить HelloViewModel, понадобится вид. Создайте в корне проекта файл index.html со следующим содержимым:

Привет от todo и todo!

Язык:

Фреймворк:

Обратите внимание, что здесь три тега script. Сначала мы включаем саму библиотеку RequireJS. Затем мы задаем соответствие путям внешних зависимостей в файле require-config.js, чтобы RequireJS знала, где искать зависимости. И, наконец, мы вызываем require со списком загружаемых модулей.

Собираем все вместе #

Просто запустите:

tsc

Теперь откройте index.html в любимом браузере, и все должно быть готово! Вы должны увидеть страницу с текстом "Привет от TypeScript и Knockout!". Ниже будут два поля ввода. При изменении их содержимого и переводе фокуса исходное сообщение будет изменяться.

---

Поддержите перевод документации:



Поддерживатель | Github Репозиторий

---

Documentation generated by mdoc.