Фишки и прелести typescript
Post on 14-Apr-2017
270 Views
Preview:
TRANSCRIPT
1
TypeScriptЭто не больно, даже прикольно
Александр МайоровTutu.ru
2
Александр Майоров
twitter, github: @frontdevops alexander@majorov.su mayorov@tutu.ru
Developer advocate & technical evangelist in Tutu.ru
3
276 сотрудников
500 тыс. посетителей в день
2003 г.год основания
Мы продаем туры, ж/д и авиабилеты, билеты на автобусы, бронируем отели, рассказываем о расписании.
15 млнпосетителей в месяц
Самый посещаемый сервис туристических услуг в России (по результатам исследования comScore).
4
TypeScript2.0
5
Опасения при выборе TypeScript
6
Опасения при выборе TypeScript
Можно писать только ООП код (нет)
7
Опасения при выборе TypeScript
Можно писать только ООП код (нет) Обязательно использовать типы
8
Опасения при выборе TypeScript
Можно писать только ООП код (нет) Обязательно использовать типы Другой язык (holy war)
9
Опасения при выборе TypeScript
Можно писать только ООП код (нет) Обязательно использовать типы Другой язык (holy war) Плохая поддержка в IDE (bullshit)
10
Опасения при выборе TypeScript
Можно писать только ООП код (нет) Обязательно использовать типы Другой язык (holy war) Плохая поддержка в IDE (bullshit) Нужно все переписывать в TS с JS (no)
11
Опасения при выборе TypeScript
Можно писать только ООП код (нет) Обязательно использовать типы Другой язык (holy war) Плохая поддержка в IDE (bullshit) Нужно все переписывать в TS с JS (no) Babel умеет больше, развивается быстрее. А для
типов есть Flow (holy war)
12
Факты про TypeScript
13
Факты про TypeScript TS – это JavaScript
14
Факты про TypeScript TS – это JavaScript
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 ] }}
15
Факты про TypeScript TS – это JavaScript Текущая версия 2.0.10 и уже готов RC 2.1 (!)
( Angular тоже 2 – совпадение? )
16
Факты про TypeScript TS – это JavaScript Текущая версия 2.0.10 и уже готов RC 2.1 Строгая типизация опциональна
17
Факты про TypeScript TS – это JavaScript Текущая версия 2.0.10 и уже готов RC 2.1 Строгая типизация опциональна Развитые инструменты для работы в ООП стиле
18
Факты про TypeScript TS – это JavaScript Текущая версия 2.0.10 и уже готов RC 2.1 Строгая типизация опциональна Развитые инструменты для работы в ООП стиле Режимы (таргеты) транспилирования: ES3, ES5,
ES2015…
19
Факты про TypeScript TS – это JavaScript Текущая версия 2.0.10 и уже готов RC 2.1 Строгая типизация опциональна Развитые инструменты для работы в ООП стиле Режимы транспилирования: ES3, ES5, … Поддержка разных модульных систем (ES modules,
Commonjs, AMD, …)
20
Факты про TypeScript TS – это JavaScript Текущая версия 2.0.10 и уже готов RC 2.1 Строгая типизация опциональна Развитые инструменты для работы в ООП стиле Режимы транспилирования: ES3, ES5, … Поддержка разных модульных систем Делается MS, но код открыт и он на Github
21
Факты про TypeScript TS – это JavaScript Текущая версия 2.0.10 и уже готов RC 2.1 Строгая типизация опциональна Развитые инструменты для работы в ООП стиле Режимы транспилирования: ES3, ES5, … Поддержка разных модульных систем Делается MS, но код открыт, он на Github TS – это диалект JS (лолшто, а как же пункт 1 ?)
22
Факты про TypeScript TS – это диалект JS
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 ] }}
23
Факты про TypeScript TS – это JavaScript Текущая версия 2.0.3 Строгая статическая типизация опциональна Развитые инструменты для работы в ООП стиле Режимы транспилирования: ES3, ES5, ES6, … Поддержка разных модульных систем Делается MS, но код открыт, он на Github TS – это диалект JS На TS можно писать в ФП стиле
Elm не нужен!
24
Почему стоит писать на TS при работе с Angular2
?НЛО прилетело и удалило слайд, пыщь пыщь
25
Почему стоит писать на TS при работе с Angular2
• П ТОМУ, что гладиолус…
26
Почему стоит писать на TS вообще?
27
Почему стоит писать на TS вообще Отлов некоторых ошибок уже на стадии компиляции
28
Почему стоит писать на TS вообще Отлов некоторых ошибок уже на стадии компиляции Удобно рефакторить, легче отыскивать breaking changes
29
Почему стоит писать на TS вообще Отлов некоторых ошибок уже на стадии компиляции Удобно рефакторить, легче отыскивать breaking changes Самодокументируемый код (интерфейсы и не только)
30
Почему стоит писать на TS вообще Отлов некоторых ошибок уже на стадии компиляции Удобно рефакторить, легче отыскивать breaking changes Самодокументируемый код, контракты через интерфейсы Gradual typings: не требуется указывать типы, но всегда
можно добавить
31
Почему стоит писать на TS вообще Отлов некоторых ошибок уже на стадии компиляции Удобно рефакторить Самодокументируемый код, контракты через интерфейсы Gradual typings: не требуется указывать типы, но всегда
можно добавить Хорошая навигация по коду и поддержка в IDE
32
Почему стоит писать на TS вообще Отлов некоторых ошибок уже на стадии компиляции Удобно рефакторить Самодокументируемый код, контракты через интерфейсы Gradual typings: не требуется указывать типы, но всегда
можно добавить Хорошая навигация по коду и поддержка в IDE Если вы поклонник ООП – есть все инструменты для ООП• Бэкендеры PHP, C#, Java, etc … могут понять ваш код и даже
дописать что-то• Он умеет даже React (JSX ⇾ TSX), но это уже другая тема…
33
Почему стоит писать на TS при работе с Angular2 ?
34
Почему стоит писать на TS при работе с Angular2
• Потому, что разработчики Angular2 советуют
35
Почему стоит писать на TS при работе с Angular2
• Потому, что разработчики Angular2 советуют• Все примеры в документации на TS
36
Почему стоит писать на TS при работе с Angular2
• Потому, что разработчики Angular2 советуют• Все примеры в документации на TS• Синтаксис декораторов расширен!
37
Почему стоит писать на TS при работе с Angular2
• Потому, что разработчики Angular2 советуют• Все примеры в документации на TS• Синтаксис декораторов расширен• Сам Angular2 написан на TS!
38
Сложности при работе с TS?
39
Сложности при работе с TS?
Есть…
40
Сложности при работе с TS?
Они все решаемы!
41
Сложности при работе с TS?• Многословен
42
Сложности при работе с TS?• Многословен• Бывают сложности с составными типами и
генериками
43
Сложности при работе с TS?• Многословен• Бывают сложности с составными типами и
генериками• Интерфейсы становятся бесполезными, если их
не поддерживать
44
Сложности при работе с TS?• Многословен• Бывают сложности с составными типами и
генериками• Интерфейсы становятся бесполезными, если их
не поддерживать• Бывают сложности со сторонними JS пакетами
45
Сложности при работе с TS?• Многословен• Бывают сложности с составными типами и
генериками• Интерфейсы становятся бесполезными, если их
не поддерживать• Бывают сложности со сторонними JS пакетами• Не все фичи ES.Next транспилируются в ES5 (в
версии 2.0 …)
46
tsc -t ES2015 ⇾ Babel = Double compile
TS 2.1 уже RC!
47
Сложности при работе с TS?• Многословен• Бывают сложности с составными типами и
генериками• Интерфейсы становятся бесполезными, если их
не поддерживать• Бывают сложности со сторонними JS пакетами• Не все фичи ES.Next транспилируются в ES5 (в
версии 2.0 …)• Были сложности с импортом интерфейсов
(дублирование)
48
Сложности при работе с TS?• Многословен• Бывают сложности с составными типами и
генериками• Интерфейсы становятся бесполезными, если их
не поддерживать• Бывают сложности со сторонними JS пакетами• Не все фичи ES.Next транспилируются в ES5 (в
версии 2.0 …)• Были сложности с импортом интерфейсов
(дублирование)• Могут появиться новые… Но они все решаются!
49
@декораторыАннотации и вот это вот всё…
50
Hello world Angular2
import { Component } from '@angular/core';
@Component({ // магия детектед selector: 'my-app', template: '<h1>My First {{title}}</h1>'})export class AppComponent { title :string = 'Angular App'; // где логика? Почему класс пустой?}
51
ES DECOR@TOR
Принимает 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
ДЕКОРАТОР КЛАССА// пример@Componentclass 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;
C#? Java? WTF?
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){ ... }
}
59
ДЕКОРАТОР МЕТОДА ДОСТУПА (ACCESSORS)
Аналогично методу. Следует применять к первому методу доступа (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(); // …}
62
ДЕКОРАТОР AННОТАТОР ПАРАМЕТРА
declare type ParameterDecorator = (target :Object, key :string|symbol, index :number) => void;• target - ссылка на prototype класса• key - имя метода или undefined• index - номер аргумента• return - ничего
63
ДЕКОРАТОР AННОТАТОР ПАРАМЕТРА
// примерimport { Optional } from '@angular/core';@Component({…})export class InjectorComponent {
constructor( @Optional() private logger: Logger ) {
if (this.logger) this.logger.log(some_message); }}
64
DECORATOR FACTORYfunction 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';}
66
ДЕКОРАТОРЫ В ANGULAR2
@NgModule @Component @Directive @Pipe @Injectable @Input @Output …
@HostBinding @HostListener @ContentChild @ContentChildren @ViewChild @ViewChildren @Optional …
67
А ЕЩЕ ДОБАВИТЬ CORE-DECORATORS.JS
@readonly @nonconfigurable @nonenumerable @lazyInitialize @autobind @deprecate @suppressWarnings
@enumerable @override @debounce @throttle @time @decorate @mixin
Библиотека готовых декораторов
68
БУДУЩЕЕ JAVASCRIPT @Component({ selector: 'myapp' })@View({ template: 'mytemplate' })@log @lorem @ipsum @dolor @sit @amet @consecteturclass SomeClass { @readonly @deprecated @memoize @enumerable @_if(User.login) @log @merge( function mergedFunc(){...} ) action(@log @Inject() config, name) { ... }}
69
REFLECT METADATA API
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-metadataPolyfill 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 _start :Point; private _stop :Point;
set start(v :Point) { this._start = v } get start() { return this._start }
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
Reflect Metadata API пример
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
Reflect Metadata API примерclass Point {constructor( public x :number, public y :number){}}
class Line { private _start :Point; private _stop :Point;
@strictType set start(v :Point) { this._start = v } get start() { return this._start }
@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
77
Александр Майоров
twitter, github: @frontdevops medium: @frontman alexander@majorov.su mayorov@tutu.ru
Developer advocate & technical evangelist in Tutu.ru
Спасибо! Вопросы?
https://goo.gl/dYFfrl
78
HOLY WARКак лучше писать аннотации типов?
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
ГолосованиеТрамп или Хилари?
top related