代码之家 › 专栏 › 技术社区 › jcubic

命名空间声明不能位于与其合并的类或函数之前

typescript reactjs

3

jcubic · 技术社区 · 7 年前

我有一个基于 react-redux-typescript-boilerplate

import * as React from 'react';
import { connect } from 'react-redux';

import { RootState } from 'app/reducers';

export namespace LasarTitle {
  export interface Props {
    title: string;
    loading: boolean;
  };
};

@connect(
  (state: RootState): LasarTitle.Props => {
    return { title: state.title, loading: state.loading };
  },
  () => { }
)
export class LasarTitle extends React.Component<LasarTitle.Props> {
  static defaultProps: Partial<LasarTitle.Props> = {
    title: ''
  };
  constructor(props: LasarTitle.Props, context?: any) {
    super(props, context);
  }
  render() {
    const title = this.props.loading ? 'loading...' : this.props.title;
    return (
      <div>
        <input readOnly={true} value={title} />
      </div>
    );
  }
}

这和 containers/App/index.tsx 它在具有相同名称的组件上具有名称空间和连接。

1 回复 | 直到 7 年前

1

6

Titian Cernicova-Dragomir 7 年前

这个错误非常明显。您只需要将名称空间声明移动到类之后。

import * as React from 'react';
import { connect } from 'react-redux';

import { RootState } from 'app/reducers';


@connect(
  (state: RootState): LasarTitle.Props => {
    return { title: state.title, loading: state.loading };
  },
  () => { }
)
export class LasarTitle extends React.Component<LasarTitle.Props> {
  static defaultProps: Partial<LasarTitle.Props> = {
    title: ''
  };
  constructor(props: LasarTitle.Props, context?: any) {
    super(props, context);
  }
  render() {
    const title = this.props.loading ? 'loading...' : this.props.title;
    return (
      <div>
        <input readOnly={true} value={title} />
      </div>
    );
  }
}

export namespace LasarTitle {
  export interface Props {
    title: string;
    loading: boolean;
  };
}

由于名称空间和类具有相同的名称,因此将合并它们。合并将要做的事情之一是,在运行时只有一个对象表示组合的类名称空间。出于实现的原因,这种合并要求首先创建类对象,然后向其中添加名称空间成员。

编辑

; 在接口的末尾,将被传输到空的JS语句,从而强制执行该规则。

更好的解决方案是移除 ;

import * as React from 'react';
import { connect } from 'react-redux';

import { RootState } from 'app/reducers';

export namespace LasarTitle {
  export interface Props {
    title: string;
    loading: boolean;
  }
};

@connect(
  (state: RootState): LasarTitle.Props => {
    return { title: state.title, loading: state.loading };
  },
  () => { }
)
export class LasarTitle extends React.Component<LasarTitle.Props> {
  static defaultProps: Partial<LasarTitle.Props> = {
    title: ''
  };
  constructor(props: LasarTitle.Props, context?: any) {
    super(props, context);
  }
  render() {
    const title = this.props.loading ? 'loading...' : this.props.title;
    return (
      <div>
        <input readOnly={true} value={title} />
      </div>
    );
  }
}