Funktion, die einem Objekt eine Eigenschaft hinzufügt

Question

Was wäre der richtige/bevorzugte Weg, Flussanmerkungen zu einer Funktion wie dieser hinzuzufügen?

function addBar(foo) { 
    foo.bar = 10 
    return foo 
} 

Lassen Sie uns sagen, dass ich die folgenden Typen haben:

type Foo = { foo: string } 
type FooBar = { foo: string, bar: number } 

und ich würde die Funktion in einem Foo nehmen möchten und eine FooBar zurück.

Bisher sind die besten Lösungen, die ich habe kommen mit sind dies:

function addBar(foo: Foo): FooBar { 
    const fooBar: FooBar = { ...foo, bar: 10 } 
    return fooBar 
} 

, die eine Kopie des Objekts erstellt und stützt sich auf die Erholung Eigenschaften. Oder das:

function addBar(foo: Foo): FooBar { 
    const fooBar: FooBar = (foo: any) 
    fooBar.bar = 10 
    return fooBar 
} 

, die einige hacky Casting erfordert.

In der Theorie sollte dies ohne Gießen oder Kopieren erreichbar sein. Kann die dynamische Analyse von Flow dies erkennen? Und sind andere Ansätze für diesen Anwendungsfall besser geeignet?

Answer 1

Ihr Problem ist mit dem foo Objektliteral, das keine zusätzlichen Mutationen unterstützt, wenn es nicht speziell gekennzeichnet ist.

Ihrem Beispiel zu vereinfachen, noch weiter, würde die folgenden ein Fluss Fehler werfen:

const hello = { hello: 'hello' }; 
hello.world = 'world'; 

18: hello.world = 'world'; 
     ^property `world`. Property not found in 
18: hello.world = 'world'; 
    ^object literal 

Allerdings würde die folgende nicht:

const hello: { hello: 'hello', [someOtherKey: string]: mixed }; 
hello.world = 'world'; 

// no errors! 

jedoch, so dass "property variance" effektiv hello entsiegelt und verwandelt es in eine Map, die zu Silent-Typ-Fehlern geöffnet wird, wenn Sie nicht möchten, dass eine Eigenschaft hinzugefügt wird.

Eine weitere einfache Möglichkeit, Ihre Methode zu annotieren wäre folgendes zu tun:

type FooBarType = { 
    foo: mixed, 
    bar?: number 
} 

function addBar(foo: FooBarType): FooBarType { 
    foo.bar = 10; 
    return foo; 
} 

addBar({ foo: 'hello' }); // no errors! 

Dies stellt sicher, dass die Art der foo unterstützen kann mit Bar hinzugefügt. Dies ist nicht das Gleiche wie tatsächlich die Eigenschaft. Im Allgemeinen möchten Sie nicht, dass Ihre Methoden Objekttypen umgehen, um ihre Eigenschaften zu ändern. Definieren Sie das Objekt vielmehr so, dass es die Mutationen unterstützen kann. Andernfalls verwenden Sie einen funktionalen Ansatz und geben ein neues Objekt zurück. Das Folgende würde Ihnen erlauben, foo versiegelt zu halten: