付費限定文章

Unions and Intersection Types

So far, the handbook has covered types which are atomic objects. However, 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.

Intersection and Union types are one of the ways in which you can compose types.

Union Types

Occasionally, you’ll run into a library that expects a parameter to be either a number or a string. For instance, take the following function:

/** * Takes a string and adds "padding" to the left. * If 'padding' is a string, then 'padding' is appended to the left side. * If 'padding' is a number, then that number of spaces is added to the left side. */function padLeft(value: string, padding: any) {  if (typeof padding === "number") {    return Array(padding + 1).join(" ") + value;  }  if (typeof padding === "string") {    return padding + value;  }  throw new Error(`Expected string or number, got '${typeof padding}'.`);} padLeft("Hello world", 4); // returns "    Hello world"Try

The problem with padLeft in the above example is that its padding parameter is typed as any. That means that we can call it with an argument that’s neither a number nor a string, but TypeScript will be okay with it.

// passes at compile time, fails at runtime.let indentedString = padLeft("Hello world", true);Try

In traditional object-oriented code, we might abstract over the two types by creating a hierarchy of types. While this is much more explicit, it’s also a little bit overkill. One of the nice things about the original version of padLeft was that we were able to just pass in primitives. That meant that usage was simple and concise. This 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:

/** * Takes a string and adds "padding" to the left. * If 'padding' is a string, then 'padding' is appended to the left side. * If 'padding' is a number, then that number of spaces is added to the left side. */function padLeft(value: string, padding: string | number) {  // ...} let indentedString = padLeft("Hello world", true);Argument of type 'boolean' is not assignable to parameter of type 'string | number'.Argument of type 'boolean' is not assignable to parameter of type 'string | number'.Try

A union type describes a value that can be one of several types. We 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.

Unions with Common Fields

If we have a value that is a union type, we can only access members that are common to all types in the union.