TypeScript – светлое будущее ES6 уже вчера. Почему не "Кофе"? Чай полезней. Что не так с Flow от Facebook? Реальная практика использования: плюсы и минусы. Не VisualStudio единым. Особенности работы в других IDE. Интеграция с уже существующим JS кодом. Использование совместно с RequireJS. Подводные камни. Использование TypeScript совместно с React. TypeScript и Angular. Плюшки, которых нет в ES6/7 (пока нет): [static] enum, интерфейсы, private, protected, декораторы... Что дают и зачем?

1. TypeScript
особенности разработки

2. Эволюция JS

3. JS compilers
Список всевозможных трансляторов и диалектов:
goo.gl/EAabNP (340+)
— CoffeeScript family: 12
— CoffeeScript friends (philosophically related): 25
— Static typing: 16 (TypeScript, Dart, Typecast.js, AtScript, ...)
— X-language compilers: Java, Ruby, Python, PHP, Erlang, Perl, Lua, Scala,
C#, F#, Lisp, Scheme, OCaml, Haskell, Smalltalk, C/C++, Go, ...
3

5. Достоинства CoffeeScript
— Классы
— Стрелочные функции, сохранение контекста (=>, ->)
— Безопасные сравнения === меньше ошибок
— Краткость
— ... и много чего другого
5

6. Почему не CoffeeScript?
— Это другой язык
— Краткость не всегда сестра таланта. Иногда брат Морзе
— Приходится уметь работать с 2мя языками
— Если вдруг прекратится поддержка, что делать?
— Есть проблемы с поиском разработчиков
6

7. TypeScript
Светлое будущее ES6+ уже вчера

8. Достоинства TypeScript
— TS - это и есть ES6+
— Режимы транспилирования: ES3, ES5, ES6
— Поддержка модулей: Commonjs, AMD
— Class, public, private, protected, static...
— Статическая типизация
— Дополнительно: Interface, Enum, tuple, ...
8

9. Мифы о TypeScript

10. Мифы о TypeScript
1. Это другой язык, как и CoffeeScript
2. Закрытый исходный код
3. Разрабатывать можно только в VisualStudio
4. Корректно работает только с Windows
5. Генерит лишний код
6. Медленный
10

11. Это другой язык, как и CoffeeScript
let say = (def:string):string => `TypeScript is ${def}!`;
say('pretty amazing')
11

12. Закрытый исходный код
Исходники по адресу:
https://github.com/Microsoft/TypeScript/
12

13. Разрабатывать можно только в Visual
Studio
IDE supports
— ★ WebStorm, PhpStorm, ...
— ☆ Sublime Text (2,3)
— Atom (atom.io)
— TypeEcs for Eclips (typecsdev.com)
— MS Visual Studi☺
13

14. Корректно работает только с Windows
npm install -g typescript
tsc my_application.ts
01.
02.
14

15. Генерит лишний код
var say = (def:string):string => `TypeScript is ${def}!`;
say('pretty amazing');
15

16. Генерит лишний код
var say = (def:string):string => `TypeScript is ${def}!`;
say('pretty amazing');
Результат:
var say = function (def) { return ("TypeScript is " + def + "!"); };
say('pretty amazing');
16

17. Тот же результат на CoffeeScript
(function() {
var say;
say = (function(_this) {
return function(def) {
return "TypeScript is " + def + "!";
};
})(this);
say('pretty amazing');
}).call(this);
17

18. var gvstr;
var _this = this; // Babel делает так же
var say = function (def) {
return _this.gvstr = "T..." + def + "!"
};
say('pretty amazing');
(function() {
var say;
say = (function(_this) {
return function(def) {
return "T..." + def + "!";
};
})(this);
say('pretty amazing');
}).call(this);
TypeScript vs CoffeeScript. Результат компиляции
18

19. Генерит лишний код
enum Color { Red, Green, Blue }
var color :Color = Color.Green;
19

20. Генерит лишний код
var Color;
(function (Color) {
Color[Color["Red"] = 0] = "Red";
Color[Color["Green"]= 1] = "Green";
Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));
var color = 1;
20

21. Генерит лишний код
const enum Color { Red, Green, Blue }
var color :Color = Color.Green;
Результат:
var c = 1;
21

22. Реальная практика
использования
TypeScript

23. Способы подключения
— FileWatchers in IDE
— TypeScript Compiler in IDE
— tsc, grunt, gulp, ...
23

24. TypeScript Compiler
File → Settings → Language & Frameworks → TypeScript → Enable TypeScript Compiler
24

25. Управляющие
комментарии

26. /// <reference path="file-name.d.ts" />
26

27. /// <amd-module name="myName" />
/// <amd-module name="lib/md5" />
function md5() { ... }
export = md5;
define("lib/md5", ["require", "exports"], function (require, exports) {
function md5() { ... }
return md5;
});
27

28. /// <amd-dependency path="dir/file" />
/// <amd-dependency path="lib/global" />
define(["require", "exports", "lib/global"], function (require, exports) { ... });
28

29. ///<amd-dependency path="file" name="var"/>
/// <amd-dependency path="legacy/base/view" name="View" />
View.someDo();
define(["require", "exports", "legacy/base/view"],
function (require, exports, View) {
View.someDo();
}
);
29

30. <amd-dependency path="..." name="..." />
/// <reference path="legacy/base/view.d.ts" />
/// <amd-dependency path="legacy/base/view" name="View" />
Эквивалентно записи:
/// <reference path="legacy/base/view.d.ts" />
import View = require("legacy/base/view");
30

31. /// <reference no-default-lib="true" />
0_o
31

32. Подключение
существующего
legacy кода

33. Пример подключения *.js в *.ts
— newApp.ts
— lib/crypt.js
33

34. lib/crypt.js
define(function () {
function md5() { /* ... */ }
function uid() { /* ... */ }
return {
md5: md5,
uid: uid
}
});
34

35. newApp.ts
class AppController {
private _uid: string;
constructor() { ... }
setUid(): string {
return this._uid = crypt.uid(); // crypt в legacy
}
init(): void { ... }
run(): void { ... }
static exec(ctrl: AppController): void { ... }
}
export = AppController;
35

36. newApp.ts
/// <amd-dependency path="lib/crypt" />
class AppController {
setUid(): string {}
}
define(["require", "exports", "lib/crypt"], function (require, exports) {
var AppController = (function () {
function AppController() {}
AppController.prototype.setUid = function () { this._uid = crypt.uid() };
return AppController;
})();
return AppController;
});
36

37. newApp.ts
/// <amd-dependency path="lib/crypt" />
declare var require:any;
var crypt = require("lib/crypt");
class AppController { ... }
define(["require", "exports", "lib/crypt"], function (require, exports) {
var crypt = require("lib/crypt");
var AppController = (function () {
function AppController() {}
AppController.prototype.setUid = function () { this._uid = crypt.uid() };
return AppController;
})();
return AppController;
});
37

38. crypt.d.ts
declare module "lib/crypt" {
export function md5() :string;
export function uid() :string;
}
38

39. newApp.ts
/// <require path="lib/crypt.d.ts" />
import crypt = require("lib/crypt");
class AppController { ... }
define(["require", "exports", "lib/crypt"], function (require, exports, crypt) {
var AppController = (function () {
function AppController() {}
AppController.prototype.setUid = function () { this._uid = crypt.uid() };
return AppController;
})();
return AppController;
});
39

40. TypeScript
+
React

41. TypeScript ничего не знает про JSX
render: function() {
return <div className="train">
<div className="title">{this.state.title}</div>
</div>
}
41

42. TypeScript умеет жить с React
render: function() {
return React.jsx(
"<div className="train">
<div className="title">{this.state.title}</div>
</div>"
)
}
42

44. React Templates
— npm install react-templates -g
— npm install grunt-react-templates --save-dev
— WebStorm plugin: http://plugins.jetbrains.com/plugin/7648
Документация: wix.github.io/react-templates
44

45. Пример работы TS c RT(JSX)
Структура компонента
.../page/train/seats/carMap/carMap/
— carMapItem
— carMapItem.rt
— carMapItem.rt.js
— carMapItem.js / carMapItem.ts
— modelFactory.ts
45

46. carMapItem.rt
<rt-require dependency="bemp/blocks/popup/component" as="Popup"/>
<rt-require dependency="bemp/blocks/train/seats/carMap/legend/component" as="Legend"/>
<div class="car_wrapper">
<Ereg isAvailable={this.props...} schemeHeight={this...} className="...">
</Ereg>{this.props.children}<div class="..." rt-if="...">
<Popup
innerHtml={this.props.errorMessage}
active="{!this.state.popupHiddenByClick}"
onClose={this.onPopupClosed}></Popup>
</div>
<Legend rt-if="this.props.showLegend" className="..."/>
</div>
46

47. carMapItem.rt.js
define([
'react/addons', 'lodash', 'bemp/blocks/popup/component', ...
], function (React, _, Popup, ...) {
'use strict';
return function () {
return React.createElement('div', {...}, React.createElement(Ereg, {
'isAvailable': this.props.isEregAvailable, ...
}),
this.props.errorMessage
? React.createElement('div', {...}, React.createElement(Popup, {
'innerHtml': this.props.errorMessage,
'onClose': this.onPopupClosed
}))
: null,
...
};
});
47

48. carMapItem.js
define(['react', './carMapItem.rt', ...], function (React, template, ...) {
return React.createClass({
displayName: 'carMapItem',
getDefaultProps: function () {
return { ... }
},
checkErrorMessage: function (props) { ... },
getInitialState: function () {
return { ... }
},
onPopupClosed: function () {
this.setState({ ... })
},
render: template
});
});
48

49. carMapItem.ts
import React = require("react");
import template = require("./carMapItem.rt");
class carMapItem extends React.Component {
public displayName:string = 'carMapItem',
static defaultProps = {
...
onErrorShow: () => void 0
}
getInitialState() { return { ... } }
onPopupClosed() { this.setState({ ... }) }
render() { return template }
}
export = carMapItem;
49

50. TypeScript
или
Facebook Flow?

51. TypeScript
или
Babeljs?

52. TypeScript vs Babel
— TypeScript — это Babel + Flow
— Babel — это TypeScript без проверки типов
52

53. Выбираем Flow если ...
— ... хочется JSX
— ... хочется Babel JS, но не хочется MS TS
53

54. Что нравится в Flow
— Режимы типизации
— Проверка типов без указания
— Возможность явно указать типы как в TypeScript
— Нативная поддержка JSX
54

55. Что не нравится в Flow
— Официально поддерживаются платформы: Mac, Linux, Windows
— Распространяется в виде бинарника
— Нет (не было) хорошей поддержки в IDE
55

56. Почему
нам
нравится
TypeScript

57. Почему нам нравится TypeScript
— Пишем на ES6+
— Типизация защищает от опечаток и ошибок
— Возможность описывать интерфейсы
— Инструменты для реализации ООП
— Бекендеры понимают наш код!
— Возможность управлять AMD
— Активное развитие и поддержка от MS. Уже доступен TS 1.5 beta
57

58. TypeScript обрастает инструментами
— Definition manager http://definitelytyped.org/tsd/
— Doc generator http://typedoc.io/
— Различные плагины для IDE, grunt, gulp, ...
58

59. TypeScript завтра
— ES6 module support, decorators, computed properties, for..of
— AMD-dependency optional names
— Настройка поведением через конфиг tsconfig.json
— Angular 2.0
59

60. Вопросы?

61. TypeScript
Особенности разработки
Александр Майоров, Tutu.ru
— mayorov@tutu.ru
— majorov.su
Презентация: frontendconf.majorov.su
61