Understanding types as sets

Rate this content

The talk will introduce the concept of variance as in pertains to generic types. It will then show how this concept applies to TypeScript. While showing TypeScript example, I will try to help the audience form an intuition about variance. Finally we will look at what some of the design decisions in TypeScript mean for the soundness of the code we write, and what are some blind spots the compiler has.

21 min
29 Apr, 2022

Video Summary and Transcription

This Talk explores the concept of types and their relationship to variables in TypeScript, including primitive types, special types, and literal types. It also delves into unions and intersections of types, their canonical form, and their effect on sets of values. The Talk discusses object types, their defined members, and the behavior of access property checks. It highlights how unions and intersections can be used with objects and how they are reduced to a canonical form. The importance of base types in TypeScript and how they allow variables to hold instances of any subtype is also emphasized.

Available in Español

1. Introduction to Types and Values

Short description:

Hello, everyone. My name is Tizian Cernikva Dragomir. I work on the JavaScript infrastructure team at Bloomberg and contribute to the TypeScript compiler. In this talk, we will explore the concept of types and how they relate to variables. Types can be seen as a representation and behavior of data, but they can also be viewed as a set of values that a variable can possess. We will discuss primitive types in TypeScript, such as number, string, Boolean, as well as special types like never and unknown. Additionally, we will explore literal types and their application in set operations, such as unioning.

♪♪ Hello, everyone. My name is Tizian Cernikva Dragomir. Welcome to my talk, TypeSets Sets. A little bit about myself first. I work on the JavaScript infrastructure team at Bloomberg. I contribute to the TypeScript compiler. And if you've heard about me, you've probably heard about me from Stack Overflow, where I answer a lot of questions about TypeScript.

So I want to start off this talk with a very simple question. What is a type? It's often very simple questions that can allow us to gain new insight. When we first start to learn programming, we will look at types as something that we associate with a variable. We will probably also learn that this data type has something to do with the way that data is represented in memory. So for example, integers are represented on 32 bits, strings are a sequence of characters, objects are also represented in memory in a particular way. So we come out with the impression that a type is representation and behavior, behavior meaning the operators that can manipulate those values. But there is also a different way to look at a type, namely, as a value space.

So a type is a set of values that the variable can possess. And let's look at some of the primitive types in TypeScript and how those relate to this definition. For example, the type number is the set of all floating point values. The type string is the set of all text values. The type Boolean is the set of values true and false. There are also some special types in TypeScript, namely the never type, which, since it has no possible values that can exist at runtime, it represents the empty set. And the unknown type, which represents the set of all possible values in Javascript. So let's take this new way of looking at types and try to apply them to some types we probably already know. Let's try to create a type that describes a set with a single value. In TypeScript, such types are denoted by their associated values. So we can define a type that is the value Yes, 1, or True. And once we've defined these types, if we associate them with a variable, then that variable can only contain the value that is part of that set. So, for example, if we associate Yes with a variable, it can only hold Yes. It can never hold the value No or any other string value. Now, literal types are not particularly useful until we associate them with one of the basic operations that we can do on sets, namely unioning. When we create a union of two existing sets, we create a new set that contains the values of both of the original sets.

2. Union and Intersection of Types

Short description:

In Typescript, creating a union from multiple types allows for a new type that can have values from all the constituent types. The intersection of string and number types results in the empty set represented by the never type. Intersecting boolean-like with the string set yields the values Yes and No. TypeScript reduces types containing Union and Intersection operators to a canonical form, expressing them as a Union of intersections.

So, similarly, in Typescript, if we create a union from our three existing types, using the pipe operator, what will happen is that we create a new type that can have values from all three of these constituent types. So our new type can contain the values 1, True, and Yes, but it can't, for example, contain the value No.

Let's take a look at the other operation we can do on sets, namely intersection. Now, let's say we have two primitive types, namely string and number, and we want to see what the intersection of these two types would be. Well, what value at runtime is both a string and a number? The answer is that there is no such value. So these two sets are actually completely disjointed. So their intersection would be the empty set. And TypeScript represents the empty set through the never type. So this intersection would be Never.

But let's see if we can do something more useful with intersections. Let's say we have this union of literal types. And we would like to extract the string components of this union. How could we use intersections in this case? Well, if we were to intersect boolean-like with the string set, what values would be in this intersection? And the answer is just the values Yes and No. The other values wouldn't fill the criteria, right? 0 and 1 are not string types, neither is True and False. So if we create this type, TypeScript will agree with us and say, Yes, just strings is Yes and No. And similarly, we could extract numbers if we intersect with number. We could also extract the booleans if we intersect with boolean.

Now something very interesting happens here since boolean just contains True and False. Since the result of this intersection would just be True and False, what just boolean ends up being is, of course, just the boolean type because boolean is just the Union of the literals True and False. But let's take a look at why exactly this works. Why does TypeScript perform this reduction? Well, TypeScript will try to bring all types that contain Union and Intersection operators to a canonical form. Namely, it will try to express our type as a Union of intersections, and it will apply distributivity to arrive at this result. So, for example, if we take the just strings type we created before, what TypeScript will first do, it will expand out that Union. And it will then try to take the intersection and move it closer to each one of the Union constituents. So we will get this type. What happens now? Well, if we take the intersection of String, which contains all string values, and of the type Yes, which is the set of just the Yes value. What do we get? Well, the answer is we just get the Yes value. We get Yes out of this. So we don't have to keep all of this around, we can just leave the Yes type alone. What about No? Well, the situation is similar.

3. Intersection of Types and Object Types

Short description:

No and String will result in No. Intersection of Zero and String is Never. Same for 1, True, and False. After reducing intersections, we're left with Yes or No. Object types define a set of object values with defined members. Other members can be present. Exception: access property checks catch errors when assigning object literals with more properties. object.keys returns a string array, can't index back into the object. This behavior is intentional.

No and String will just result in No. What about the intersection of Zero and String? Well, the value Zero, which is in the set denoted by the literal type, has nothing in common with the string type. So the result is the empty union, which is, of course, Never. And the same is true for 1, True and False. All of these will result in Never types. So this is what we're left with after this reduction of intersections.

What happens now? Well, if we union with the empty set, the empty set will add nothing to our set. It is the same as if we hadn't done that operation. So we can just remove all those unions with Never and we're left with Yes or No.

OK, let's look at object types next. What does an object type define? Well, it defines a set of object values that must have the members defined by the object type. Now, crucially, what an object type does not do is it does not prevent other members from being present on the object. So what do I mean by this? Let's have an example. Let's look at a person type which has a name property and let's have a function that takes a parameter of this type. What can we pass in? Well, we can pass in an object that has fewer properties. The name property is required by the person type. We can obviously pass in an object that has the name property. That's fine. But we can also pass in an object that has more than that that has the name property and has the age property. Now TypeScript is perfectly happy to accept this.

Now, there is one exception to this is the behavior that's called access property checks, and this is when you actually do get an error if you try to assign an object literal with more properties to a parameter or a variable that has a specific type. Now this behavior only kicks in if the object literal is fresh, namely if you're creating it right there, and it's part of the pragmatism of TypeScript. It's something that TypeScript does, even though it's not necessarily consistent with the rest of the type system, but it does catch a certain class of errors that would make life more difficult for developers if it didn't catch.

So within the set defined by this object type, we might have objects that just have the name property, but we also have objects that have the name property and might have any number of other properties. Now an interesting consequence of this is the behavior of object.keys, which I'm sure is surprising to a lot of developers. object.keys will return a string array, which means that we actually can't use the result of object.keys to index back into the object we got the keys from. So p of key here will give an error. Now I'm sure this is a very frustrating behavior, it's very frustrating for me, and what people usually do is they just add a type assertion and say as key of whatever we passed it. And probably a lot of people think, well, TypeScript is still a new language, maybe this is an oversight, they just haven't gotten around to fixing it. I know I have thought that at first, and I know a lot of people submit pull requests to try to fix this, but this is actually not an oversight, this is intentional.

4. Objects, Unions, and Intersections

Short description:

We can pass in objects with more keys than expected, which may lead to runtime errors. Unions of objects create a set of values with properties that may or may not be present. Intersections of object types result in object values with properties from both types. Unions and intersections are named based on their effect on sets of values, not on their effect on members. Filtering out a discriminated union can be achieved using intersections.

And the reason is, that we can actually pass in objects that have more than the keys of a person. So what happens if we pass in the object P1, which has a name property and an age property? Well, the for loop is going to take the first key, which is name, is going to uppercase it, everything will work fine, but then it's going to have the age key, and when it indexes with the age key it's going to get a number, which doesn't have the toUpperCase method, and this will fail at run-time. So, if object.keys were to return an array of whatever keys we passed in as a type, we might actually at run-time get more keys than we bargained for, and this might lead to run-time errors. And this is the reason object.keys has the type it has, because if it didn't, if it returned an array of key of whatever we passed in, we might actually get run-time errors that we weren't expecting, and run-time errors in a program that fully type checks.

Let's move on to unions of objects. What do these mean? Well, let's take an example. Let's say we have two object types, and we want to take their union. Well, this means that our new set, our union set, will have object values that might have a name property or might have an ID property, but we don't know exactly which one. So this means that it's not safe to access either of these properties because they might not be present. One of them will be, but we don't know which one. If these types would have had some property in common, for example, description, then that property would be safe to access because we can say for sure that it has to be present on all object values inside this set. And this is again a source of confusion for many newcomers to TypeScript because the union operation is named for what it does to the set of values, not necessary to what it does to the members because unions will allow access to an intersection of members. But again, the operation is named for what it does to the sets of values described by these types.

What about intersections of object types? Well, they suffer from a similar confusion. Namely, if we take the intersection of these two sets, what we will have in the intersection is object values that have both name and ID. And since they have both of these properties, it's safe to access either of them. So, intersection of object types will intersect the sets defined by the types and will result in a new type that has a union of members. But again, the operation is named for what it does to the sets, not for what it does to the members. So, again, unions and intersections, a lot of people have the feeling at first that these are badly named because, well, unions we have an intersection of members, while for intersections we have a union of members. But these, again, are not named for what they do to the members, they're named for what they do to the sets of values.

Let's see if we can use the same trick we used on unions of primitive types to filter out a discriminated union. And here we have a discriminated union that has two constituents, one of type square and one of type circle. And the question is how can we extract just the circle component. And we could of course use a conditional type, that is definitely the preferred way to do this, but intersections also can do the job. And mostly they give out the same results. So what type could we intersect this union to only preserve the type that has type circle? And the answer is that we can intersect with another object type, that has a property of type circle. And this will actually preserve just the component that we are interested in because it is, the intersection, does not contain any of the objects that could have type square. So let's see how this could work. Well, TypeScript will try to do the same thing it does for the union of primitives, namely to try to bring it to the canonical four. So first of all TypeScript will expand that shape into the union that it actually is.

5. Intersection and Union Types in TypeScript

Short description:

TypeScript reduces object types with intersections and unions to a canonical form. The intersection of types circle and square is the never type, resulting in an object type with a property of type never. This illustrates how intersections can be used in object types.

And it will then bring the intersection closer to each of the constituents of the union. So what happens now? Well, TypeScript will notice that the second constituent of this union has an intersection that has type both circle and type square. So this property type will have to be circle and square at the same time. Now, the intersection of these two types is actually the never type. There is no possible value that can be at the same time the constant circle and the constant square. So it will reduce this object type to something that has a property of type never. And then it will notice that, okay, this itself is the equivalent to never because there is no value, no object value that can have a property of type never. So this is also never. Now, after this is done, we're again left with a union with never. So this can just be eliminated. And we're left with this intersection. Even though this type will, in effect, work the same as our circle type, the one that has the radius as well, it is different from what we would get from a conditional type, from the extract conditional type. But again, it does the job just as well. And it illustrates the way intersections work and can work for object types.

6. Understanding Base Types

Short description:

A base type in TypeScript allows a variable to hold instances of any subtype. The base type describes the set that contains all subtype values, and a subtype is always a subset within the base type.

Another question I want to ask is, what is a base type? And again, this is one of those questions that can offer more insight. Especially, what is a base type when we talk about sets? And again, our intuition is shaped by nominally typed languages. We can always check the type definition in the nominally typed language for an extends clause or an implements clause. And this usually gives us a pretty good idea, especially for classes, what the base class is. So, for example, in this case, in C++, we can just check what comes after the colon, and we see that dog extends animal. Same in Java, we can see that dog extends animal, so animal is the base type of dog. And same for C Sharp. But, what does it actually mean to have a variable that is typed as a base type? What can that variable actually hold? Well, it can hold an instance of an animal, but it can also hold an instance of a dog, or an instance of a cat, or an instance of any subtype of animal. So, generally speaking, if you have a variable that is typed as a base type, it can hold instances of any subtype. So, within our animal type, the values that are possible are instances of animal, of dog, of cat, and indeed, since TypeScript is a structurally-typed language, a structurally-typed type system, any compatible object that fits the description of animal can also be present inside the set. So, what conclusions can we draw from here? Well, a base type describes the set that contains all subtype values, and a subtype is always a subset within the base type.

7. Finding Base Types in TypeScript

Short description:

To find the base type of an object type in TypeScript, we can consider the sets that the type is a subset of. A type can have multiple base types, and they don't need to be explicitly defined. The number of base types can be infinite, especially when considering optional properties. TypeScript considers a type with name and description to be a base type for a type with age and name, as it includes objects with name and age. Therefore, we can find any number of base types for a type.

So, given all of this, how can we find the base type of this object type, for example? Well, the question becomes, what sets is this set a subset of? Well, we could look at this set as a subset of the set described by an object type that just has the name property, but we could also look at it as a subset of the type that has just the age property. So, what conclusions can we draw from this? Well, a type can have multiple base types in TypeScript, and they don't necessarily need to be spelled out. They just work out this way, because the sets are included in one another. More than that, considering optional properties, the number of base types could actually be infinite, because if we ask TypeScript, does a type that has just age and name extend a type that has name and optional description, TypeScript will say, yes. And this is pretty clear, because the type with name and description also includes any objects that have name and age, because again, it's just a subtype of this bigger type. So, indeed, we can actually find any number of base types to our type.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Day Berlin 2023React Day Berlin 2023
21 min
React's Most Useful Types
We don't think of React as shipping its own types. But React's types are a core part of the framework - overseen by the React team, and co-ordinated with React's major releases.In this live coding talk, we'll look at all the types you've been missing out on. How do you get the props type from a component? How do you know what ref a component takes? Should you use React.FC? And what's the deal with JSX.Element?You'll walk away with a bunch of exciting ideas to take to your React applications, and hopefully a new appreciation for the wonders of React and TypeScript working together.
Vue.js London 2023Vue.js London 2023
30 min
Stop Writing Your Routes
The more you keep working on an application, the more complicated its routing becomes, and the easier it is to make a mistake. ""Was the route named users or was it user?"", ""Did it have an id param or was it userId?"". If only TypeScript could tell you what are the possible names and params. If only you didn't have to write a single route anymore and let a plugin do it for you. In this talk we will go through what it took to bring automatically typed routes for Vue Router.
TypeScript Congress 2023TypeScript Congress 2023
31 min
Making Magic: Building a TypeScript-First Framework
I'll dive into the internals of Nuxt to describe how we've built a TypeScript-first framework that is deeply integrated with the user's IDE and type checking setup to offer end-to-end full-stack type safety, hints for layouts, middleware and more, typed runtime configuration options and even typed routing. Plus, I'll highlight what I'm most excited about doing in the days to come and how TypeScript makes that possible not just for us but for any library author.
React Finland 2021React Finland 2021
36 min
The Eternal Sunshine of the Zero Build Pipeline
For many years, we have migrated all our devtools to Node.js for the sake of simplicity: a common language (JS/TS), a large ecosystem (NPM), and a powerful engine. In the meantime, we moved a lot of computation tasks to the client-side thanks to PWA and JavaScript Hegemony.
So we made Webapps for years, developing with awesome reactive frameworks and bundling a lot of dependencies. We progressively moved from our simplicity to complex apps toolchains. We've become the new Java-like ecosystem. It sucks.
It's 2021, we've got a lot of new technologies to sustain our Users eXperience. It's time to have a break and rethink our tools rather than going faster and faster in the same direction. It's time to redesign the Developer eXperience. It's time for a bundle-free dev environment. It's time to embrace a new frontend building philosophy, still with our lovely JavaScript.
Introducing Snowpack, Vite, Astro, and other Bare Modules tools concepts!
React Advanced Conference 2021React Advanced Conference 2021
6 min
Full-stack & typesafe React (+Native) apps with tRPC.io
Top Content
Why are we devs so obsessed with decoupling things that are coupled nature? tRPC is a library that replaces the need for GraphQL or REST for internal APIs. When using it, you simply write backend functions whose input and output shapes are instantly inferred in your frontend without any code generation; making writing API schemas a thing of the past. It's lightweight, not tied to React, HTTP-cacheable, and can be incrementally adopted. In this talk, I'll give a glimpse of the DX you can get from tRPC and how (and why) to get started.

Workshops on related topic

React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2022React Advanced Conference 2022
148 min
Best Practices and Advanced TypeScript Tips for React Developers
Top Content
Featured Workshop
Are you a React developer trying to get the most benefits from TypeScript? Then this is the workshop for you.In this interactive workshop, we will start at the basics and examine the pros and cons of different ways you can declare React components using TypeScript. After that we will move to more advanced concepts where we will go beyond the strict setting of TypeScript. You will learn when to use types like any, unknown and never. We will explore the use of type predicates, guards and exhaustive checking. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.
Node Congress 2024Node Congress 2024
83 min
Deep TypeScript Tips & Tricks
TypeScript has a powerful type system with all sorts of fancy features for representing wild and wacky JavaScript states. But the syntax to do so isn't always straightforward, and the error messages aren't always precise in telling you what's wrong. Let's dive into how many of TypeScript's more powerful features really work, what kinds of real-world problems they solve, and how to wrestle the type system into submission so you can write truly excellent TypeScript code.
TypeScript Congress 2023TypeScript Congress 2023
131 min
Practice TypeScript Techniques Building React Server Components App
In this hands-on workshop, Maurice will personally guide you through a series of exercises designed to empower you with a deep understanding of React Server Components and the power of TypeScript. Discover how to optimize your applications, improve performance, and unlock new possibilities.
During the workshop, you will:
- Maximize code maintainability and scalability with advanced TypeScript practices
- Unleash the performance benefits of React Server Components, surpassing traditional approaches
- Turbocharge your TypeScript with the power of Mapped Types
- Make your TypeScript types more secure with Opaque Types
- Explore the power of Template Literal Types when using Mapped Types
Maurice will virtually be by your side, offering comprehensive guidance and answering your questions as you navigate each exercise. By the end of the workshop, you'll have mastered React Server Components, armed with a newfound arsenal of TypeScript knowledge to supercharge your React applications.
Don't miss this opportunity to elevate your React expertise to new heights. Join our workshop and unlock the potential of React Server Components with TypeScript. Your apps will thank you.
TypeScript Congress 2022TypeScript Congress 2022
116 min
Advanced TypeScript types for fun and reliability
If you're looking to get the most out of TypeScript, this workshop is for you! In this interactive workshop, we will explore the use of advanced types to improve the safety and predictability of your TypeScript code. You will learn when to use types like unknown or never. We will explore the use of type predicates, guards and exhaustive checking to make your TypeScript code more reliable both at compile and run-time. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.
Are you familiar with the basics of TypeScript and want to dive deeper? Then please join me with your laptop in this advanced and interactive workshop to learn all these topics and more.
You can find the slides, with links, here: http://theproblemsolver.nl/docs/ts-advanced-workshop.pdf
And the repository we will be using is here: https://github.com/mauricedb/ts-advanced
TestJS Summit 2023TestJS Summit 2023
78 min
Mastering Node.js Test Runner
Node.js test runner is modern, fast, and doesn't require additional libraries, but understanding and using it well can be tricky. You will learn how to use Node.js test runner to its full potential. We'll show you how it compares to other tools, how to set it up, and how to run your tests effectively. During the workshop, we'll do exercises to help you get comfortable with filtering, using native assertions, running tests in parallel, using CLI, and more. We'll also talk about working with TypeScript, making custom reports, and code coverage.