Sicherer Weg zum Extrahieren von Eigenschaftsnamen in TypeScript

Question

Ich bin auf der Suche nach einer Möglichkeit, einen Objekteigenschaftennamen mit Typchecking zu erhalten, der nach dem Refactoring mögliche Regressionen abfangen kann.

Hier ist ein Beispiel: Die Komponente, wo ich die Eigenschaftsnamen als Zeichenfolgen übergeben muss, und es wird gebrochen, wenn ich versuche, die Eigenschaftsnamen im Modell zu ändern.

interface User { 
    name: string; 
    email: string; 
} 

class View extends React.Component<any, User> { 

    constructor() { 
     super(); 
     this.state = { name: "name", email: "email" }; 
    } 

    private onChange = (e: React.FormEvent) => { 
     let target = e.target as HTMLInputElement; 
     this.state[target.id] = target.value; 
     this.setState(this.state); 
    } 

    public render() { 
     return (
     <form> 
      <input 
       id={"name"} 
       value={this.state.name} 
       onChange={this.onChange}/> 
      <input 
       id={"email"} 
       value={this.state.email} 
       onChange={this.onChange}/> 
      <input type="submit" value="Send" /> 
     </form> 
    ); 
    } 
} 

Ich würde mich freuen, wenn es eine nette Lösung zur Lösung dieses Problems gibt.

Answer 1

In TS 2.1 das keyof Schlüsselwort wurde eingeführt, die möglich, dies gemacht:

const propertyOf = <TObj>(name: keyof TObj) => name; 

oder

const propertyNamesOf = <TObj>() => (name: keyof TObj) => name; 

Diese können dann sein wie folgt verwendet:

propertyOf<MyObj>("myProperty"); 

oder

const myObjProperties = propertyNamesOf<MyObj>(); 
myObjProperties("myProperty"); 

Dies wird einen Fehler, wenn myProperty nicht eine Eigenschaft des Typs MyObj ist.

Answer 2

Im Moment gibt es nicht wirklich eine gute Möglichkeit, dies zu tun, aber es gibt derzeit einige offene Vorschläge zu Github (Siehe #1579, #394 und #1003).

Was Sie tun können, ist, was in this answer angezeigt wird -Wrap Verweis auf die Eigenschaft in einer Funktion, konvertieren Sie die Funktion in eine Zeichenfolge, extrahieren Sie dann den Namen der Eigenschaft aus der Zeichenfolge.

Hier ist eine Funktion zu tun, dass:

function getPropertyName(propertyFunction: Function) { 
    return /\.([^\.;]+);?\s*\}$/.exec(propertyFunction.toString())[1]; 
} 

es dann wie so verwenden:

// nameProperty will hold "name" 
const nameProperty = getPropertyName(() => this.state.name); 

Dies könnte nicht abhängig von arbeiten, wie der Code minimiert ist so nur für die aufpassen.

aktualisieren

Es ist sicherer, das bei der Kompilierung zu tun. Ich schrieb ts-nameof so ist dies möglich:

nameof<User>(s => s.name); 

Compiliert zu:

"name";