質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

5001閲覧

createContextにて型をセットする方法について

yuki_90453

総合スコア326

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/08/11 04:07

編集2020/08/11 05:39

#概要
ReactにてcreateContextを定義した際に、型をセットしたいが型エラーになってしまい上手く行きません。

#コード

const initialObject = { Login: false, UID: '', ExamStatus: '', userID: '', FamilyName: '', GivenName: '', } interface ContextProps { Login:boolean, UID:string, ExamStatus: string, userID: string, FamilyName: string, GivenName: string, } // エラー部分 export const LoginContext = React.createContext<Partial<ContextProps>>([ initialObject, () => {}, ]); export default function LoginContextProvider(props:any){ const [state, setAuth] = React.useState<ContextProps>(()=>{ const userInfo = userPool.getCurrentUser(); if(userInfo){ return({ ...initialObject, // @ts-ignore Login: true, UID: userInfo.username }) }else{ return({ ...initialObject, }) } }) return( <LoginContext.Provider value={[state, setAuth]}> {props.children} </LoginContext.Provider> ) }

#抱えている問題
下記の部分でエラーになっています。

export const LoginContext = React.createContext<Partial<ContextProps>>([ initialObject, () => {}, ]);

おそらくContextPropsという型、定義に問題があるかと思いますが、どのように修正すべきかわからず停滞しています。

interface ContextProps2 { Login:boolean, UID:string, ExamStatus: string, userID: string, FamilyName: string, GivenName: string, }

アドバイス頂けないでしょうか。宜しくお願い致します。

追記

ご指摘の通り、下記のように修正しましたが、2つ目の引数について問題があります。

export const LoginContext = React.createContext<[Partial<ContextProps>, ()=> void]>([ initialObject, () => {}, ]);

2つ目の引数は無名関数として()=>voidを型として設定しましたが、Consumerで使用する際に、「0個の引数が必要だが*個指定されています。」と表示されます。

そこで下記のように引数を指定しましたが、「パラメーターに名前があるが型に名前がない」と表示されます

<[Partial<ContextProps>, (ContextProps)=> void]>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

[initialObject, () => {}]を指定する以上、このコンテキストの中身の型はPartial<ContextProps>ではなく、[Partial<ContextProps>, 関数の型]のようなタプルです。

投稿2020/08/11 04:34

maisumakun

総合スコア146018

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuki_90453

2020/08/11 05:31

maisumakun 様 回答ありがとうございます。 [initialObject, () => {}]のinitialObjectについて解決出来そうですが、2つ目の() => {}について型の定義方法がわかりません。 質問欄に追記致しますので、アドバイス頂けないでしょうか。 宜しくお願い致します。
yuki_90453

2020/08/11 05:46

解決しました。 React.createContext<[ContextProps, (arg0: ContextProps)=>void]>という形で上手く行きました。 いつも回答ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問