仅在新代码中出现 Typescript 和 eslint 语法错误 - ':' expected.ts(1005)

Question

我在一个大型的 react-typescript 项目中工作，一个新的奇怪问题开始出现。我开始到处看到假定的语法错误，但只出现在我编写的新代码中。比如我在写一个新的组件：

import React from 'react';

interface Props {
  new: string;
  old: string;
}

export const ChangeDetail: React.FC<Props> = ({ new, old}: Props) => {
  return null;
}

但是我收到错误 ':' expected.ts(1005):

据我所知，这里没有语法错误。在几个月前写的一个旧组件中，我有完全相同的语法，但没有错误：

const DateTime: React.FC<Props> = ({
  date,
  timezone = true,
  format
}: Props) => {
  const tz = moment.tz.guess();

  return (
    <Moment
      format={format ?? `MMMM Do YYYY, H:mm:ss ${timezone ? "zz" : ""}`}
      tz={timezone ? tz : undefined}
    >
      {date}
    </Moment>
  );
};

我注意到对于我正在编写的新代码，我从 typescript 或 eslint 中得到了非常奇怪的语法错误。另一个例子：

同样，据我所知，这里没有语法错误。

我觉得这是打字稿、eslint 或我的环境中的某个问题。我的 package.json 列出了以下可能相关的软件包：

    "typescript": "^4.3.5",
    "@types/eslint": "^7.28.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-cypress": "^2.12.1",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.26.0",
    "@craco/craco": "^6.3.0",
    "react-scripts": "^4.0.3",

在我的.eslint.rc:

  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 7,
    project: "tsconfig.json",
    tsconfigRootDir: __dirname,
    sourceType: "module"
  },

当我键入 which tsc 或 which typescript 时，都找不到（这很好，因为我不希望全局安装的打字稿与本项目中使用的本地打字稿冲突）。

这让我停滞不前 - 我该如何开始调试它？我尝试重新启动和更新 vscode（版本 1.62.3），以及重新启动我的机器。我的 linter/compiler 在新代码中发现语法错误可能出了什么问题，那里有 none?

Answer 1

new是TypeScript中的保留关键字，不能作为变量名使用。

Reference.

仅在新代码中出现 Typescript 和 eslint 语法错误 - ':' expected.ts(1005)

Typescript and eslint syntax errors in new code only - ':' expected.ts(1005)

syntax-error

typescript

reactjs

eslint

visual-studio-code