Skip to main content

Width Subtyping

It's safe to use an object with "extra" properties in a position that is annotated with a specific set of properties, if that object type is inexact.

1function func(obj: {foo: string, ...}) {2  // ...3}4
5func({6  foo: "test", // Works!7  bar: 42      // Works!8});

Within func, we know that obj has at least a property foo and the property access expression obj.foo will have type string.

This is a kind of subtyping commonly referred to as "width subtyping" because a type that is "wider" (i.e., has more properties) is a subtype of a narrower type.

So in the following example, obj2 is a subtype of obj1.

1let obj1: {foo: string, ...}  = {foo: 'test'};2let obj2 = {foo: 'test', bar: 42};3obj2 as {foo: string, ...};

However, it's often useful to know that a property is definitely absent.

1function func(obj: {foo: string, ...} | {bar: number, ...}) {2  if (obj.foo) {3    obj.foo as string; // Error!
4 }5}
3:5-3:11: Cannot cast `obj.foo` to string because property `foo` of unknown type [1] is incompatible with string [2]. [incompatible-cast]

The above code has a type error because Flow would also allow the call expression func({foo: 1, bar: 2}), because {foo: number, bar: number} is a subtype of {bar: number, ...}, one of the members of the parameter's union type.

For cases like this where it's useful to assert the absence of a property, You can use exact object types.

1function func(obj: {foo: string} | {bar: number}) {2  if (obj.foo) {3    obj.foo as string; // Works!4  }5}

Exact object types disable width subtyping, and do not allow additional properties to exist.

Using exact object types lets Flow know that no extra properties will exist at runtime, which allows refinements to get more specific.