我试图输入反应组件的参数时出错.我想严格键入组件的道具和状态的属性,但是当我使用Redux时,我将mapStateToProps传递给connect函数时出错.

这是组件代码:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import FileExplorer from '../components/file-explorer/file-explorer';
import { ISideMenu, ISideMenuState } from '../models/interfaces/side-menu';

    class SideMenu extends Component<ISideMenu, ISideMenuState> {
        render() {
            return (
                <div>
                    {this.props.fileExplorerInfo !== null &&
                        <FileExplorer fileExplorerDirectory={this.props.fileExplorerInfo.fileExplorerDirectory}/>
                    }
                </div>
            );
        }
    }

    const mapStateToProps = (state: ISideMenuState) => {
        return {
            fileExplorerInfo: state.fileExplorer
        };
    };

    export default connect<ISideMenu, null, ISideMenuState>(mapStateToProps)(SideMenu);

所以错误发生在这一行:

export default connect<ISideMenu, …

DefinitelyTyped提供了一个下划线声明文件,它定义了一个List接口,并在代码中大量使用它.

// Common interface between Arrays and jQuery objects
interface List {
    [index: number]: any;
    length: number;
}

interface UnderscoreStatic {
    sortBy(list: List, iterator?: any, context?: any): any;
    groupBy(list: List, iterator: any): any;
    countBy(list: List, iterator: any): any;
}

我正在尝试使用该countBy功能:

// <reference path="../DefinitelyTyped/underscore/underscore.d.ts" />

declare var _: UnderscoreStatic;

_.countBy([1,2,3], function(item) {
    return item%2;
});

当我编译该文件时,它会抛出错误:

> tsc commons.ts

> E:/commons.ts(5,0): Supplied parameters do not match any signature of call target:
    Could not apply type 'List' …

我在React和Redux中编写了一个单页面应用程序(带有Node.js后端).

我想实现基于角色的访问控制,并希望控制应用程序的某些部分(或子部分)的显示.

我将从Node.js获取权限列表,这只是具有这种结构的对象:

{
  users: 'read',
  models: 'write',
  ...
  dictionaries: 'none',
}

密钥是受保护的资源,

值是该资源的用户权限(之一:none,read,write).

我将它存储到redux状态.看起来很简单.

none权限将由react-router路由onEnter/onChange钩子或redux-auth-wrapper.看起来也很容易.

但是,将read/write权限应用于任何组件视图的最佳方法是什么(例如,如果用户有{ models: 'read' }权限,则隐藏模型组件中的编辑按钮).

我找到了这个解决方案,并为我的任务改变了一点:

class Check extends React.Component {
  static propTypes = {
    resource: React.PropTypes.string.isRequired,
    permission: React.PropTypes.oneOf(['read', 'write']),
    userPermissions: React.PropTypes.object,
  };

  // Checks that user permission for resource is the same or greater than required
  allowed() {
    const permissions = ['read', 'write']; …

我想使用DatePicker使用redux表单选择日期.我创造了这个:

import React from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

export default field => (
  <div>
    <DatePicker
      onChange={field.value}
      selected={field.value}
      isClearable={true}
    >
      {field.children}
    </DatePicker>
    {field.meta.touched && field.meta.error &&
    <span className="error">{field.meta.error}</span>}
  </div>
);
<div className="form-group">
        <div className="col-xs-12 col-sm-3 ">
          <div className="label" htmlFor="date-to">DATE TO</div>{' '}
          <Field
            id="date-to"
            name="date-to"
            component={DateInput}
          />
        </div>
  </div>

但它没有返回任何值,并且没有在字段中显示日期我该怎么办？

正在寻找多年,没有找到任何值得的东西.

当我使用flow时,我可以简单地说:

import { type FieldProps, FormProps } from 'redux-form';

是否有类似(并且那么简单)的方法在typescript中正确设置道具到redux形式？

文档没有说什么关于打字稿,只有一个页面用于Flow打字.

但是,我发现我可以propTypes从redux-form 导入类似的东西:

import { reduxForm, propTypes } from 'redux-form'

但是 - redux-form没有像propTypes导出的那样,所以docs有点不赞成.

链接:https://redux-form.com/7.2.1/docs/api/props.md/

提前感谢您提供任何帮助.

tl;dr class RegistrationForm extends React.PureComponent<any> {
                                      what to drop here ^^^^^                                            

我正在开发一个 TypeScript 项目（针对浏览器），我们在其中使用带有 DefinelyTyped 的类型定义的第三方库。在库的类型定义中，其类声明如下：

declare namespace foo {
    export class Bar { ... }
    export class Baz { ... }
}

Bar然而，库的实际实现将类放置在全局范围内，以便可以仅通过和来引用它们Baz。因此，usingfoo.Bar会编译，但在运行时不起作用。

为了使其工作，我想以某种方式将所有导出foo引入全局命名空间。我找不到任何明显的方法来做到这一点，所以到目前为止我最好的尝试是制作一个环境声明文件说

declare type Bar = foo.Bar;
declare const Bar: typeof foo.Bar;

并对 中的每个导出类重复此操作foo。这允许我实例化该类，将其用作类型，并调用它可能具有的任何静态函数，但为所有导出类型声明两次相同的名称并不理想。实现同样目标的更短方法似乎是

declare class Bar extends foo.Bar {}

但现在我不必要地延长课程，而且意图不明确。

有没有更好的方法来别名/提取foo全局变量的导出类型？

我正在检查的Typescript定义文件（DefinitelyTyped）中，有一个接口，一个函数和一个名称空间，它们的名称完全相同：twilio。

这是示例，来自文件的前几行：

declare interface twilio {
  (sid?: string, tkn?: string, options?: twilio.ClientOptions): twilio.RestClient
}

declare function twilio(sid?: string, tkn?: string, options?: twilio.ClientOptions): twilio.RestClient;

declare namespace twilio {
 ....

然后一直到文件底部

export = twilio;

那么出口哪一个呢？接口？功能？命名空间？这有什么意义？您如何在相同的作用域/名称空间中为完全相同的nae命名多个事物？

可能有人明确规定之间的差异DefinitelyTyped和typings？两者都为现有的JS库提供TS定义，但是我不确定它们之间的区别。

在类似于以下的代码中，我正在获取Type { foo: number } has no properties in common with type 'Partial<Child> & Attributes'调用的第二个参数cloneElement，但我不明白为什么......在我看来，正在Partial<Child>获取正确形状的道具，但 TypeScript 不同意。

这是来自https://github.com/DefinitelyTyped/DefinitelyTyped的库版本

"@types/react": "16.3.14",
"@types/react-dom": "16.0.5",

这是例子：

import * as React from "react";
interface Props {
  foo: number;
}
class Child extends React.Component<Props> {
    public render(): React.ReactNode {
        return <span>{this.props.foo}</span>;
    }
}
class Parent extends React.Component<Props> {
    public render(): React.ReactNode {
        return React.Children.map(this.props.children, (child: JSX.Element) => this.cloneChild(child));
    }

    public cloneChild(child: React.ReactElement<Child>): React.ReactElement<Child> {
        const newProps = { …

我有来自npm/@ types类型的javascript库.

我需要对@types进行两次修复,仅适用于我的应用程序,因此我无法将它们合并到DefinitelyTyped存储库中.

我需要:

1. 从界面中删除一个字段.例:

   // before changes:
   interface A {
           a?:string;
           b?:string;
           c?:string;
   }
   
   // after changes:
   interface A {
           a?:string;
           c?:string;
   }
   

   Run Code Online (Sandbox Code Playgroud)

2. 在界面中的一个字段中添加更多类型.例:

   // before changes:
   interface B {
           a?: C;
   }
   
   // after changes:
   interface B {
           a?: C | D;
   }
   

   Run Code Online (Sandbox Code Playgroud)

另外,我仍然想从外部存储库下载主要的@types定义.

实现这一目标的最佳方法是什么？

我想用材质 ui ButtonGroup 创建一个递增/递减按钮。按钮起初就像这个图像。

当用户单击按钮时，ButtonGroup 的第二部分将显示（如下图所示）。

我怎样才能做到这一点？请帮忙。

提前致谢。

代码

import React from "react";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";
import ButtonGroup from "@material-ui/core/ButtonGroup";

class GroupedButtons extends React.Component {
  state = { counter: 0 };

  handleIncrement = () => {
    this.setState(state => ({ counter: state.counter + 1 }));
  };

  handleDecrement = () => {
    this.setState(state => ({ counter: state.counter - 1 }));
  };
  render() {
    const Btn = (
     <>
      <Button disabled>{this.state.counter}</Button>
      <Button onClick={this.handleDecrement}>-</Button>
     </>
    );

    return (
      <ButtonGroup …