"of" is preventing TypeScript from highlighting mistakes when returning my object

Question

While creating some mock data I've noticed that, when returning an observable of any custom object, TypeScript is not telling me anything if I enter a property that is not part of the object.

My object:

export interface ValidationObject {
  valid: boolean;
  message?: {
    errorCode: string;
    translatedErrors: {
      [key: string]: string;
    };
  };
}

When I return a ValidationObject object directly with a wrong property like this:

  public returnValidationFn(): ValidationObject {
    return {
      valid: true,
      unknownProperty: 'test'
    }
  }

TypeScript is highlighting the unknownProperty, saying TS2322: Type '{ valid: true; unknownProperty: string; }' is not assignable to type 'ValidationObject'., which is what I want.

But if I have a case where I have to return an Observable of my ValidationObject and, by mistake, add some wrong property like this:

  public returnValidationFn(): Observable<ValidationObject> {
    return of({
      valid: true,
      unknownProperty: 'test'
    })
  }

TypeScript isn't complaining about anything. Surely it is something that has to do with the operator of but I was wondering if someone has an explanation for this?