►
From YouTube: TypeScript Decorators by Wekoslav Stefanovski - BLbit UG
Description
This event is hosted by BLbit UG - https://www.meetup.com/blbitug/
Meetup link: https://www.meetup.com/blbitug/events/277832875/
Join us next Wednesday for a new meetup, dedicated to TypeScript language. The meetup will be in English. Our friend Wekoslav Stefanovski talks about TypeScript Decorators. During the event, we will be giving away 2 licenses from our sponsor, JetBrains.
TypeScript Decorators
Description:
One of JavaScript's stronger sides always was the ability to modify itself at runtime, but this was coupled with very weak runtime code information - so we had to work somewhat in the dark. Decorators are a feature that enables us to inject and use cross-cutting concerns. This talk will inspect how this is implemented in the current TypeScript version, and how we can leverage it to our benefit.
Wekoslav Stefanovski
Wekoslav has over a decade of professional developer experience using a variety of development technologies. Has been using JavaScript since before the turn of the century and has a long and fruitful love/hate relationship with it. Currently, works at Sourcico as Head of development. He is passionate about functional programming, static code analysis, compiler design and code quality metrics.
A
Okay,
we're
here
so
hello.
Everyone
thanks
for
joining
us
on
this
meeting.
Today's
meeting
today
we
have
our
friend
vexel
stefanowski
from
skopje
macedonia
here
we'll
be
talking
about
decorators
in
typescript,
deep
dive,
and
we
would
also
like
to
thank
our
sponsors
to
thank
dotnet
foundation
for
enabling
us
to
have
this
dream
and
also,
of
course,
to
jetbrains
for
giving
away
two
subscriptions
to
early
yearly
subscriptions
for
their
tools.
A
So
the
first
two
relevant
comments,
we'll
get
jetbrain
subscriptions,
so
the
first
two
people
with
relevant
comments.
So
please
try
to
ask
questions
on
youtube,
chat
and
we'll
yeah.
We
will
ask
questions
to
to
reply
to
them
so
yeah
without
further
ado.
Thank
you
all
for
joining
us
and
wax
love.
Please
take
the
stage.
A
B
B
So,
first
of
all,
let
me
introduce
myself.
My
name
is
vekoslav
stefanowski.
I
work
as
a
head
of
development
in
source,
macedonia.
That's
a
developer
position.
So
to
say
I've
been
coding
professionally
since
the
previous
millennium,
so
I
have
quite
a
bit
of
experience
under
my
belt.
Mostly
it's
been
microsoft.
Technologies.
B
B
B
It
would
have
said
it's
complicated,
but
on
the
other
hand,
with
typescript
it
was
love
at
first
sight.
Immediately
after
I
saw
the
initial
presentation
in
2012,
I
think
I
decided
to
force
it
so
to
say
into
production
a
bit
sneaky
and
I've
been
teaching
and
evangelizing
about
typescript
ever
since,
and
I
still
think
it's
a
great
addition
to
the
javascript
ecosystem
and
I
especially
love
that
a
lot
of
the
great
ideas
that
appeared
in
typescript
first
ran
out
are
basically
used
all
over
javascript.
B
Some
of
the
proposed
features
that
were
proposed
only
in
typescript
now
are
regular,
javascript,
syntax
and
that's
a
cool
thing
because
with
typescript
we
are
allowed
to
experiment.
We
are
allowed
to
try
out
features
which
may
may
may
be
relevant
may
not
be
relevant.
Maybe
the
community
will
love
them.
Maybe
it
will
hate
them,
but
whatever
is
good.
We
can
always
put
it
in
javascript
as
well,
and
of
course
it
has
types,
that's
a
good
thing
yeah
and
I'm
quite
lazy,
and
I
love
development,
as
I
said
so,
there
won't
be
too
many
slides.
B
I
will
explain
conceptually
what
are
the
decorators
and
what
why
they
are
useful,
actually
and,
of
course,
we'll
delve
deep
into
how
they
are
actually
implemented
in
typescript
and
how
we
can
make
our
own
decorators.
So
we're
not
just
gonna
use
decorators.
We're
gonna
make
decorators
as
well
and,
to
be
honest,
that's
quite
easy
in
typescript.
B
So,
let's
see,
as
you
know,
javascript
is
very
dynamic
language.
It's
extremely
dynamic,
it
doesn't
have,
it
does
have
types,
but
it
does
not
have
types
on
the
variables
themselves.
It
has
types
only
on
the
values,
and
that
is
something
that
usually
we
don't
need,
for
example,
in
javascript
we
can
do
let's
create.
B
B
B
We
have
no
way
to
determine
whether
this
will
succeed
or
fail.
Of
course,
we
can
do
a
bit
of
type
of
and
this
and
that
and
check
the
function,
and
we
will
need
to
write
a
lot
of
code
to
see
whether
this
will
actually
work.
I
have
no
idea
at
the
moment
where
this
will
actually
work.
We
can
try
it
in
a
browser
and
it
will
work
about
one
third
of
the
time,
but
there
is
the
way
to
determine
that.
B
B
It
does
not
tell
you
what
it's
doing
and
how
it's
doing
it.
You
can
always
the
easiest
way,
often
in
javascript.
The
easiest
way
to
see
if
something
is
valid
is
basically
to
try
to
do
it
and
let
it
explode.
If
it's
not
valid,
and
here
javascript
nature
works
against
us,
because
a
lot
of
the
time
things
will
succeed,
they
will
only
return
undefined.
So
we
will
need
to
write
a
lot
of
code,
make
a
lot
of
checks
on
one
hand
or
the
other
hand.
B
There
is
some
kind
of
a
proposal
about
the
reflect
api
and
the
metadata
api
and
that
part
is
still
in
the
proposal
stage
for
javascript,
so
it's
not
supported
in
any
browser
and
it's
not
supported
in
node.js,
except
if
we
include
it
as
a
package.
There
is
a
reflect
metadata
package
that
if
we
can
include
it,
we
will
get
this.
B
Added
behavior
of
javascript,
I
actually
have
included
that
package
here.
I
have
that
and
also
I
have
included
two
flags
in
my
ts,
config.json
file
that
enables
me,
when
I'm
working
with
typescript,
to
have
support
for
two
features
that
I
will
need.
First
of
all,
first,
the
first
is
the
experimental
decorators.
This
enables
support
for
decorators.
B
If
this
is
false,
decorators
will
simply
not
work.
We'll
explain
what
decorators
are
later
a
bit,
and
this
is
needed
if
we
want
to
work
with
reflect
metadata
in
within
decorators,
and
this
is
crucial
for
two
of
the
decorator
types.
So
in
essence,
if
you
are
working
with
decorators,
for
example,
if
you
are
using
angular
angular
will
not
even
allow
you
to
turn
this
off.
B
B
So
that
means
that
we
have
some
code.
For
example,
logging
in
the
application
logging
is
an
extremely
important
part
of
our
any
application.
We
need
all
those
logs.
We
need
all
that
data
to
be
able
to
analyze
what
happened,
how
it
happens,
but
the
application
itself.
The
functionality
of
the
application,
is
unchanged
by
the
logging.
B
So
that
is
behavior
that
we
need
to
add
to
our
code
so
that
our
code
actually
makes
sense
in
the
larger
system
in
the
whole
application,
and
we
need
to
manipulate
that
code
and
we
need
to
do
it
in
a
sane
way.
So,
let's
see
why
why
it
is
the
case
if
we
have
some
kind
of
undecorated
world
and
we
have
a
lot
of
cutting
concern
cross-cutting
concerns.
So
I've
created
a
simple
typescript
class,
nothing
special
about
it.
We
have
a
value
that
is
an
inner
balance.
B
Yeah,
so
let's
go
over
the
class,
it's
a
simple
account
balance
class.
It
has
a
private
property,
two
properties,
two
access
or
methods
the
taxes
the
getting
set.
We
have
a
constructor,
we
have
two
public
methods,
one
shows
the
balance
and
one
changes
the
balance
in
some
way.
So
if
the
direction
is
up,
then
we
add
it.
If
the
direction
is
down,
then
we
remove
it.
This
is
simple
code
right,
it's
only
five
lines
and
any
developer
should
be
able
to
read
this
code
and
understand
what
it
does,
maybe
even
make
it
better.
B
We
need
to
add
some
kind
of
an
audit
trail
that
will
enable
us
to
see
when
and
how
this
is
happening.
So
we
will
need
to
add
a
call
to
our,
so
we
will
develop
a
audit
method
somewhere
outside
and
now
we
will
call
it.
So
we
are
not
developing
the
audi.
We
are
not
writing
the
auditing
code
in
place.
We
are
just
calling
to
an
external
audit.
B
B
A
B
Okay,
let's
run
it
again,
and
now
we
have
auditing
great
this
works,
but
of
course,
after
that
the
manager
says
well,
there
is
a
slight
problem
with
this.
Anybody
just
about
anybody
can
call
this
method
and
we
need
to
register
to
see
if
they
are
authorized
well.
We
need
to
add
them.
If
is
authorized.
B
B
B
B
B
And
now,
once
more,
none
of
these
issues
that
we
added
the
auditing
the
performance,
monitoring
the
authorization
validation
of
parameters,
none
of
it
actually
changes
the
logic
of
our
method.
We
still
have
our
five
line
methods
somewhere
around
here,
but
now
it
used
to
be
a
five
line
method.
Now
it's
a
20
lines
monstrosity
and
now,
when
you
need
to
change
something
inside
of
this,
you
say
holy
hell.
B
B
Develop
none
of
these
methods.
How
did
star
duration
without
race
is
amount,
valid,
stop
duration.
All
of
them
are
already
made
for
us
somewhere
and
we
are
just
using
them,
but
we
needed
to
add
them
to
our
code,
and
we
will
also
need
to
add
them
to
our
other
methods
and
our
other
calls
just
in
order
to
address
those
issues
that
are
again
not
relevant
to
the
not
really
relevant
to
the
user.
They
are
not
relevant
to
the
code
to
the
business
logic
of
this
method,
which
is
if
it
goes
up
added.
B
B
They
are
valid
for
the
application,
but
now
they
are
not
entirely
of
interest
of
the
specific
piece
of
code.
So
what
we
want
to
do
what
we
can
do?
What
we
should
do
is
somehow
move
all
of
this
and
all
of
this
somewhere
else
somewhere,
where
it
won't
bother
us
and
that's
why
decorators
are
needed
this
way.
If
we
are
doing
decoration
what
we
can
do,
we
can
somehow
make
this
external.
B
B
B
B
B
So
what
we
did
was
create
a
quick
and
dirty
decoration,
so
we
actually
decorated
augmented
this
function
in
some
way,
so
that
it
can
do
something,
and
we
can
do
this-
the
same
thing
not
without
it,
but
with
all
of
this
method.
So,
instead
of
having
all
of
this,
our
method
will
still
be
just
the
simple
easy
code,
but
will
be
able
to
do
all
of
the
things
that
it
was
doing
before
this.
B
So
this
is
the
fully
undecorated
version
of
the
method,
and
this
is
what
it
will
do.
It
will
write
out
a
whole
batch
of
text.
It
will
validate
everything
it
will
run
through
all
of
the
code
and
it
will
do
the
job
that
it's
supposed
to
do,
but
that
joke
is
hard
to
extract.
So
what
we
want
to
do.
We
want
to
create
some
kind
of
decorators,
some
kind
of
things
that
we
will
be
able
to
easily
add
and
easily
remove
from
the
method
it
that
won't
change
the
code
of
the
method
itself.
B
B
So
what
can
they
be
used
for,
so
that
data
that
is
not
significant
to
the
code
itself,
but
is
significant
to
the
application
or
to
the
system?
They
can
be
often
used
as
some
kind
of
markers
for
serialization
for
similar
things
for
being
a
component
for
being
an
injectable,
and
things
like
that
and
in
typescript.
B
B
So
those
are
the
active
decorators
when
we
are
actually
changing
and
working
with
code.
On
the
other
hand,
we
can
have
property
decorators
on
this
or
parameter
decorators.
On
this.
Those
are
so-called
passive
decorators
because
they
can
only
add
information.
They
cannot
only
give
us
some
kind
of
let's
say.
B
A
nice
thing
that
we
can
do
with
decorators
that
I've
seen
done
is
memorization
and,
of
course,
if
you
have
used
or
looked
at
angular
in
the
past
few
years-
and
I
think
most
of
you
have
angular
uses,
all
kinds
of
decorators
for
almost
everything
so
component
is
a
decorator
service.
Is
a
decorator
input,
is
a
decorator
output,
is
a
decorator
and
all
of
those
work
together
to
create
a
single
application.
B
So
let's
look
at
a
component
decorator,
because
if
you
have
a
typescript
class,
that
typescript
class
by
itself
does
not
care
about
what
you
are
doing
with
the
code.
There
is
just
a
piece
of
typescript
code,
but
even
you
set
the
decorator.
It
manages
some
data
around,
but
when
you
give
to
that
typescript
class,
the
decorator,
the
the
component
decorator
that
transforms
it
magically
from
just
a
piece
of
code
that
does
nothing
to
a
full-fledged
front-end
component
that
can
have
some
html
attached.
That
can
have
some
data
binding.
B
B
B
B
B
B
Yeah,
it
affects
outside
state
and
that
is
kinda
ugly
yeah.
This
is
quick
and
dirty,
but
on
the
other
hand,
this
does
not
scale
because
also
this
is
completely
tied
to
the
person
class
and
if
we
export
this
variable
and
if
we
have
a
total
count
variable
inside
each
and
every
class
in
our
system.
Well,
we
have
a
mess
in
our
hands
because
we
have
something
like
20
things
that
are
called
total
count,
so
we
will
need
to
say
well,
you
are
not
total
count.
B
B
B
B
B
B
So
if
you
thought
that
importing
a
class
does
not
execute
any
code,
it
does
decorators
in
typescript
are
executed
at
the
point
of
import.
So
when
I
imported
the
class,
typescript
saw
that
that
class
has
had
a
decorator
and
executed
the
decorator,
and
you
can
see
that
here
we
had
the
constructor
function
in
javascript.
There
is
not
really
too
much
of
a
difference
between
a
function
and
a
class,
because
the
class
is
in
essence
represented
by
the
constructor
function
and
the
constructor
function
is
a
construction
function.
B
B
B
B
B
B
So
when
we
imported
the
code,
it
run
the
yay,
I'm
decorating
console.log.
This
is
this
part,
so
this
code
actually
executed
and
returned
the
wrapped
constructor
and
the
wrap
constructor
was
never
called
inside
the
body
of
this
method.
However,
it's
called
in
the
body
of
the
return
value
of
this
method
right
around
here.
So
when
we
constructed
the
instance,
it
said
I'm
about
to
create
a
person
and
then
I've
created
a
person.
B
B
So
this
is
what
a
constructor
cluster
decorator
does
it
wraps
the
constructor?
It
can
wrap
the
constructor
of
the
thing
and
also
one
more
thing
if
you
might
have
noticed
if
you
worked
with
angular
that
this
is
not
the
way
angular
does
the
declaration,
because
you
don't
have
a
component
decorator
after
the
component.
You
need
to
specify
some
things
right
parameters.
B
B
B
B
Piece
of
code,
this
decorator,
this
was
never
directly
called
by
us.
The
parameters
provided
were
provided
by
the
typescript
engine
itself.
So
if
we
want
to
add
parameters
to
a
decorator,
we
cannot
because
we
are
not
the
one-
that's
that
are
calling
the
decorator,
but
parameters
are
useful,
so
we
can
add
parameters
to
another
function
and
use
those
parameters
inside
a.
B
Inside
that
function
to
actually
return
a
constructor.
So
now,
if
I
go
back
to
person,
it
will
say
me:
this
is
not
a
decorator.
This
accepts
a
string
and
I
need
a
function
that
will
take
a
a
function
and
return
a
function,
take
a
constructor
and
return
a
function
constructor.
So
I
have
a
rather
worthy
error
message,
but
if
I
add
a
parent
here.
B
B
B
B
B
B
I
took
to
check
that
the
easiest
way
would
be
to
create
an
angular
application
that
does
not
use
some
of
the
decorators
and
then
monkey
patch,
the
decorator,
so
they
have
some
kind
of
a
console,
look
or
whatever
and
see
if
they
are
inside
it
inside
the
result
or
not
in
principle,
they
should
be
reshakeable
because,
as
you
saw,
a
decorator
factory
or
a
decorator
is
just
a
simple
method.
If
it's
not
called
anywhere
it's
not
cold,
it
should
be
shaken
off.
B
B
B
The
second
one
is
the
property
name
that
we
are
getting
and
the
third
one
is
something
that
is
called
a
property
descriptor.
Actually,
it's
kind
of
a
typed
property
descriptor
in
typescript,
usually,
but
this
is
something
that
we
that
explains
us,
what
the
property
is,
whether
the
property
is
enumerable,
whether
it's
writable.
B
B
B
This
will
be
a
property.
This
will
be
a
property,
so
this
property
will
cover
value
of
the
function.
This
property
will
have
the
value
of
this
function
codes.
This
property
will
have
the
value
of
the
number,
and
this
property
won't
have
a
value,
but
it
will
have
a
get
and
a
set
method,
because
this
is
a
access.
This
is
a
property
that
is
accessed
through
accessor
methods,
so
we
have
a
get
an
asset.
This
is
something
that
is
not
very
much
used
in
javascript
not
often
used,
but
still
it
appears
from
time
to
time.
B
B
B
Anyway,
this
is
again
because
this
is
the
most
common
way
of
using
this
is
again
a
factory,
so
we
are
get
calling
a
method
that
will
return
a
decorator
and
a
property.
Decorator
takes
those
three
parameters
and
does
something
with
them:
let's
once
again
change
the
code,
so
this
will
just
simply
log
out
the
target.
B
B
B
B
B
Counts
so
let's
go
back
what
we
are
returning,
so
if
we
don't
return
from
this
decorators
from
a
constructor
decorator
and
a
method
decorator,
if
we
return
something
with
the
constructor
decor
with
the
class
decorator,
it
will
change
the
constructor
with
a
property
decorator.
It
will
change
the
property.
B
B
B
B
B
So
I'm
allowed
with
the
decorators
to
completely
change
the
behavior
of
the
method.
That
does
not
stop
me
from
anything,
but
that
is
something
that
is
not
very
useful.
So
if
you
create
a
decorator
like
that
people
just
not
gonna
use
it,
because
usage
of
the
decorator
is
of
course
left
to
the
end
user.
B
B
B
B
Of
course,
some
of
you
might
say:
well,
you
are
still
using
global
objects
to
store
this,
and,
to
be
honest,
this
is
a
bit
of
a
hack.
I
am
using
a
global
object
to
store
this.
What
if
I
was
able
to
actually
store
the
call
counts
inside
the
class
itself,
because
this
is
actually
metadata
that
is
relevant
to
the
class
itself,
how
many
times
it
was
called
well,
I
can
actually
do
that
using
reflect.
B
B
We
have
some
functions
here.
Let's
just
take
a
look
at
this
yeah.
We
have
a
simple
calculator
as
simple
as
can
be,
and
here
we
are
adding
some
metadata
on
that
calculator.
So
we
are
using
the
reflect
method
from
the
reflect
metadata
package,
and
this
will
eventually
be
available
in
proper
javascript,
but
not
now
not
today.
B
We
are
adding
another
description
and
we
are
attaching
it
to
the
calculator,
but
on
the
member
add
and
again
we
are
defining
some
other
metadata
and
attaching
it
to
the
member
subtract-
and
here
we
have
a
not
so
simple
to
be
honest
method,
called
show
description.
We
are
checking
on
any
object
whether
it
has
a
description
field.
B
If
it
has
a
description
field,
we
are
getting
the
metadate
that
metadata
and
then
we
are
showing
it.
We
get
all
the
properties
that
are
available
on
that
prototype
on
its
prototype
and
then
for
each
of
them.
We
are
asking
them
again.
Do
you
have
maybe
metadata
so
not
only
on
the
target
but
on
the
method?
Name
itself
and
if
they
do
we're
taking
it
and
when
we
are
printing
it
out,
let's
see
how
this
can
be
done.
B
And
we'll
see
what
the
calculator
says
about
it
about
itself,
so
this
code
does
not
know
it's
working
on
a
calculator
class.
We
can
also
if
we
want
to
annotate
a
sorry
person
class
as
well
or
anything
else.
So
we
have
a
generic
system,
generic
system
that
we
can
use
on
any
method,
so
we
can
have
some
kind
of
a
let's
call
this
documentation,
it's
not
a
full-fledged
system.
B
B
B
B
B
We
have
two
versions
of
the
same
function:
if
we
have
increased
credit
count
and
increase,
call
count,
increase,
create
count,
will
check
for
a
create
count
metadata
and,
if
not,
if
exist,
it
will
increment
it
and
if
it
doesn't
exist,
it
will
create
it
with
one.
The
exact
same
logic
is
on
the
increase
call
count,
but
we
need
to
somehow
make
this
work
and,
let's
see
now,
we
have
create
class
counter,
create
method,
count
called
method
counter,
and
we
have
here.
B
B
B
B
B
B
Yeah
parameter
decorators
are
essentially
the
same
as
method
decorators,
only
that
they
are
passive
and
they
can
inform
you
it
and
they
get
an
extra
parameter.
So
they
get
four
parameters,
they
get
the
target,
they
get
the
property
name,
they
get
the
descriptor
and
they
get
a
number
called
index,
which
is
the
ordinal
index
of
the
parameter.
B
Yes-
and
I
will
update
it
in
an
hour
or
so
I
have
another
thing
that
I
was
not
able
to
get
to
work
is
the
actual
timing
of
the
duration,
because
for
some
reason
this
line
refused
to
work.
I
was
in
trying
to
use
the
performance
to
basically
track
the
time.
I
have
another
piece
of
code
that
uses
the
exact
same
thing
and
that
one
just
works.
B
B
B
B
I
have
the
results
with
which
is
some
kind
of
an
array,
and
then
I
just
say
console.table
results,
and
this
is
how
it
looks.
So
if
you
wanted
to
make
it
yourself
using
console
log,
this
would
have
taken
you
most
of
the
day,
but
I
just
say:
console
table
provide
the
array,
and
this
is
how
it
works.
Now
you
cannot
yeah,
you
cannot
remove
the
index
column.
I've
tried
everything,
but
again,
I'm
not
gonna
waste
a
day
to
trying
to
make
a
night
stable.
A
B
Yep
here
are
the
two
settings
that,
by
default
in
a
regular
project,
they
are
false.
It's
not
a
problematic
to
turn
them
to
true,
but
in
angular
projects
they
are
by
default.
True,
because
angular
needs
them
and
it
needs
them
a
lot,
and
that
was
a
very
smart
decision.
I
have
to
say
in
part
of
the
angular
team.
B
B
A
B
A
B
B
And
that's
actually
what
we
want
to
do.
We
want
to
have
code
that
we
can
understand,
because,
to
be
honest,
nobody
can
understand
this.
If
he
looks
at
this
for
the
first
time,
there
is
four
levels
of
indentation
there
is
try
if
throw.
Finally,
this
is
something
a
crazy
guy
wrote
this,
and
this
is
completely
normal
code
that
we
arrive
to
by
following
user
input,
the
manager
input
actually
because
this
all
of
these
things
are
normal
and
all
of
these
things
are
needed.