Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

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