add

Microsoft Developer Tour
Технологическая экспедиция
msdevtour.ru
Microsoft Developer Tour
Технологическая экспедиция
#msdevtour
Разработка
на TypeScript
Константин Кичинский
Эксперт по стратегическим технологиям, Microsoft
Веб-разработка
CSS
HTML
Давным-давно, когда
мерцающие заголовки
были в порядке вещей
JS
Веб-разработка
HTML
JS
Суровое настоящее
с веб-стандартами и
фреймфорками.
CSS
JavaScript не был рассчитан
на большие проекты.
Веб-разработка
HTML
CSS
HTML
Давным-давно, когда
мерцающие заголовки
были в порядке вещей
JS
JS
Суровое настоящее
с веб-стандартами и
фреймфорками.
CSS
Как масштабировать
разработку больших
приложений на JavaScript?
Попытки изобрести велосипед
CoffeeScript
Dart
GWT
Script#
ClosureScript
Emscripten
и даже qb.js!
https://github.com/jashkenas/coffeescript/wiki/List-of-languagesthat-compile-to-JS
http://xkcd.com/927/
Подмена задачи != решение
Что такое TypeScript?
TypeScript – это язык для разработки приложений на JavaScript.
Что такое TypeScript?
TypeScript – это язык для разработки приложений на JavaScript.
1. Код на JS – это код на TS
2. TS расширяет JS (в согласии с ES6+)
3. Код на TS прозрачно компилируется в JS-код
И… TypeScript – это проект с
открытым исходным кодом.
*fork me on github*
http://typescriptlang.org
Как работает TypeScript?
1. TypeScript – добавляет в JS статическую типизацию
И другие плюшки, обычно называемые синтаксическим сахаром
2. TypeScript компилируется в JavaScript
Как правило, при сохранении файлов.
3. Итоговый код работает везде, где работает JavaScript
Любой браузер, любая операционная система, любой сервер. И даже в IoT!
DEMO
TypeScript 101
Microsoft Developer Tour #MSDevTour
Как перейти на TypeScript?
Начните с JavaScript
Используйте свой существующий код и код библиотек.
Подключите .d.ts-файлы для популярных библиотек.
Опционально: типы, классы, модули
Начните прописывать типы для всех объектов
Определите классы, интерфейсы, разбейте на модули
Рефакторинг кода с учетом возможностей TS и ES6+
Сделайте код более элегантным, переложив часть задач на компилятор и возможности целевого
языка.
Инструменты
Visual Studio
Sublime Text
Eclipse
WebStorm
Emacs
VI
…
Библиотеки
DefinitellyTyped (200+ typings)
DOM
jQuery
WinRT
WinJS
…
Приложения
Windows (UAP)
Cordova
node.js
…
Кстати, команда AngularJS
переходит на TypeScript.
Сообщество
Как используется TypeScript?
Компилятор TypeScript
Открытый
Написан на TypeScript
Скомпилирован в JS
Интегрируется в инструменты
Работает из командной строки
DEMO
Компилятор TypeScript в браузере
Microsoft Developer Tour #MSDevTour
Почему это все так важно?
История Wix
WixStore
Новый командный проект
Тяжело работать, не влезая в чужой код
Переход к TypeScript
1. Один небольшой проект внутри большой системы
2. Успешное внедрение  перевод остальных проектов
http://blogs.msdn.com/b/typescript/archive/2015/03/17/guest-post-gil-amran-talksabout-using-typescript-at-wix.aspx
CoffeeScript и Dart – это языки, компилирующиеся в
JavaScript. К сожалению, сгенерированный код совсем не
похож на оригинальный код. Порой его тяжело
понимать, читать и отлаживать.
С другой стороны, TypeScript – это надмножество
JavaScript. TypeScript создает JavaScript-код, который
легко читать и отлаживать и почти такой же, как
оригинальный код на TS.
Gil Amran
Когда ты создаешь небольшое или среднее JS-приложение в одиночку
или вдвоем, это нормально обходиться без безопасности типов.
Но когда приложение растет, этот рост может привести к каше в
коде, которую очень трудно поддерживать и отлаживать.
Воспользоваться преимуществами типов значит,
что вы словите ошибки во время компиляции вместо
выполнения (чего может и не быть)… и я имею в виде
не просто строки или числа, а интерфейсы со
строгими определениями.
Gil Amran
Самая очевидная разница между кодом на TypeScript и
сгенерированным кодом в том, что типы исчезают –
они используются только на этапе компиляции.
Вы можете рассматривать это как еще один тест,
работающий во время сборки, чтобы проверить, что
все функции вызываются правильно.
Мы в шутку зовем его WarningScript. :-)
Gil Amran
История Babylon.js
OpenSource-библиотека для работы с WebGL
В среднем 1 версия в месяц
25 участников проекта
30+ релизов
500+ коммитов
14000+ строчек кода
120+ файлов кода
250+ форков
http://babylonjs.com
История Babylon.js
OpenSource-библиотека для работы с WebGL
Сложный проект, рассчитанный на внешнюю аудиторию
1. Сделать прозрачно для JavaScript-разработчиков
2. Сделать понятно для разработчиков на C#, Java и т.п.
Повысить надежность кода, но сохранить возможность вносить правки на чистом
JavaScript.
http://blogs.msdn.com/b/eternalcoding/archive/2014/04/28/why-we-decided-tomove-from-plain-javascript-to-typescript-for-babylon-js.aspx
[для командного проекта на JS] интеграция пуллзапросов – сложная задача, потому что вы должны
гарантировать, что код, который вы не создавали и не
контролируете, ничего не нарушит. С TypeScript это
становится проще благодаря статичной компиляции.
David Catuhe
История NativeScript (Telerik)
OpenSource – фреймворк для кросс-платформенных приложений
Ядро фреймворка и CLI написаны на TypeScript
Необходимо надежное описание для компиляции в нативный код
Веб слишком быстро меняется, никто не хочет учить то, что завтра исчезнет.
Дать подсказки по API разработчикам
http://developer.telerik.com/featured/the-rise-of-typescript/
Так как TypeScript – это надмножество JavaScript, то вы
можете просто переименовать ваши существующие .jsфайлы в .ts-файлы, обычно, они сразу работают.
Веб-разработчикам знакома такая практика: CSSпрепроцессоры, используемые сегодня многими из нас
(к примеру, SASS и LESS), работают точно также.
TJ VanToll
TypeScript последовательно следует приверженности
свежим возможностям ECMAScript, что дает
дополнительную уверенность JavaScript-разработчикам,
беспокоящихся об использовании языка, который
может увести их от стандарта.
TJ VanToll
Дополнение кода особенно полезно в незнакомых вам
библиотеках. В NativeScript, к примеру, мы
предоставляем доступ ко всем API iOS и Android через
JavaScript.
Это круто, но проблема в том, что я не разработчик под
Android или iOS, поэтому я понятия не имею, какие API
существуют. NativeScript использует файлы декларации
TypeScript, использование которых сильно облегчает
мою жизнь.
TJ VanToll
И еще один пример про
архитектуру…
Мне захотелось сделать доброе и светлое…
Декларация типов/интерфейсов для одной популярной
библиотеки.
Внутренний код на JavaScript, к которому нет доступа
Внешняя документация, сделанная через jsDocs
Интерфейсы для работы с событиями
IEventManager
{IEventManager} add(types, callback[, context[, priority]])
 callback: Функция-обработчик события. В качестве параметра в функцию передается объект,
описывающий событие. Может быть либо произвольным объектом, либо реализовывать
интерфейс IEvent.
{IEventManager} remove(types, callback[, context[, priority]])
 callback: Функция-обработчик события. В качестве параметра в функцию передается объект
события IEvent.
{IEventManager} fire(type[, event])
…
Интерфейсы для работы с событиями
IEventManager
export interface IEventManager extends IEventTrigger {
add(types: string | string[],
callback: (event: IEvent|Object) => void,
context?: Object,
priority?: number): IEventManager;
remove(types: string | string[], callback: (event: IEvent|Object) => void, context?:
Object, priority?: number): IEventManager;
fire(type: string, eventObject?: IEvent|Object):IEventManager;
…
}
Интерфейсы для работы с событиями
IEventManager
export interface IEventManager extends IEventTrigger {
add(types: string | string[],
callback: (event: IEvent|Object) => void,
context?: Object,
priority?: number): IEventManager;
remove(types: string | string[], callback: (event: IEvent|Object) => void, context?:
Object, priority?: number): IEventManager;
fire(type: string, eventObject?: IEvent|Object):IEventManager;
…
}
Интерфейсы для работы с событиями
IEventManager
add(types, callback[, context[, priority]])
remove(types, callback[, context[, priority]])
fire(type[, event])
…
IEventEmitter
IEventManager events
IPopup extends IEventEmitter, …
События: close, open
Интерфейсы для работы с событиями
IEventManager
add(types, callback[, context[, priority]])
remove(types, callback[, context[, priority]])
fire(type[, event])
…
IEventEmitter
IEventManager events
IPopup extends IEventEmitter, …
События: close, open
Специализация сигнатур
interface Document {
createElement(tagName: "div"): HTMLDivElement;
createElement(tagName: "span"): HTMLSpanElement;
createElement(tagName: "canvas"): HTMLCanvasElement;
createElement(tagName: string): HTMLElement;
}
Специализация сигнатур
export interface IPopupEventManager extends IEventManager {
add(types: “open”, callback: (event: IEvent|Object) => void, context?: Object,
priority?: number): IPopupEventManager ;
add(types: “close”, callback: (event: IEvent|Object) => void, context?: Object,
priority?: number): IPopupEventManager ;
add(types: string, callback: (event: IEvent|Object) => void, context?: Object,
priority?: number): IPopupEventManager ;
add(types: string[], callback: (event: IEvent|Object) => void, context?: Object,
priority?: number): IPopupEventManager ;
…
}
Обновление наследования…
export interface IEventEmitter {
events: IEventManager;
}
IPopup extends IEventEmitter { … }

export interface IPopupEventEmitter {
events: IPopupEventManager;
}
IPopup extends IPopupEventEmitter { … }
Обобщенные типы
export interface IEventEmitter {
events: IEventManager;
}
IPopup extends IEventEmitter { … }

export interface IEventEmitter<T> {
events: T;
}
IPopup extends IEventEmitter<IPopupEventManager> { … }
Типизация толкает вас
переосмыслить
предсказуемость вашего
кода.
Roadmap
PREVIEW!
TypeScript
Легко начать
Куча инструментов
Более безопасный и надежный код
http://typescriptlang.org
https://github.com/Microsoft/TypeScript
Разработка на TypeScript
Константин Кичинский
Эксперт по стратегическим технологиям, Microsoft
@kichinsky, [email protected]
©2015 Microsoft Corporation. All rights reserved. Microsoft, Windows, Office, Azure, System Center, Dynamics and other product names are or may be registered trademarks and/or
trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this
presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee
the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN
THIS PRESENTATION.