Making Sense Of TypeScript, In 50 Lessons

Every other day, one of your team members makes a case for switching to TypeScript. Maybe you rely on unreliable JavaScript libraries, or you have a large number of contributors, or the code base is difficult to maintain. The reasons are always similar, but so is the hesitance from the team. Why change the stack that seems to be working?

That’s the question we’ve asked ourselves as well. So we’ve teamed up with Stefan Baumgartner, a seasoned JavaScript developer drawn to TypeScript for years, to break it all down into understandable pieces. The result is 50 short lessons on TypeScript — our shiny new book, with everything TypeScript, from start to finish.

About The Book

You might have heard about TypeScript, but you might not know why it’s useful, and how to make it work for you. This book is supposed to fix just that: it provides JavaScript developers with a simple, structured and pragmatic guidance towards TypeScript, and explains how to make sense of it all, step-by-step.

In “TypeScript in 50 Lessons”, Stefan Baumgartner breaks down the quirks of TypeScript into short, manageable lessonsfor front-end developers ↓ who know enough JavaScript to be dangerous. Jump to table of contents ↓

Meet “TypeScript in 50 Lessons”, our new book on everything TypeScript: from typing functions to TypeScript tooling. Download a free sample PDF (2.3 MB).

First, the book gently explores TypeScript, from basic ideas to common techniques and advanced strategies. Then, right around the midpoint, we'll take the leap into structural type systems and why they are so useful for your work.

We'll dive into working with types, typing functions, union and intersection types, generics, conditional types and wrap up with thinking in types.

“This is a gentle and timeless journey through the tenets of TypeScript. If you’re a JavaScript programmer looking for a clear primer text to help you become immediately productive with TypeScript, this is the book you’re looking for. It’s filled with practical examples and clear technical explanations.”

Natalie Marleny, Application Engineer

You’ll learn:

  • Core concepts of TypeScript, and why they matter.
  • How to use TypeScript in your current projects,
  • TypeScript code walkthroughs, applicable right away.
  • TypeScript tooling, needed to use it effectively.
  • How to get most out of TypeScript without learning a new language.
  • Structural type systems and their semantics.
  • Low-maintenance types and how to evolve them.
  • How to bend the type system to make it fit your needs.
  • Check the PDF preview (3MB) and get the book right away.
A look inside the book: with 464 pages on everything TypeScript. Photo: Marc Thiele. Large view.

Who is this book for?

It's for developers who know enough JavaScript to be dangerous. If you are spending an increasing amount of time programming and want to be more productive, that's the book you. With TypeScript, you can get more out of your JavaScript code – for yourself and your colleagues.

The book is also for developers who already fiddled with TypeScript and now want to dive deeper. If you want to learn about type systems and how they can be used to define complex JavaScript scenarios, this book will help you, too. This knowledge will ultimately become language-independent, preparing you for different programming languages that have elaborate type systems.

If you ever find yourself:

  • writing JavaScript with libraries and frameworks you barely know
  • writing JavaScript with other developers
  • writing JavaScript that deals with back-end data
  • writing JavaScript that your future self has to continue working on

then TypeScript will do right by you.

Table Of Contents

Programming books have a tendency to become outdated very quickly. When Stefan set out to write this book, his most important goal was that it had to be timeless. TypeScript gets at least two major releases a year, so there are new features and changes coming regularly.

That’s why the book focuses on the long-lasting aspects of the type system. You'll understand how TypeScript works, and how to apply new features long after you've turned the last page of this book.

The book is split into 7 chapters.

1. TypeScript for Smashing People
+

In this chapter, we want to debunk myths. TypeScript can be so many things, and many people have different views on this programming language that has become so popular in recent years. What is TypeScript actually about? Let’s see what TypeScript has in store for us.

We go on a hunt for red squiggly lines. If a word processor can highlight our spelling and grammar mistakes, why shouldn’t a programming editor do the same? We will see that – given the right tools – we might already be using TypeScript without realizing. With TypeScript being a gradual type system, we can gently encourage the programming language to give us more insights into our code. We will also write our first types.

2. Working with Types
+

We learn about some major features of TypeScript, like type annotations, type inference, and control flow. We will define primitive and complex types, and learn about the difference between types and interfaces. For every variable or constant we can create, we find a way to provide a type.

3. Functions
+

We’ll take a good look at functions. Functions are essential in JavaScript, and there are lots of different typing scenarios available to us. To make functions tangible, we’ll look at a website’s search field: a search field with type-ahead, that shows some results the moment a user types a search query.

We learn about function heads and bodies, structural typing for functions, and how we can define different behavior for the same function.

4. Union and Intersection Types
+

TypeScript’s type system can be seen as an endless space of values, and types are nothing but discrete sets of values inside this space. This allows for algebraic operations like union and intersections, making it a lot easier for us to define concrete types for values. We learn about type widening and narrowing, top and bottom types, and how we can influence control flow.

5. Generics
+

Generics are a way to prepare types for the unknown. Whenever we know a certain behavior of a type but can’t exactly say which type it affects, a generic helps us to model this behavior. We learn about generic constraints, binding generics, mapped types, and type modifiers.

6. Conditional Types
+

With conditional types, we get the last tool in our toolbelt to make most sense out of JavaScript code. Conditional types allow us to validate an input type’s set, and decide on an output type. To be sure, some conditional types can be mind-blowingly hard to understand, and their potential is sometimes hard to grasp. But this is what we want to clear up!

Conditional types allow us to introduce a level of meta-programming unseen in programming languages, where we can create if/else clauses to determine a type based on the input type. This allows for a powerful set of tools we can use to define model and behavior once, and make sure we don’t end up in type maintenance hell.

7. Thinking in Types
+

In the final chapter, we’ll work to strengthen our knowledge by seeing solutions to problems you might encounter every day in your TypeScript life. Our goal is to write just a couple of types to make our life easier, so we can focus on coding more JavaScript.

We'll get into a thinking-in-types mindset, where we take care about a robust and well-defined set of types before starting implementation. This helps us validate that what we code is what we expect.

“Stefan Baumgartner’s book finally made me want to use TypeScript. Until now, I didn't understand why I should use TypeScript. Without knowing the core principles, it made things more complicated for me. After reading this book, I know how to use the power of TypeScript to my advantage.”

Vanessa Böhner, Software Developer and Chapter Leader at Front-End Foxes
“Stefan walks you through everything from basic types to advanced concepts like the infer keyword in a clear and easy to understand way. The book is packed with many real world examples and great tips, transforming you into a TypeScript expert by the end of it. Highly recommended read!”

Marvin Hagemeister, Creator of Preact-Devtools

464 pages. The eBook is available (PDF, ePUB, Amazon Kindle). Shipping now. Written by Stefan Baumgartner. Designed by Rob Draper.

About the Author

Stefan Baumgartner is a software architect based in Austria. He has published online since the late 1990s, writing for Manning, Smashing Magazine, and A List Apart. He organizes ScriptConf, TSConf:EU, and DevOne in Linz, and co-hosts the German-language Working Draft podcast.

Technical Details

  • ISBN: 978-3-945749-90-6 (print)
  • Quality hardcover, stitched binding, ribbon page marker.
  • Free worldwide airmail shipping from Germany. (Check your delivery times). Due to Covid-19 and import restrictions, there could be some delays. But you can start reading the eBook right away.
  • eBook is available as PDF, ePUB, and Amazon Kindle.
  • Get the book right away.

Code Snippets and Hands-On Examples

TypeScript in 50 Lessons is a very practical book. It features lots of examples that not only give you an idea about syntax and semantics, but show you actual use-cases that you might encounter in your applications.

To help you follow the code examples in the book, Stefan has set up projects on Code Sandbox and the TypeScript playground, where you can fiddle around on your own and see how the TypeScript's type system behaves. You'll find all code snippets on the TypeScript book website.

Book Photos

We take time to carefully craft, edit and print our printed books. This one in no exception. Not just a wonderful book to learn from, but also a beautiful book that looks lovely on a kitchen table. The cover and the chapter illustrations designed with love by Rob Draper. Photos taken by a good friend of ours, Marc Thiele.

Community Matters ❤️

Producing a book takes quite a bit of time, and we couldn’t pull it off without the support of our wonderful community. A huge shout-out to Smashing Members for their ongoing support in our adventures. As a result, the eBook is and always will be free for Smashing Members. Plus, Members get a friendly discount when purchasing their printed copy.

Stay smashing, and thank you for your ongoing support, everyone!

More Smashing Books & Goodies

Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been (and will be) at the core of everything we do at Smashing.

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books that stand the test of time. Paul and Adam are some of these people. Have you checked out their books already?

Click!

A practical guide on how to encourage clicks without shady tricks.

Add to cart $39

Interface Design Checklists (PDF)

100 practical cards for common interface design challenges.

Add to cart $10

Form Design Patterns

A practical guide to designing and coding simple and inclusive forms.

Add to cart $39

SmashingConf Live! Is A Wrap

SmashingConf Live! Is A Wrap

SmashingConf Live! Is A Wrap

Rachel Andrew

Last week, we ran our very first SmashingConf Live! event, the first in a series of online events taking us through to the end of 2020. We had an amazing two days and we hope that all of our speakers and attendees did too. In this post, I’ll round up some of the key moments and feedback we’ve had.

A Team Spread Around The World

Here at Smashing, we take remote, distributed working to the extreme, and are very used to dealing with all of our different timezones. However, the conferences are the one time when most of us are together in one place. With all of us in our home locations and timezones, things were very different this time. We shared pictures of our setups in the Slack for the event, and lots of attendees joined in the fun and showed us how they were attending the conference themselves.

Some of the desks that brought you SmashingConf Live!
Top row (left to right): Amanda, Charis and Jarijn, Rachel. Bottom row (left to right): Phil, Vitaly, Tobi

It takes a lot of people to bring you an online multi-track conference, so the full team taking care of everything and everyone behind the scenes on the day were:

  • Andrea de Souza (Volunteer): Canada
  • Amanda Annandale (Head of Events): Bristol, UK
  • Bash Choudhry (Volunteer): USA
  • Bethany Andrew (Event Assistant): London, UK
  • Charis Rooda (Marketing Coordinator): Hong Kong
  • Esther Fernandez (Partnerships Coordinator): Barcelona, Spain
  • Jan Constantin (Smashing Team): Freiburg, Germany
  • Jarijn Nijkamp (Membership Lead): Hong Kong
  • Marc Thiele (Board Member): Dusseldorf, Germany
  • Mariona Ciller (Partnerships Manager): Barcelona, Spain
  • Rachel Andrew (Editor-in-Chief): Bristol, UK
  • Raffaella Isidori (Volunteer): Milan, Italy
  • Ricardo Gimenes (Illustrator): Malmö, Sweden
  • Vitaly Friedman (Co-Founder): Dusseldorf, Germany

Our Conference Platform

When selecting a conference platform it was important to us to have something that would enable the fun and interactivity of an in-person SmashingConf. We wanted to have sidetracks, games, places to ask questions of our speakers, all along with main stage content. While we use Zoom for workshops, we didn’t feel that asking you all to sit through two days of Zoom meetings would be very Smashing at all.

The platform mid-session
We're running our conferences on Hopin, a friendly, inclusive platform, with Smashing branding and plenty of cats. With interactive, live sessions and live captioning. Watch a video preview. (Large preview)

Amanda and the rest of the team looked at a number of options and we ultimately chose to use Hopin. We trialed the platform for our Smashing Meets events, but this was the first time we would be running at such a scale. Everything worked really well, and speakers and attendees seemed to like the setup. As a speaker, I found it felt far more interactive than the usual online conference solutions, and less like I was presenting to my office wall!

A Lot Of Fun, And A Lot Of Learning

With multiple sessions happening at once we had a lot of speakers sharing their knowledge with us. As with our in-person events, everyone created shared Google Docs of takeaways over the two days — Day One, Day Two. MC Phil Hawksworth kept everything on track on the main stage.

Some amazing sketchnotes were created by Ximena which give you a snapshot of the key takeaways from many of the talks and sessions.

We even had our conference DJ Tobi playing some tunes between the mainstage talks — just like at our in-person events.

Badges

We felt that a virtual conference should have badges too. So, for SmashingConf Live we had badges featuring a variety of cats. Attendees tried to find all of the different cats — all 96 of them!

A preview of some of the badges used at SmashingConf Live! of Topple the Cat in a variety of disguises
Friendly SmashingConf badges for cat collectors! Every attendee gets their own badge and can trade them when meeting new people. Illustrated by our cherished illustrator, Ricardo Gimenes.

It really did feel like an event, rather than a webinar, and it was great to see so many people — and to meet their cats! That’s something we don’t get to do at our usual events.

Wishing You Were There?

If you wish you could have joined us then you have three more chances for some SmashingConf online fun! We’ve taken all of our 2020 events online, which means that between now and the end of the year you have three to choose from.

SmashingConf Freiburg Online (Sep 7–8)

SmashingConf Freiburg Online 2020The SmashingConf Freiburg is moving online on the original dates: September 7th–8th. One track, two days and 13 speakers, with all of the actionable insights you expect from SmashingConf. We’ll be running the event tied to the timezone in Germany — making this a great event for Europeans. Check out the schedule, and buy tickets here.

SmashingConf Austin/NY Online (Oct 13–14)

SmashingConf Austin Online 2020We have combined the programming for New York and Austin as these two events were so close together and similar to each other. We’ll be running this event in Central time, just as if we were all in Austin. Check out the schedule, and buy tickets here. We’d love to see you in October!

SmashingConf SF Online (Nov 10–11)

SmashingConf San Francisco Online 2020In PST, join us for a SmashingConf San Francisco on November 10th–11th. The schedule and tickets are online for you to take a look at. We’ll be sure to have a great celebration for our final event of 2020!

Can’t wait to virtually see you there!

Smashing Editorial (il)