I have a simple typescript app using vite that is supposed to rad a geojson and display it as a map. Simple enough, but as I'm not extremely proficient with typescript, I ran into a problem:
//importing the file as a string, I declared a module that types it correctly
import worldGeoJson from '@/assets/world.geojson?raw'
const worldJson = JSON.parse(worldGeoJson)
Now, the problem I ran into is that worldJson has now type any
. So, I installed @types/geojson
and tried to simply assign it like:
const worldJson: GeoJSON = JSON.parse(worldGeoJson)
but now I'm getting a message of Cannot use namespace 'GeoJSON' as a type.
- fair enough, but I have failed in my attempts of casting it into a type. I guess I could import all types inside geojson type file and reconstruct it myself but I have a feeling it would defeat the purpose of the exercise.
You can also import types, including named exported types, in the same manner as usual JS modules:
// Import the named export "FeatureCollection" from @types/geojson
import type { FeatureCollection } from "geojson";
// JSON.parse has no way to know the resulting type,
// so we have to specify it with a type assertion
const worldJson = JSON.parse("string GeoJSON FeatureCollection") as FeatureCollection;
// ^? FeatureCollection<Geometry, GeoJsonProperties>
// Then we can safely use the object
worldJson.features; // Okay
// ^? Feature<Geometry, GeoJsonProperties>[]