Hvordan kan jeg caste en objekteiendom i TypeScript?

Jeg har et enkelt problem, jeg bruker TypeScript med React og det fungerer bra så langt, men jeg har støtt på dette ene lille problemet. Jeg er ny på TypeScript men liker det så langt, det minner meg virkelig om Go

Jeg prøver å lage en stil og sende den inn i stilen som et objekt, for eksempel.

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"
  }
};

hvis jeg fjerner let spaceBetween: "space-between"="space-between" og prøver å bare gjøre { justifyContent: "space-between" } får jeg en feil fordi ifølge typene for CSSProperties Interface erklærer den justifyContent slik:

/**
         * 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";

så hvordan kan jeg inline justifyContent i stedet for å måtte lage en variabel bare for typekasting.

Takk.

Faktisk feil

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"'.

Svar #1

Du må spesifisere riktig type for styles.navbar, noe sånt som

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
...
}

Svar #2

Hvis du importerer React på denne måten:

import * as React from "react"

Du kan gjøre noe som følgende:

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"
    }
}

Relaterte artikler