Блог

Ошибка машинописного текста:

Тип ‘(местоположение: Местоположение) => Обещание’ не может быть присвоено типу ‘(объект: Местоположение) =>> недействительно’. Типы параметров «местоположение» и «объект» несовместимы. В типе «Местоположение» отсутствуют следующие свойства типа «Местоположение»: штат, город

В основном, пользователь вводит данные в городе и штате, немного логики для анализа города и штата, затем отправленный пользовательский ввод передается из компонента формы в компонент приложения верхнего уровня, где есть запрос API get. Однако «fetchData» выдает ошибку, когда я передаю ее в качестве опоры для ввода погоды (компонент формы). И «obj», аргумент для «fetchData» выдает ошибку при вводе погоды (компонент формы) в нижней части «handleSubmit» при вызове. Не говоря уже о том, что onSumit внутри тега формы (не показан ниже) также выдает ошибку.

Вопрос — каков наилучший способ/поток/практика создания этих правильных «типов» и устранения ошибок?

• погода-входной файл.tsx

     import React, { FormEvent, useState } from 'react';
    import { useHistory } from 'react-router-dom';
    import '../styling/weather-input.css';
  
    type WeatherInputProps = {
      fetchData: (obj: Location) => void;
    }
  
    export const WeatherInput: React.FC<WeatherInputProps> = ({fetchData}) => {
      const [input, setInput] = useState('');
      const history = useHistory();
  
      // FormEvent (event handle type), <HTMLButtonElement> restrict to specific element (generic)
      const handleSubmit = (e: FormEvent<HTMLButtonElement>): void => {
        e.preventDefault();
        console.log(input)
        let words: string | string[] = input.replace(',', '')
        words = words.split(' ').reverse();
        let obj = {
          state: words[0],
          city: words.slice(1).reverse().join(' ')
        }
  
        if (obj.state.length > 2 || obj.state.length < 2) {
          alert('use to letters for state')
        } else {
          fetchData(obj)
        }
        history.push('/forecast');
      }
   

• Файл App.tsx

     import React, { useState } from 'react';
    import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
    import axios from 'axios';
    import '../styling/App.css';
    import { WeatherInput } from './weather-input';
    import { Week } from './week';
    import { Day } from './day';
  
    type Location = {
      state: string;
      city: string;
    }
  
    const App: React.FC = () => {
      const [day, setDay] = useState<string[]>([]);
      const [items, setItems] = useState<string[]>([]);
  
  
      // openweathermap 
      const fetchData = async (location: Location) => {
        const API_URL = 'https://api.openweathermap.org/data/2.5/forecast';
        const API_KEY = process.env.REACT_APP_API_KEY;
  
        const options = `${API_URL}?q=${location.city},${location.state},USamp;appid=${API_KEY}`
        try {
          const {data} = await axios.get(options);
          setItems(data)
        } catch (err) {
          console.error(err)
          alert('Please check spelling of city and state.')
        };
      };
  
      const hanldeSingleDay = (e: any, day: any) => {
        let item: Array<string> = [day]; 
        setDay(item)
      }
  
      return (
        <Router>
          <div className="App">
            <WeatherInput fetchData={fetchData}/>
   

Глядя на ваш код, вы должны иметь возможность изменить определение WeatherInputProps, чтобы ожидать асинхронную функцию, например:

 type WeatherInputProps = {
    fetchData: (obj: Location) => Promise<void>;
}
 

Если вы хотите вернуть значение из асинхронной функции, вы должны изменить Promise<void> его на Promise<RETURNTYPE> where RETURNTYPE -любой тип, который вы хотите получить в результате асинхронной функции.

Тогда вам нужно будет убедиться, что вы возвращаете значение этого типа в асинхронной функции следующим образом:

 const fetchData = async (loc:Location) => {
      await doAsynchronousWork();
      return new RETURNTYPE();
   };