0

タイプスクリプトで書かれ、React Hooks を使用しているプロジェクトのリファクトに取り組んでいます。私は本当に専門家ではなく、初心者のようなものですが、タイプスクリプトについてある程度の知識があります。

私はこのプロジェクトのコードの再利用を開発しようとしています (これがフック付きの refacto の理由です)。単純なエラーで立ち往生しています。

2つの入力（電子メールとパスワード）でログインするための簡単なフォームがあります：

ログインフォーム

import React from 'react';
import { SmartInput, RoundButton } from '@/components';
import { useMultipleInputs } from '@/hooks';

interface ILoginFormProps {
    onLogin: (email: string, password: string) => Promise<void>;
    errorMsg?: string;
}

interface ILoginFormInputs {
    password: string;
    email: string;
}

export const LoginForm = ({
    onLogin,
    errorMsg,
}: ILoginFormProps): JSX.Element => {
    const [inputs, setInputs] = useMultipleInputs<ILoginFormInputs>(); // line where the error occur

    const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        const { email, password } = inputs;
        e.preventDefault();
        await onLogin(email, password);
    };

    const displayErrorMsg = () => {
        if (errorMsg) {
            return (
                <p className='body-text body-text--medium body-text--error auth-form__form__error-msg'>
                    {errorMsg}
                </p>
            );
        }
        return null;
    };

    return (
        <div className='auth-form'>
            <div className='auth-form__container'>
                <div className='auth-form__container__title title title--big'>
                    Sign in to <br />
                    Esport-Hatcher
                </div>
                <form className='auth-form__basic' onSubmit={onSubmit}>
                    <SmartInput
                        type='email'
                        placeholder='Email'
                        name='email'
                        icon='mail'
                        value={inputs.email}
                        onChange={setInputs}
                    />
                    <SmartInput
                        type='password'
                        placeholder='Password'
                        name='password'
                        icon='lock'
                        value={inputs.password}
                        onChange={setInputs}
                    />
                    {displayErrorMsg()}
                    <RoundButton onClick={() => null} />
                </form>
            </div>
        </div>
    );
};

カスタムフックへの入力の状​​態を遅らせたいので、再利用可能です。

useMultipleInputs

import React, { useState } from 'react';

interface IInputs {
    [key: string]: string;
}

export const useMultipleInputs = <T extends IInputs>(): [
    T,
    typeof onChange
] => {
    const [inputs, setInputs] = useState<T | {}>({});

    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setInputs({
            ...inputs,
            [e.target.name]: e.target.value,
        });
    };
    return [inputs as T, onChange];
};

悲しいことに、最初のスクリーンショットでわかるように、エラーが発生します。

Type 'ILoginFormInputs' does not satisfy the constraint 'IInputs'.

Index signature is missing in type 'ILoginFormInputs'.

typescript は として扱わ{ email: string, password: string }れ[key: string]: string]ませんか?

私を読んでくれてありがとう:)

4

1 に答える 1

0

これは設計によるものだと思います。同じ名前の複数のインターフェイス宣言を持つことができ、それらはマージされますが、型に対してはできません。(Tはインターフェースではなくタイプです)。したがって、TSはここで非常に安全になろうとしています.

ILoginFormInputs定義をtypeより厳密なに変更してみてください。

type ILoginFormInputs = {
    password: string;
    email: string;
}
于 2019-09-16T18:34:29.763 に答える