Everyday TypeScript: Type Intersections

• This course covers TypeScript types that you'll use in everyday application programming. It assumes that you already understand the basics of TypeScript, including basic generics, literal types, and type narrowing. If you're brand new to TypeScript, or to static types in general, then you may want to start with our TypeScript Basics course instead.

• TypeScript allows us to define types that must match two other types simultaneously. For example, we might have a type HasEmail that requires an email field, and a type CanBeAdmin that requires an admin flag. We can combine them into a User type that has both an email and an admin flag.

• The syntax T1 & T2 means "an object with all of the properties from both T1 and T2."

• (One of the code examples below causes a type error. When that happens anywhere in this course, you can answer with "type error".)

• >

  type HasEmail = {
    email: string
  };
  type CanBeAdmin = {
    admin: boolean
  };
  type User = HasEmail & CanBeAdmin;
• Note: this code example reuses elements (variables, etc.) defined in earlier examples.

  >

  let amir: User = {
    email: 'amir@example.com',
    admin: true,
  };
  amir.email;

  Result:

  'amir@example.com'
• Note: this code example reuses elements (variables, etc.) defined in earlier examples.

  >

  let amir: User = {
    email: 'amir@example.com',
  };
  amir.email;

  Result:

  type error: Type '{ email: string; }' is not assignable to type 'User'.
    Property 'admin' is missing in type '{ email: string; }' but required in type 'CanBeAdmin'.

• Types defined as Type1 & Type2 are called intersection types.

• We can always narrow an intersection back to one of its parts. For example, we can narrow a User back to a HasEmail. However, from that point forward we only have a HasEmail. Any fields that came from other parts of the User won't be accessible.

• Note: this code example reuses elements (variables, etc.) defined in earlier examples.

  >

  let amir: User = {
    email: 'amir@example.com',
    admin: true,
  };
• Note: this code example reuses elements (variables, etc.) defined in earlier examples.

  >

  function extractEmail({email}: HasEmail): string {
    return email;
  }
  extractEmail(amir);

  Result:

  'amir@example.com'
• Note: this code example reuses elements (variables, etc.) defined in earlier examples.

  >

  function extractAdmin(hasEmail: HasEmail): boolean {
    return hasEmail.admin;
  }
  extractAdmin(amir);

  Result:

  type error: Property 'admin' does not exist on type 'HasEmail'.