使用Interface类型声明useState时出现Unexpected token错误求助

错误原因 #

你的代码里使用了TypeScript专属的interface语法和泛型<iData[]>，但当前文件是普通JavaScript（.js/.jsx）文件，JS引擎无法识别这些TS语法，因此抛出Unexpected token错误。

解决方案 #

方案1：切换为TypeScript文件（推荐）

将文件后缀从.js/.jsx改为.tsx，TypeScript编译器就能正确解析interface和泛型语法。修改后的完整代码如下：

import React, { useState } from 'react';
import DataGrid, { Scrolling, HeaderFilter, FilterRow, Pager, Selection } from 'devextreme-react/data-grid';
import 'devextreme/dist/css/dx.light.css';

const json = require('./json/tacticalplanning.json');

const columns = [
  { dataField: 'materialDescription', caption: 'Descripcion', width: 125 },
  { dataField: 'reference', caption: 'Referencia', width: 100 }
];
let columns2 = [];
let data = [];
let data2 = [];

interface iData {
  [key: string]: any
}

const [dataState, setDataState] = useState<iData[]>([]);

方案2：在JavaScript文件中使用替代写法

如果不想切换到TypeScript，移除interface声明，改用JSDoc注释标注类型，同时避免TS泛型语法：

import React, { useState } from 'react';
import DataGrid, { Scrolling, HeaderFilter, FilterRow, Pager, Selection } from 'devextreme-react/data-grid';
import 'devextreme/dist/css/dx.light.css';

const json = require('./json/tacticalplanning.json');

const columns = [
  { dataField: 'materialDescription', caption: 'Descripcion', width: 125 },
  { dataField: 'reference', caption: 'Referencia', width: 100 }
];
let columns2 = [];
let data = [];
let data2 = [];

/**
 * @typedef {Object} iData
 * @property {any} [key:string]
 */

/** @type {[iData[], React.Dispatch<React.SetStateAction<iData[]>>]} */
const [dataState, setDataState] = useState([]);

内容的提问来源于stack exchange，提问作者Mateo Zapata Echeverri