So far, the handbook has covered types which are atomic objects.\nHowever, as you model more types you find yourself looking for tools which let you compose or combine existing types instead of creating them from scratch.
\nIntersection and Union types are one of the ways in which you can compose types.
\nOccasionally, you’ll run into a library that expects a parameter to be either a number or a string.\nFor instance, take the following function:
\nts/**\n * Takes a string and adds \"padding\" to the left.\n * If 'padding' is a string, then 'padding' is appended to the left side.\n * If 'padding' is a number, then that number of spaces is added to the left side.\n */\nfunction padLeft(value: string, padding: any) {\n if (typeof padding === \"number\") {\n return Array(padding + 1).join(\" \") + value;\n }\n if (typeof padding === \"string\") {\n return padding + value;\n }\n throw new Error(`Expected string or number, got '${padding}'.`);\n}\n\npadLeft(\"Hello world\", 4); // returns \" Hello world\"
The problem with padLeft is that its padding parameter is typed as any.\nThat means that we can call it with an argument that’s neither a number nor a string, but TypeScript will be okay with it.
\nts// passes at compile time, fails at runtime.\nlet indentedString = padLeft(\"Hello world\", true);
In traditional object-oriented code, we might abstract over the two types by creating a hierarchy of types.\nWhile this is much more explicit, it’s also a little bit overkill.\nOne of the nice things about the original version of padLeft was that we were able to just pass in primitives.\nThat meant that usage was simple and concise.\nThis new approach also wouldn’t help if we were just trying to use a function that already exists elsewhere.
Instead of any, we can use a union type for the padding parameter:
\nts/**\n * Takes a string and adds \"padding\" to the left.\n * If 'padding' is a string, then 'padding' is appended to the left side.\n * If 'padding' is a number, then that number of spaces is added to the left side.\n */\nfunction padLeft(value: string, padding: string | number) {\n // ...\n}\n\nlet indentedString = padLeft(\"Hello world\", true); // errors during compilation
A union type describes a value that can be one of several types.\nWe use the vertical bar (|) to separate each type, so number | string | boolean is the type of a value that can be a number, a string, or a boolean.
If we have a value that has a union type, we can only access members that are common to all types in the union.
\n\ntsinterface Bird {\n fly();\n layEggs();\n}\n\ninterface Fish {\n swim();\n layEggs();\n}\n\nfunction getSmallPet(): Fish | Bird {\n // ...\n}\n\nlet pet = getSmallPet();\npet.layEggs(); // okay\npet.swim(); // errors
Union types can be a bit tricky here, but it just takes a bit of intuition to get used to.\nIf a value has the type A | B, we only know for certain that it has members that both A and B have.\nIn this example, Bird has a member named fly.\nWe can’t be sure whether a variable typed as Bird | Fish has a fly method.\nIf the variable is really a Fish at runtime, then calling pet.fly() will fail.
Intersection types are closely related to union types, but they are used very differently.\nAn intersection type combines multiple types into one.\nThis allows you to add together existing types to get a single type that has all the features you need.\nFor example, Person & Serializable & Loggable is a type which is all of Person and Serializable and Loggable.\nThat means an object of this type will have all members of all three types.
Here’s a simple example that shows how to create a mixin:
\n","headings":[{"value":"Union Types","depth":1},{"value":"Intersection Types","depth":1}],"frontmatter":{"permalink":"/docs/handbook/unions-and-intersections.html","title":"Unions and Intersection Types"}}},"pageContext":{"slug":"/docs/handbook/unions-and-intersections.html","isOldHandbook":true}}}tsfunction extend<First, Second>(first: First, second: Second): First & Second {\n const result: Partial<First & Second> = {};\n for (const prop in first) {\n if (first.hasOwnProperty(prop)) {\n (result as First)[prop] = first[prop];\n }\n }\n for (const prop in second) {\n if (second.hasOwnProperty(prop)) {\n (result as Second)[prop] = second[prop];\n }\n }\n return result as First & Second;\n}\n\nclass Person {\n constructor(public name: string) {}\n}\n\ninterface Loggable {\n log(name: string): void;\n}\n\nclass ConsoleLogger implements Loggable {\n log(name) {\n console.log(`Hello, I'm ${name}.`);\n }\n}\n\nconst jim = extend(new Person(\"Jim\"), ConsoleLogger.prototype);\njim.log(jim.name);