Wie kann ich eine Objekteigenschaft in TypeScript umwandeln?

Question

Ich habe ein einfaches Problem, ich benutze TypeScript mit React und es funktioniert so gut, aber ich habe in diesem ein kleines Problem gerannt. Ich bin neu in TypeScript aber ich liebe es so weit, wirklich erinnert an Go

Ich versuche, einen Stil zu erstellen und es in den Stil als ein Objekt z.

import * as React from 'react' 
import * as ReactDOM from 'react-dom' 

export interface NavbarProps { 
    title: string; 
} 

export class Navbar extends React.Component<NavbarProps, undefined> { 
    render() { 
    return (
     <div style={styles.navbar}> 
     <div style={styles.navbarTitle}> 
      <h1 style={styles.navbarTitle}>{ this.props.title }</h1> 
     </div> 
     </div> 
    ) 
    } 
} 

// Lets it compile properly 
let spaceBetween: "space-between" = "space-between"; 

let styles = { 
    navbar: { 
    display: 'flex', 
    flexDirection: 'row', 
    paddingLeft: '10px', 
    paddingRight: '10px', 
    height: '50px', 
    color: 'white', 
    backgroundColor: "#333", 
    alignItems: "center", 
    justifyContent: spaceBetween 
    }, 
    navbarTitle: { 
    margin: 0, 
    padding: 0, 
    letterSpacing: "1px" 
    } 
}; 

wenn ich die let spaceBetween: "space-between" = "space-between" entfernen und versuchen, nur { justifyContent: "space-between" } bekomme ich einen Fehler, da nach den Typisierungen für die CSSProperties Interface es justifyContent so sein erklärt:

/** 
     * Defines how the browser distributes space between and around flex items 
     * along the main-axis of their container. 
     */ 
     justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around"; 

so wie kann ich inline der justifyContent, anstatt eine Variable nur für das Casting erstellen zu müssen.

Danke.

tatsächliche Fehler

src\public\views\components\navbar\navbar.tsx(11,12): error TS2322: Type '{ display: string; flexDirection: string; paddi 
    Types of property 'justifyContent' are incompatible. 
    Type 'string' is not assignable to type '"center" | "flex-start" | "flex-end" | "space-between" | "space-around"'. 

Answer 1

Sie haben für styles.navbar, so etwas wie

let styles = { 
    navbar: { 
    display: 'flex', 
    flexDirection: 'row', 
    paddingLeft: '10px', 
    paddingRight: '10px', 
    height: '50px', 
    color: 'white', 
    backgroundColor: "#333", 
    alignItems: "center", 
    justifyContent: "space-between" 
    } as ViewStyle, //<= here 
... 
} 

Answer 2

die richtige Art zu spezifizieren Wenn Sie React wie folgt importieren:

import * as React from "react"

können Sie mach was g wie die folgenden:

let styles = { 
    navbar: { 
     display: 'flex', 
     flexDirection: 'row', 
     paddingLeft: '10px', 
     paddingRight: '10px', 
     height: '50px', 
     color: 'white', 
     backgroundColor: "#333", 
     alignItems: "center", 
     justifyContent: "space-between" 
    } as React.CSSProperties 
} 

let styles: { [name: string]: React.CSSProperties } = { 
    navbar: { 
     display: 'flex', 
     flexDirection: 'row', 
     paddingLeft: '10px', 
     paddingRight: '10px', 
     height: '50px', 
     color: 'white', 
     backgroundColor: "#333", 
     alignItems: "center", 
     justifyContent: "space-between" 
    } 
} 

let styles = { 
    navbar: { 
     display: 'flex', 
     flexDirection: 'row' as "row", 
     paddingLeft: '10px', 
     paddingRight: '10px', 
     height: '50px', 
     color: 'white', 
     backgroundColor: "#333", 
     alignItems: "center" as "center", 
     justifyContent: "space-between" as "space-between" 
    } 
}