Question

我的代码有些麻烦。

import * as React from "react";

export interface SearchProductSate {
  [key: string]: string;
  Id: string;
  Name: string;
  Section: string;
  Domaine: string;
  IsActive: string;
}

export class SearchProductComponent extends React.Component<
  SearchProductProps,
  SearchProductSate
> {
    constructor(props: SearchProductProps) {
      super(props);
    }

  handleSelectChange(event: React.FormEvent<HTMLSelectElement>) {
    var safeSearchTypeValue: string = event.currentTarget.value;
    const name = event.currentTarget.name;

    const o = {} as SearchProductSate;
    o[name] = safeSearchTypeValue;

    this.setState(o);
  }
...
}

在VsCode中，我没有任何警告或错误。当我运行'npm run build'时，一切正常，但是当我运行'npm start'时，那是一团糟； o）。

我收到此错误消息：

Syntax error: ./SearchProductComponent.tsx: Unexpected token, expected ; (55:17)

  53 |     const name = event.currentTarget.name;
  54 | 
> 55 |     const o = {} as SearchProductSate;
     |                  ^
  56 |     o[name] = safeSearchTypeValue;
  57 | 
  58 |     this.setState(o);

如果我对演员表进行了注释，则该组件可以工作，但是在VsCode中，我在“ o [name] = safeSearchTypeValue;”上有错误

L'élément a implicitement un type 'any', car le type '{}' n'a aucune signature d'index.

我可以翻译的

The element was type 'any', because the type '{}' doesn't have any index signature

如何解决此问题以及如何避免将来遇到相同的问题？

Answer 1

您的界面指出，对象ID，名称，节等上必须存在以下字段。

然后，您尝试定义一个新的空白对象，并说它是由您的界面定义的。

如果您将必填字段添加到了要设置的空对象中，

 const o = {
      Id: '',
      Name: '',
      Section: '',
      etc...
 } as SearchProductSate;

或使用可选字段定义界面

 export interface SearchProductSate {
     [key: string]?: string;
     Id?: string;
     Name?: string;
     Section?: string;
     Domaine?: string;
     IsActive?: string;
 }

Answer 2

我们找到了为什么会有这些错误的原因。我们使用VsCode来自动在打字稿中验证我们的代码，但将webpack配置为使用babel-loader。

ReactJs TypeScript：语法错误：意外令牌，预期；

2 个答案: