I have been working on an app that retrieves weather data based on a user's location, and everything seems to be functioning correctly. However, during the coding process, I keep encountering errors that are being flagged, even though the code runs smoothly.
Below is the snippet of code:
function array_to_comma_sep(array: Array<string>) {
let output: string = String();
for (let ele of array) {
output += ele + ",";
}
return output.substring(0, output.length-1);
}
class Feature {
name: string;
unit: string;
constructor(name: string, unit: string) {
this.name = name;
this.unit = unit;
}
}
type GeoLocation = {
latitude: number;
longitude: number;
}
async function getWeatherData() {
const HOURLY_FEATURES: Array<Feature> = [
new Feature("temperature_2m", "celsius"),
new Feature("relativehumidity_2m", "%"),
new Feature("apparent_temperature", "celsius"),
new Feature("precipitation_probability", "%"),
new Feature("precipitation", "mm"),
new Feature("snow_depth", "m"),
new Feature("visibility", "m")
]
// retrieves user's IP address
let ip_address: string;
await $.getJSON("https://api.ipify.org?format=json", data => {
ip_address = data.ip;
});
// retrieves user's location
let location: GeoLocation;
await $.get(`https://ipapi.co/${ip_address}/latlong/`, data => {
let [lat, long]: Array<number> = data.split(",").map((num: string) => { return parseFloat(num); });
location = {
latitude: lat,
longitude: long
}
});
// fetches weather information
let hourly_features = array_to_comma_sep(HOURLY_FEATURES.map((feat: Feature) => { return feat.name }));
await $.getJSON(`https://api.open-meteo.com/v1/forecast?latitude=${location.latitude}&longitude=${location.longitude}&hourly=${hourly_features}`, data => {
console.log(data);
})
}
getWeatherData();
The challenge arises from the VS Code's syntax highlighting - there is a warning message on the line with
await $.getJSON("https://api.ipify.org?format=json", data => {However, despite this warning, the app's performance remains unaffected. I can see the API response in the console as expected.
Could it be that the TypeScript extension is failing to recognize that the value will be assigned later due to the async function, or am I overlooking something? This is my first encounter with TypeScript.
Moreover, here is the snippet of my HTML code:
<!DOCTYPE html>
<head>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="app.tsx" type="text/babel"></script>
</head>
<body>
<div id="container"></div>
</body>