Typescript 编译器给出“'type aliases' 只能在 .ts 文件中使用。” 在一个js文件中

Question

我最近将一个 react js 项目迁移到了一个带有 typescript 的 react js。 如您所知，typescript 接受 js 文件，所以我所做的就是将所有代码移动到 typescript react 应用程序中。 我还为我需要的每个库添加了类型。

我有一个名为 HeatLayer.js 的文件，它是 OpenGov 制作的 react-leaflet-heatmap 的修改版本。

当我在 react typescript 项目上执行 npm start 时，我收到此错误

'type aliases' can only be used in a .ts file.  TS8008

11 | import PropTypes from 'prop-types';
12 | 
13 | export type LngLat = {
   |             ^
14 |   lng: number;
15 |   lat: number;
16 | }

当我在 react js应用程序中执行npm start 时，一切都按预期工作。 这是 HeatLayer.js 文件：

https://github.com/OpenGov/react-leaflet-heatmap-layer/blob/master/src/HeatmapLayer.js

解决方案：

原来 Heatmalayer.js 是用 javascript + flow 制作的，而 typescript 编译器无法处理 flow。 所以我删除了所有使用它作为纯 javascript 文件的类型。 更好的解决方案是将其重构为 typescript，添加 typescript 语法和类型。

Answer 1

您正在尝试在 javascript 文件中使用类型。 错误是正确的，您应该将其设为打字稿文件。 将其更改为.ts 。 Typescript 允许使用 javascript 文件，但 javascript 文件不允许使用类型。 如果您愿意，您可以一个一个地隐藏文件。 只要确保你编译这些文件（通常通过tsc ）

---

对于您的编辑，您有几个问题：

updateHeatmapRadius(radius: number, blur: ?number): void {

由于错误指向问号?number不是有效类型。 如果你想显示一个可选的，你可以这样做

updateHeatmapRadius(radius: number, blur?: number): void {

现在，对于您的下一个问题，您正在尝试导入一个没有类型的 javascript 文件。 这将是转换为打字稿最令人沮丧的事情之一。 大多数流行的库都有类型文件。 你将不得不创建一个.d.ts文件来说明这个东西可以是任何东西。 最好，您实际上会输入文件以获得 Typescript 的所有优点。 或者你可以边走边做。 但是，如果您没有时间...我通常有一个名为declarations的文件夹，然后您可以在其中放置

simpleheat.d.ts

declare module 'simpleheat' {
  // typing module default export as `any` will allow you to access its members without compiler warning
  const simpleheat: any;
  export default simpleheat;
}

实际上，将其声明为unknown可能更好 - 但您可以阅读有关差异的信息。 any将使您以最快的速度启动和运行。