ContextとTypeScriptを使用したvalueの受け渡しができない

Question

元々JavaScriptとReactを使用しておりましたがTypeScriptも合わせて
勉強したいと思いContextを定義していたファイルを.jsから.tsxに
変更したところProviderコンポーネント配下にあるコンポーネントにvalueが
渡せなくなってしまいました。
色々と調べてみたのですが原因が分からないため質問させて頂きました。

使用しているファイル(抜粋してあります)としては
AppProvider.tsx---Contextを定義してあるファイル
App.js---最上位のコンポーネント
Login.tsx---App.js配下にあるコンポーネント

AppProvider.tsx

import React, { useEffect, useState} from "react";
import {firebaseConfig} from "../firebase/config";

export const AppContext = React.createContext({});

export const AppProvider = ({children}:any) => {

    //ユーザーをログインさせる関数
    const login = async (email:string, password:string, props:any) => {
        try{
            await firebaseConfig.auth().signInWithEmailAndPassword(email, password);
            props.history.push("/home");
        }catch(error){
            alert(error);
        }
    }

    return(
        <AppContext.Provider
            value = {{
                login: login
            }}
        >
            { children }
        </AppContext.Provider>
    );
};

App.js

import React, {Component} from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";
import PrivateRoute from "./auth/PrivateRoute";
import {AppProvider} from "./auth/AppProvider";
import Login from "./components/auth/Login";
import {connect} from 'react-redux';// eslint-disable-line
import './styles/App.css';

class App extends Component{
  render(){
    return(
      <AppProvider>
        <Router>
          <div>
            <Route exact path="/login" component={Login} />
          </div>
        </Router>
      </AppProvider>
    );
  }
}

export default App;

Login.tsx

import React, {useContext, useEffect, useState} from "react";
import {withRouter} from "react-router-dom";
import {AppContext} from "../../auth/AppProvider";
import { FormProvider, useForm } from 'react-hook-form';
import Box from '@material-ui/core/Box';
import { FormInputComponent, FormSubmitComponent } from './../formComponent/formItems';

//型宣言
type formInput = {
    email: string;
    password: string;
};

const Login = (props:any) => {
    const { login } = useContext(AppContext);

    const methods = useForm<formInput>({
        mode: 'onSubmit',
        reValidateMode: 'onChange',
        defaultValues: {
            email: '',
            password: '',
        }
    });

    const [input, setInput] = useState<formInput>({
        email: '',
        password: '',
    });

    const { handleSubmit, watch } = methods;

    useEffect(() => {
        setInput({
            email: watch('email'),
            password: watch('password'),
        })
    }, [watch('email'), watch('password')]);

    const onInputSubmit = (data: formInput) => {
        login(input.email, input.password, props);
    }

    return(
        <section >
            <Box border={1} borderRadius="borderRadius">
                <h1>ログイン</h1>
                <FormProvider {...methods}>
                <form noValidate autoComplete="off" onSubmit={handleSubmit((data) => onInputSubmit(data))}>
                    <div>
                    <FormInputComponent labelText="メールアドレス" name="email" type="email" id={2} setClassName="js-email-icon" />
                    <FormInputComponent labelText="パスワード" name="password" type="password" id={3} setClassName="js-password-icon" />
                    <FormSubmitComponent submitText="ログインする"/>
                    </div>
                </form>
                </FormProvider>
            </Box>
        </section>
    );
}

export default withRouter(Login);

流れとしてはAppProvider.tsxでContextのexportとProviderコンポーネントをreturnしています。
渡している値はログインの処理になります。
App.js(最上位コンポーネント)でAppProviderを使用して配下にあるコンポーネントにvalueが
受け取れるようにしてあります。
App.jsの配下にあるLogin.tsxでvalueのloginを受け取りログイン処理を行なっています。

Contextを定義していたファイル(AppProvider.tsx)を.jsから.tsxへ変更にあたりソースを修正した箇所は
型定義とcreateContextの()に中に{}を追加しました。

export const AppContext = React.createContext();//JavaScript
↓
export const AppContext = React.createContext({});//TypeScript

export const AppProvider = ({children}) => {//JavaScript
↓
export const AppProvider = ({children}:any) => {//TypeScript

const login = async (email, password, props) => {//JavaScript
↓
const login = async (email:string, password:string, props:any) => {//TypeScript

エラーの内容としてはLogin.tsxで

const { login } = useContext(AppContext);
//error内容
プロパティ 'login' は型 '{}' に存在しません。ts(2339)

ちなみにdefaultValueに値を設定すると配下にあるコンポーネントでも値を受け取れます。
valueに設定した値が受け取れておりません。
tsxファイルにしたことによりProviderコンポーネント配下のコンポーネントとして認識されていないのでしょうか。
もし分かる方がいらっしゃいましたらお手数ですがご教示お願い致します。

Answer 1

createContextに型を設定してみてはどうでしょうか？

export const AppContext = React.createContext<{login?: any}>({});

Comments

[hiroki88]

できました!!
defaultValueとvalueの違いを調べた時にProviderコンポーネントの配下外にある時はdefaultValueが渡されて配下内にあればvalueが渡されると知ったのですがTypeScriptの場合はcreateContextでコンテキストオブジェクトを作成する時に型定義してあげないとvalueの値が渡されないのでしょうか?

[maisumakun]

> TypeScriptの場合はcreateContextでコンテキストオブジェクトを作成する時に型定義してあげないとvalueの値が渡されないのでしょうか?

値は渡されるのですが、TypeScriptの型として書いておかないと「TypeScriptコンパイラが」値があると認識できないので、コンパイルに失敗します。

[hiroki88]

そうなんですね、理解致しました!!
ありがとうございます。