Блог

Недавно я перенес проект react js в react js с помощью typescript. Как вы знаете, typescript принимает файлы js, поэтому я перенес весь код в приложение typescript react. Также я добавил типы для каждой библиотеки, которая мне была нужна.

У меня есть этот файл с именем HeatLayer.js который является модифицированной версией react-leaflet-heatmap, созданной OpenGov.

Когда я запускаю npm в проекте react typescript, я получаю эту ошибку

 '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 | }
  

Когда я запускаю npm в приложении react js, все работает так, как ожидалось.
Это HeatLayer.js файл:

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

РЕШЕНИЕ:

Оказывается Heatmalayer.js был создан с помощью javascript flow, и компилятор typescript не может обработать flow. Поэтому я удалил все типы и использовал его как чистый файл javascript. Лучшим решением было бы преобразовать его в typescript, добавив синтаксис и типы typescript.

Вы пытаетесь использовать типы в файле javascript. Ошибка верна, вы должны создать файл typescript. Измените его на .ts . Typescript допускает файлы javascript, но файлы javascript не допускают типы. Вы можете скрывать файлы один за другим, если вы того пожелаете. Просто убедитесь, что вы скомпилировали эти файлы (обычно через tsc )

Для вашего редактирования у вас есть несколько проблем:

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

Поскольку ошибка указывает на вопросительный знак ?number , это недопустимый тип. Если вы пытаетесь показать необязательный, вы можете сделать это как

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

Теперь для вашей следующей проблемы вы пытаетесь импортировать файл javascript, у которого нет типов. Это будет одна из самых неприятных вещей при преобразовании в typescript. Большинство популярных библиотек имеют файлы типов. Вам нужно будет создать .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 это поможет вам быстрее всего начать работу.