反应 JSS 和打字稿

Question

我已经使用 React 一段时间了，现在我想切换到将 React 与 TypeScript 结合使用。然而，我已经习惯了 JSS 样式（通过 react-jss 包），我不明白我应该如何将它们与 TypeScript 一起使用。我还使用 classnames 包，有条件地分配多个 class 名称，并且我收到了 TypeSCript 错误。

这是我的 React 组件模板：

import React, { Component } from 'react';
import withStyles from 'react-jss';
import classNames from 'classnames';

const styles = theme => ({
});

class MyClass extends Component {
    render() {
        const { classes, className } = this.props;
        return (
            <div className={classNames({ [classes.root]: true, [className]: className})}>
            </div>
        );
    }
};

export default withStyles(styles)(MyClass);

我刚刚开始学习 TypeScript，所以我什至不确定我是否理解我遇到的错误。我如何在 TypeScript 中编写类似上面的内容？

更新

以下是我最终转换模板的方式：

import React from 'react';
import withStyles, { WithStylesProps }  from 'react-jss';
import classNames from 'classnames';

const styles = (theme: any) => ({
    root: {
    },
});

interface Props extends WithStylesProps<typeof styles> {
    className?: string,
}

interface State {
}

class Header extends React.Component<Props, State> {
    render() {
        const { classes, className } = this.props;
        return (
            <div className={classNames({ [classes.root as string]: true, [className as string]: className})}>
            </div>
        );
    }
};

export default withStyles(styles)(Header);

注意事项：

定义 styles 对象时，必须定义 render 方法 中引用的 classes 的任何成员 。如果没有 TypeScript，你可以摆脱 "using" 大量的 classes 并且不定义它们，就像占位符一样；使用 TypeScript，它们都必须存在；
在调用 classnames 函数时，必须键入所有键。如果它们来自可能为 null 或未定义的变量，您必须添加 as string，否则将它们转换为字符串.除此之外，className 属性的工作方式与没有 TypeScript 的情况相同。

Answer 1

使用 TypeScript，您需要定义道具，如 here 所示。如果你的 React 组件只需要 render 方法

也推荐使用函数组件

对于您的情况，代码应如下所示：

import React from 'react';
import withStyles, { WithStyles } from 'react-jss';
import classNames from 'classnames';

const styles = theme => ({
  root: {

  }
});

interface IMyClassProps extends WithStyles<typeof styles> {
  className: string;
}

const MyClass: React.FunctionComponent<IMyClassProps> = (props) => {

    const { classes, className } = props;
    return (
        <div className={classNames({ [classes.root]: true, [className]: className})}>
        </div>
    );
};

export default withStyles(styles)(MyClass);

反应 JSS 和打字稿

React JSS and TypeScript

typescript

reactjs

jss