У меня проблема с кодом react typescript в файле .tsx

#javascript #reactjs #typescript #react-redux #react-hooks

Вопрос:

У меня проблема с использованием typescript.

Сначала позвольте мне рассказать вам, что я хочу сделать:

Прежде всего, у меня есть продвинутая система входа пользователей, которая управляет входами пользователей в серверной части, поэтому мне нужно включить много файловых систем, чтобы интегрировать ее в сторону react. Одним из них является auth.tsx

файл расположен под файлом actions . Цель этого файла — выполнить необходимые вызовы API на сервер и передать информацию оттуда в дизайн формы, поэтому у меня будет гораздо более аккуратная структура кода. Но, к сожалению, из-за того, что в системе есть typescript, я получаю некоторые ошибки и не могу понять, почему. Вы можете помочь?

это фрагмент кода из auth.tsx файла

 export const facebookAuthenticate = (state:string, code:string) => async dispatch => {
    if (state amp;amp; code amp;amp; !localStorage.getItem('access')) {
        const config = {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        };

        const details = {
            'state': state,
            'code': code
        };

        const formBody = Object.keys(details).map(key => encodeURIComponent(key)   '='   encodeURIComponent(details[key])).join('amp;');

        try {
            const res = await axios.post(`${process.env.REACT_APP_API_URL}/auth/o/facebook/?${formBody}`, config);

            dispatch({
                type: FACEBOOK_AUTH_SUCCESS,
                payload: res.data
            });

            dispatch(load_user());
        } catch (err) {
            dispatch({
                type: FACEBOOK_AUTH_FAIL
            });
        }
    }
};
 

В параметре отправки в этом коде, the dispatch parameter has an implicit type 'any' . Я также получаю ошибку в encodeURIComponent(details[key])) ,

 the expression of type 'string' is '{ state: string; code: string; Element has type 'any' implicitly because it cannot be used to index type '}'.
  '{ state: string; code: string; I am getting the error ts(7053) not found directory signature with parameter of type 'string' on type '}'.
 

Пожалуйста, помогите мне

Ответ №1:

Тип TS возвращаемого значения для Object.keys() is string[] , см. Ниже Определение типа TS:

lib.es5.d.ts :

 keys(o: object): string[];
 

Но тип key должен быть 'state' | 'code' , а не любая строка. Поэтому вам следует вводить утверждения, чтобы указать более конкретный тип.

 const details = {
    'state': state,
    'code': code
};

const formBody = (Object.keys(details) as (keyof typeof details)[]).map(key => encodeURIComponent(key)   '='   encodeURIComponent(details[key])).join('amp;');
 

Игровая площадка TypeScript