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

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

新規登録して質問してみよう
ただいま回答率
85.47%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

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

React.js

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

Recoil

Recoilは、Meta社が開発しているReactの状態管理ライブラリです。状態を管理するAtom、Atomに格納された状態を取得するSelectorという2つの主機能を持ちます。同じく状態管理ライブラリであるReduxと比べて構造が分かりやすく扱いやすい点が特徴です。

Q&A

解決済

1回答

577閲覧

Recoil selectorのgetやset関数の引数の型指定方法は?

mihodesu

総合スコア16

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

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

React.js

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

Recoil

Recoilは、Meta社が開発しているReactの状態管理ライブラリです。状態を管理するAtom、Atomに格納された状態を取得するSelectorという2つの主機能を持ちます。同じく状態管理ライブラリであるReduxと比べて構造が分かりやすく扱いやすい点が特徴です。

0グッド

0クリップ

投稿2023/02/23 07:31

編集2023/02/26 06:06

実現したいこと

NextJSで扱っている、Recoilについてです。
selectorのgetやset関数の引数(newValue)にTypeScriptの型を指定したいのですが、正しい指定方法がわかりません。

以下のソースコードのように指定するとエラーとなってしまいます。
調べてもこの辺りの情報がなく、わかりませんでしたのでお聞きしたいです。

発生している問題・エラーメッセージ

No overload matches this call. Overload 2 of 2, '(options: ReadOnlySelectorOptions<void>): RecoilValueReadOnly<void>', gave the following error. Argument of type '{ key: string; get: ({ get }: { get: GetRecoilValue; getCallback: GetCallback; }) => void; set: ({ set }: { set: SetRecoilState; get: GetRecoilValue; reset: ResetRecoilState; }, newValue: string) => void; }' is not assignable to parameter of type 'ReadOnlySelectorOptions<void>'. Object literal may only specify known properties, and 'set' does not exist in type 'ReadOnlySelectorOptions<void>'.ts(2769)

該当のソースコード

js

1const testSelector = selector({ 2 key: 'testSelector', 3 get: ({get}) => {}, 4 set: ({set}, newValue: string) => 5 console.log(newValue) 6}) 7

ukyさんご回答の追記

インポートしてご回答いただいたコードを記述しました。

js

1import { atom, selector, DefaultValue } from 'recoil'

イメージ説明

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

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

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

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

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

guest

回答1

0

ベストアンサー

selectorのgetやset関数の引数(newValue)にTypeScriptの型を指定したいのですが、正しい指定方法がわかりません。
以下のソースコードのように指定するとエラーとなってしまいます。

ふだんRecoilを利用していますが、newValueに明示的に型をつけたことがないのでエラー回避のためだけの回答となってしまいますが、以下のように、RecoilからimportしたDefaultValueを指定することで回避できます。

js

1const testSelector = selector({ 2 key: 'testSelector', 3 get: ({get}) => {}, 4 set: ({set}, newValue: string | DefaultValue) => 5 console.log(newValue) 6})

2023/02/27 追記

以下の回答コメントに対する回答

newValueに型をつけることは一般的ではない?対応してない?のでしょうか?

個人的には不要と思っています。

newValueがとりうる値は、Recoilの仕様上string | DefaultValueとなりますが、
DefaultValueは要はstringになります。(atomのdefaultで指定するようなものです

ということは、以下のように型を明示してあげることで、わざわざselectorのset内で型を指定する必要がなくなると思います。
※ tsで書きます

ts

1const testSelector = selector<string>({ 2 key: 'testSelector', 3 get: ({get}) => { 4 return 'string' 5 }, 6 set: ({set}, newValue) => console.log(newValue) // selectorの関数自体にstringの型制約をつけたのでここで明示する必要がなくなる 7})

投稿2023/02/24 07:39

編集2023/02/27 02:17
uky

総合スコア207

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

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

mihodesu

2023/02/26 06:07 編集

ありがとうございます。 ご回答通りに記述してみましたが、エラーになってしまいました。 画像を質問欄に追記しました。 newValueに型をつけることは一般的ではない?対応してない?のでしょうか? もしそうであれば、無理してつける必要はないのかなと思いました。
uky

2023/02/27 02:06

エラーの原因はselectorのgetがvoidだからですね。適当に文字列をreturnすれば解消されます。
uky

2023/02/27 02:16

> newValueに型をつけることは一般的ではない?対応してない?のでしょうか? > もしそうであれば、無理してつける必要はないのかなと思いました。 個人的には不要と思っています。 ※ 回答の下に追記してあります。
mihodesu

2023/03/04 06:14

うまくいきました。 大変勉強になりました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.47%

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

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

質問する

関連した質問