TypeScript has gained traction since it first
appeared in October 2012, and it has become a
real game-changer in the web development
world
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
TypeScript “adds” syntax to JavaScript.
TypeScript is a strict superset of ECMAScript 2015 (aka ES6+)
This syntax is used by TypeScript’s compiler to
sniff out code errors before they happen, then it
spits out vanilla JavaScript that browsers can
understand
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
It’s important to know all this because we need
to know where TypeScript gets its roots in
order to poke at its possible future
Slide 8
Slide 8 text
When adding TypeScript to a project it is
important that the developers embrace it rather
than fight against it
Slide 9
Slide 9 text
When used right, it becomes crucial to have a
readable and easy-to-maintain codebase
Slide 10
Slide 10 text
It has great features like mapped types,
overloading, type inference, optional
typing, etc, and those keep on getting better
every day with incremental upgrades
Slide 11
Slide 11 text
Source: blog.thoughtspile.tech
Slide 12
Slide 12 text
TypeScript
Components
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
The language is what developers love writing.
The compiler is what interprets the language for
browsers. The service processes the language
on demand with blazing speed.
Slide 15
Slide 15 text
TypeScript v5.0.*
(current)
Slide 16
Slide 16 text
tsconfig.json
The presence of a tsconfig.json file in a directory
indicates that the directory is the root of a TypeScript
project. The tsconfig.json file specifies the root files
and the compiler options required to compile the project.
JavaScript projects can use a jsconfig.json file instead, which acts
almost the same but has some JavaScript-related compiler flags enabled
by default.
Slide 17
Slide 17 text
Enabling Strict Mode
Without TypeScript strict mode on, the typing can be too
relaxed, and that will make our codebase less type-safe. It
will give the wrong impression, as some think that by
adding TypeScript all typing issues are automatically fixed.
Slide 18
Slide 18 text
noImplicitAny
noImplicitThis
alwaysStrict
strictBindCallApply
strictNullChecks
strictFunctionTypes
strictPropertyInitialization
tsconfig.json
Having more strict typing will help us catch more bugs at compile time
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Relying on Type Inference
TypeScript inference is one of the most powerful tools of
this programming language. It does all the work for us.
We only have to make sure that all the pieces add together
with as little intervention as possible.
A crucial operator to achieving this is the typeof.
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
It is preferable to rely on ReturnType
than adding the number type. By hardcoding the number type
we are doing the compiler’s job.
Use an appropriate syntax to express typings
Slide 23
Slide 23 text
TypeScript even has the infer operator, which can be
used in combination with Mapped Types to extract a type
from another.
Slide 24
Slide 24 text
Reusing interfaces
When typing component interfaces, it is common to need to have
some different interfaces variants of the same type. Those can vary
in one or two parameters.
A common mistake is to manually redefine those variations. That will
lead to:
● unnecessary boilerplate.
● multiple changes are needed if one property changes in one
place, that change needs to be propagated to many files.
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
Mapped Types can be also be applied to unions
Slide 27
Slide 27 text
TypeScript ships with the following
Mapped and Utility Types
● Omit
● Partial
● Readonly
● Exclude
● Extract
● NonNullable
● ReturnType
Slide 28
Slide 28 text
TypeScript ships with utilities, there are limited and
are just meant to be a starting point.
There are a bunch of library Type utilities that you
can use and they provide battle-tested types that
decrease the time you spend on writing new
mappings.
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
As all Types are removed at compile time this
won’t increase your bundle size.
Be aware that all of those types of library utilities
have some requirements and restrictions.
Slide 32
Slide 32 text
Propper Overloading
TypeScript supports overloading natively. That is great as
it can improve the readability of our contracts. However, it
is different from other typed overloading languages. There
are scenarios where it might make our code more
complex and verbose.
Slide 33
Slide 33 text
Overloads that differ only in trailing parameters
Slide 34
Slide 34 text
Overloads that differ by type in only one argument type
Slide 35
Slide 35 text
Avoid Function Type
TypeScript ships with the Function type. It is like using
the any keyword but for functions only. Enabling strict
mode won’t prevent us from using it.
Function type:
● accepts any number and type of parameters.
● the return type is always any
Slide 36
Slide 36 text
By using an explicit function definition our callback function is more
readable and type-safe
Slide 37
Slide 37 text
Built-In Immutability
TS provides all the necessary tooling to make sure we
don’t mutate our objects. We don’t need to add heavy
libraries like ImmutableJS to our codebase.
Slide 38
Slide 38 text
By using the built-in features we will keep our bundle light and our types consistent
Slide 39
Slide 39 text
Tuples
One of the last additions and improvements was Tuples.
Tuples are arrays where the number of elements is fixed.
Their type is known and they are not necessarily the
same type.
Slide 40
Slide 40 text
Non-fixed size arrays with multiple types are not inferred into a Tuple. As the array is
dynamic and might change Typescript won’t exactly know the right Type. I will return an
union of all possible types.
Slide 41
Slide 41 text
One scenario where it’s very common to find it nowadays:
React Hooks.
The Hooks implementation normally returns an array with
the result plus functions, and having that array typed is
nice addition to type safety .
Slide 42
Slide 42 text
Any vs Unknown vs Never
What is the difference between any, unknown, and
never? When should we be using each one of those?
What are its drawbacks and strengths?
Slide 43
Slide 43 text
By default, when the type annotation is missing and
can’t be inferred, the compiler will default to the any
type.
This is considered a bad practice and has an easy fix.
We can enable strict mode on to make the above
code fail.
Slide 44
Slide 44 text
The unknown type is simple but sometimes the most
tricky one to grasp. It is simply the parent of all types.
The usage of unknown is the recommended alternative
to any. It lets us define wider types whilst keeping safe
type checking.
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
One common usage of unknown is to be used as a
bridge to bypass typings. The compiler is leveraging
the typing responsibility of the developer. That means,
it should be used with caution.
Slide 47
Slide 47 text
The never is a simple but at first quite confusing type.
It is a type to express that nothing is assignable to it.
It is a type that should never occur or be assigned to.
By relying on the infer and never keywords, we are
saving ourselves the trouble of having to duplicate any
types and to better express our interfaces.
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
any should be avoided as much as possible in favor of
unknown. However, it is fine to use in some situations
where unknown does not work for you.
The never type is useful to help us express type
restrictions and identify type restrictions of the
language
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
+
Slide 53
Slide 53 text
Tools
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
Summary
Slide 56
Slide 56 text
These guidelines are simple to follow
and are meant to help you embrace
ecosystem rather than fight it.
Slide 57
Slide 57 text
By applying these simple tips you will
have a better, less verbose, and easy
to maintain codebase.
Slide 58
Slide 58 text
Q & A
As everything good in life, knowledge is great only when shared
https://discord.gg/94uhCAkFKf
Slide 59
Slide 59 text
As everything good in life, knowledge is great only when shared