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將使您以最快的速度啟動和運行。