Question

我有一个简单的问题，我TypeScript与React一起使用，到目前为止效果很好，但我遇到了这个小问题。我是TypeScript的新手，但到目前为止还很喜欢它，真的让人想起Go

我试图创建一个样式并将其作为对象传递给样式，例如。

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

如果我删除了let spaceBetween: "space-between" = "space-between"并尝试执行{ justifyContent: "space-between" }我收到错误，因为根据CSSProperties Interface的类型，它声明justifyContent如下：

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

所以如何内联justifyContent，而不是仅仅为了转换而创建一个变量。

感谢。

实际错误

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

您必须为styles.navbar指定正确的类型，例如

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

如果您导入React，请执行以下操作：

import * as React from "react"

您可以执行以下操作：

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

如何在TypeScript中转换对象属性？

2 个答案: