Фишки и прелести TypeScript

TypeScript
Это не больно, даже прикольно
1
Александр Майоров
Tutu.ru

 twitter, github: @frontdevops
 alexander@majorov.su
 mayorov@tutu.ru
Developer advocate & technical evangelist in
Tutu.ru
2

276сотрудников
500 тыс.посетителей в день
2003 г.год основания
Мы продаем туры, ж/д и авиабилеты, билеты на автобусы,
бронируем отели, рассказываем о расписании.
15 млнпосетителей в месяц
Самый посещаемый сервис туристических услуг в России
(по результатам исследования comScore).
3

Опасения при выборе TypeScript
5

 Можно писать только ООП код (нет)
6

 Обязательно использовать типы
7

 Другой язык (holy war)
8

 Плохая поддержка в IDE (bullshit)
9

 Нужно все переписывать в TS с JS (no)
10

 Нужно все переписывать в TS с JS (no)
 Babel умеет больше, развивается быстрее. А для
типов есть Flow (holy war)
11

Факты про TypeScript
12

 TS – это JavaScript
13

14
class A {
static buz = 'Some buz';
}
class B extends A {
constructor(foo, bar) {
super();
this.foo = foo;
this.bar = bar;
}
getFooWithBar(){
return [ this.foo , this.bar ]
}
}

 Текущая версия 2.0.10 и уже готов RC 2.1 (!)
15
( Angular тоже 2 – совпадение?  )

 Текущая версия 2.0.10 и уже готов RC 2.1
 Строгая типизация опциональна
16

 Развитые инструменты для работы в ООП стиле
17

 Режимы (таргеты) транспилирования: ES3, ES5,
ES2015…
18

 Режимы транспилирования: ES3, ES5, …
 Поддержка разных модульных систем (ES modules,
Commonjs, AMD, …)
19

 Поддержка разных модульных систем
 Делается MS, но код открыт и он на Github
20

 Делается MS, но код открыт, он на Github
 TS – это диалект JS (лолшто, а как же пункт 1 ?)
21

 TS – это диалект JS
22
const enum Flag { A = 1, B, C }
interface IA { buz :Flag }
abstract class A<T extends Object> implements IA {
static protected readonly buz :Flag|string = Flag.B;
}
export default class B<T> extends A<T> {
constructor(public foo :T|null, public bar :T|null){
super();
let num :number = parseInt(foo as string);
}
getFooWithBar(...a :Array<T>) :T[] {
return [ this.foo , this.bar, ...a ]
}
}

 Текущая версия 2.0.3
 Строгая статическая типизация опциональна
 Режимы транспилирования: ES3, ES5, ES6, …
 Делается MS, но код открыт, он на Github
 TS – это диалект JS
 На TS можно писать в ФП стиле
23

Почему стоит писать на TS при работе с Angular2
24
?
НЛО прилетело и удалило слайд, пыщь пыщь

25
• П  ТОМУ, что гладиолус…

Почему стоит писать на TS вообще?
26

Почему стоит писать на TS вообще
27
 Отлов некоторых ошибок уже на стадии компиляции

28
 Удобно рефакторить, легче отыскивать breaking changes

29
 Самодокументируемый код (интерфейсы и не только)

30
 Самодокументируемый код, контракты через интерфейсы
 Gradual typings: не требуется указывать типы, но всегда
можно добавить

31
 Удобно рефакторить
 Хорошая навигация по коду и поддержка в IDE

32
 Удобно рефакторить
 Хорошая навигация по коду и поддержка в IDE
 Если вы поклонник ООП – есть все инструменты для ООП
• Бэкендеры PHP, C#, Java, etc … могут понять ваш код и даже
дописать что-то
• Он умеет даже React (JSX ⇾ TSX), но это уже другая тема…

Почему стоит писать на TS при работе с Angular2 ?
33

34
• Потому, что разработчики Angular2 советуют

35
• Все примеры в документации на TS

36
• Синтаксис декораторов расширен!

37
• Синтаксис декораторов расширен
• Сам Angular2 написан на TS!

Сложности при работе с TS?
38

39
Есть…

40
Они все решаемы!

41
• Многословен

42
• Бывают сложности с составными типами и генериками

43
• Интерфейсы становятся бесполезными, если их не
поддерживать

44
• Бывают сложности со сторонними JS пакетами

45
• Не все фичи ES.Next транспилируются в ES5 (в
версии 2.0 …)

tsc -t ES2015 ⇾ Babel = Double compile
46

47
• Были сложности с импортом интерфейсов
(дублирование)

48
• Были сложности с импортом интерфейсов
(дублирование)
• Могут появиться новые… Но они все решаются!

@декораторы
49
Аннотации и вот это вот всё…

Hello world Angular2
50
import { Component } from '@angular/core';
@Component({ // магия детектед
selector: 'my-app',
template: '<h1>My First {{title}}</h1>'
})
export class AppComponent {
title :string = 'Angular App';
// где логика? Почему класс пустой?
}

ES DECOR@TOR
51
Принимает
 target
 key
 descriptor | index
Может возвращать
 function Decorator (target, name, [descriptor|index] )
 descriptor
 void

@ ИСПОЛЬЗУЕТСЯ ДЛЯ
52
 Декорирования
 Аннотирования

МОЖНО @
53
 Классы @decorate class A {}
 Методы class A { @decorate foo(){} }
 Свойства class A { @decorate foo = 1; }
 Accessors class A { @dcrt get foo(){ … }}
 Аргументы* class A { foo(@annotate a){} }

ДЕКОРАТОР КЛАССА
54
 target - конструктор класса
 return - новый конструктор или ничего
declare type ClassDecorator = <T extends Function>(target
:T) => T| void;

ДЕКОРАТОР КЛАССА
55
// пример
@Component
class MyComponent {
public template :string = '<h1>Hello, people!</h1>';
}
function Component(target) {
let metadata = { style: "...", selector: "main-app" };
Reflect.defineMetadata('annotations', [ metadata ], target);
}

ДЕКОРАТОР МЕТОДА
56
declare type MethodDecorator =
<T>(
target :Object,
propertyKey :string | symbol,
descriptor :TypedPropertyDescriptor<T>
) => TypedPropertyDescriptor<T> | void;

57
function methodDecorator(target, propertyKey, descriptor) {
return descriptor;
}
Простым ES языком
 target - ссылка на prototype класса
 key - имя метода
 descriptor = Object.getOwnPropertyDescriptor
 return - ничего или дескриптор

58
// пример
@Component({…})
class MyComponent {
@HostBinding('window:scroll') onScroll(event){
... }
}

ДЕКОРАТОР МЕТОДА ДОСТУПА (ACCESSORS)
59
Аналогично методу. Следует применять к первому методу
доступа (get или set), в порядке объявления.
class Line {
private _start :Point;
@strictType set start(v :Point) { this._start = v }
get start() { return this._start }
}

ДЕКОРАТОР СВОЙСТВА
60
declare type PropertyDecorator =
(target :Object, property :string|symbol) =>
void;
// ES реализация вышеописанного заклинания
function PropertyDecorator (target, property) { ... }
 target - ссылка на prototype класса
 key - имя свойства
 return – null или дескриптор свойства

ДЕКОРАТОР СВОЙСТВА
61
// пример
class TodoComponent {
@readonly readonly public foo :string;
@Input() bar;
@Output() getBar = new EventEmitter();
// …
}

ДЕКОРАТОР AННОТАТОР ПАРАМЕТРА
62
declare type ParameterDecorator =
(target :Object, key :string|symbol, index :number)
=> void;
• target - ссылка на prototype класса
• key - имя метода или undefined
• index - номер аргумента
• return - ничего

ДЕКОРАТОР AННОТАТОР ПАРАМЕТРА
63
// пример
import { Optional } from '@angular/core';
@Component({…})
export class InjectorComponent {
constructor( @Optional() private logger: Logger ) {
if (this.logger) this.logger.log(some_message);
}
}

DECORATOR FACTORY
64
function Factory(...params){
// do anything with params
return function Decorator(target :Object, key
:string|symbol, descriptor?) {
// decorate or annotate target
// or return descriptor
// or return void
}
}

ФАБРИЧНЫЙ ДЕКОРАТОР
65
import { Component } from '@angular/core';
@Component({ // магии нет
selector: 'my-app',
template: '<h1>My First {{title}}</h1>'
})
export class AppComponent {
protected title :string = 'Angular App';
}

ДЕКОРАТОРЫ В ANGULAR2
66
 @NgModule
 @Component
 @Directive
 @Pipe
 @Injectable
 @Input
 @Output
 …
 @HostBinding
 @HostListener
 @ContentChild
 @ContentChildren
 @ViewChild
 @ViewChildren
 @Optional
 …

А ЕЩЕ ДОБАВИТЬ CORE-DECORATORS.JS
67
 @readonly
 @nonconfigurable
 @nonenumerable
 @lazyInitialize
 @autobind
 @deprecate
 @suppressWarnings
 @enumerable
 @override
 @debounce
 @throttle
 @time
 @decorate
 @mixin
Библиотека готовых декораторов

БУДУЩЕЕ JAVASCRIPT 
68
@Component({ selector: 'myapp' })
@View({ template: 'mytemplate' })
@log @lorem @ipsum @dolor @sit @amet @consectetur
class SomeClass {
@readonly @deprecated @memoize @enumerable
@_if(User.login) @log
@merge( function mergedFunc(){...} )
action(@log @Inject() config, name) {
...
}
}

70
Refelect
 Reflect.apply()
 Reflect.construct()
 Reflect.defineProperty()
 Reflect.deleteProperty()
 Reflect.enumerate()
 Reflect.get()
 Reflect.getOwnPropertyDescriptor()
 Reflect.getPrototypeOf()
 Reflect.has()
 Reflect.isExtensible()
 Reflect.ownKeys()
 Reflect.preventExtensions()
 Reflect.set()
 Reflect.setPrototypeOf()

71
reflect-metadata
Polyfill for Metadata Reflection API. Proposal to add Decorators to ES.Next, along
with a prototype for an ES.Next Reflection API for Decorator Metadata
 Reflect.defineMetadata()
 Reflect.hasMetadata()
 Reflect.hasOwnMetadata()
 Reflect.getMetadata()
npm install --save reflect-metadata
 Reflect.getOwnMetadata()
 Reflect.getMetadataKeys()
 Reflect.getOwnMetadataKeys()
 Reflect.deleteMetadata()

72
Reflect Metadata API in TypeScript
tsconfig.json:
{
"compilerOptions": {
"target": "ES5",
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
}

73
Reflect Metadata API пример
class Point {constructor(
public x :number,
public y :number
){}}
class Line {
private _stop :Point;
set start(v :Point) { this._start = v }
set stop(v :Point) { this._stop = v }
get stop() { return this._stop }
}
let foo = new Line;
foo.start = new Point(1,1);
foo.stop = new Point(9,9);
// или
let bar = new Line;
bar.start = { x: 1, y: 1 };
bar.stop = { x: 1, y: 1 };

74
function strictType<T>(t :any, k :string, d :TypedPropertyDescriptor<T>) :never|void {
d.set = (value :T) :never|void => {
let type = Reflect.getMetadata("design:type", t, k);
if (!(value instanceof type))
throw new TypeError("Invalid type!");
}
}
Декоратор

75
class Point {constructor(
public x :number,
public y :number
){}}
class Line {
private _stop :Point;
@strictType set start(v :Point) {
this._start = v }
@strictType set stop(v :Point) { this._stop
= v }
get stop() { return this._stop }
let foo = new Line;
foo.start = new Point(1,1);
foo.stop = new Point(9,9);
// или
let bar = new Line;
bar.start = { x: 1, y: 1 }; // Throw
error (!)
bar.stop = { x: 1, y: 1 }; // Throw
error (!)

Ссылки по теме
76
https://goo.gl/dYFfrl

 twitter, github: @frontdevops
 medium: @frontman
 alexander@majorov.su
 mayorov@tutu.ru
Developer advocate & technical evangelist in
Tutu.ru
77
Спасибо! Вопросы?
https://goo.gl/dYFfrl

HOLY WAR
78
Как лучше писать аннотации типов?

79
Как лучше писать аннотации типов?
let Trump :{
foo
:string;
bar :any;
} = {
foo:
"abc";
bar: 123;
};
let Hillary: {
foo:
string;
bar:
any;
} = {
foo:
"abc";
bar:
123;
};
¯_(ツ)_/¯
let Truhilla : {
foo :
string;
bar :
any;
} = {
foo :
"abc";
bar :
123;
};

80
Голосование
Трамп или Хилари?

Фишки и прелести TypeScript

More Related Content

Similar to Фишки и прелести TypeScript (18)

Фишки и прелести TypeScript

Editor's Notes