Почнемо зі створення нової папки. Ми назвемо її proj. проте їй можна дати будь-яку необхідну ім'я.
Наш проект буде мати наступну структуру:
Файли TypeScript будуть знаходитися в папці src. оброблятися компілятором TypeScript, а результат поміщатися в build.
Давайте створимо цю структуру:
Для початку переконаємося, що TypeScript і Typings встановлені глобально.
Нам необхідно отримати саму бібліотеку Knockout, а також дещо, зване RequireJS. RequireJS - це бібліотека, яка дозволяє асинхронно завантажувати модулі під час виконання.
Є три способи, якими можна це зробити:
- Завантажити файли вручну і розмістити їх.
- Завантажити файли через менеджер пакетів, наприклад, Bower. і розмістити їх.
- Використовувати систему доставки контенту (CDN), щоб розмістити файли.
Ми не будемо ускладнювати, і виберемо перший варіант, але в документації Knockout є докладний опис використання CDN. а інші бібліотеки, подібні RequireJS, можна знайти на cdnjs.
Створимо папку externals в корені нашого проекту.
Тепер завантажимо Knockout і RequireJS в цю папку. Найостанніші і мініфіцірованние версії цих файлів повинні підійти.
Для цього потрібно створити файл tsconfig.json. що містить список вхідних файлів і всі налаштування компіляції. Просто створіть новий файл під ім'ям tsconfig.json в кореневій директорії проекту, і вставте в нього наступний код:
Тут включається файл typings / index.d.ts. який був створений Typings. Цей файл автоматично включає всі встановлені залежності.
Більше дізнатися про файли tsconfig.json можна тут.
Напишемо наш перший код на TypeScript з використанням Knockout. Спочатку створимо файл під ім'ям Hello.ts в папці src.
Потім в тій же папці src створимо файл require-config.ts.
Цей файл повідомить RequireJS, де шукати Knockout, коли ми імпортуємо його як в файлі hello.ts. Всі сторінки, які ви створите, повинні включати цей файл відразу після RequireJS, але до імпортування чого-небудь ще. Щоб краще зрозуміти структуру даного файлу і то, як налаштовувати RequireJS, прочитайте документацію.
Щоб відобразити HelloViewModel. знадобиться вид. Створіть в корені проекту файл index.html з наступним змістом:
Зверніть увагу, що тут три тега script. Спочатку ми включаємо саму бібліотеку RequireJS. Потім ми задаємо відповідність шляхах зовнішніх залежностей в файлі require-config.js. щоб RequireJS знала, де шукати залежності. І, нарешті, ми викликаємо require зі списком завантажувальних модулів.
Тепер відкрийте index.html в улюбленому браузері, і все повинно бути готово! Ви повинні побачити сторінку з текстом "Привіт від TypeScript і Knockout!". Нижче будуть два поля введення. При зміні їх вмісту та переказ фокуса вихідне повідомлення буде змінюватися.
Підтримайте переклад документації: