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

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

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

Vercelとは、フロントエンド開発向けのフレームワークです。静的サイトとサーバレス機能のためのクラウドプラットフォームで、簡単にWebサイトやWebサービスをデプロイできます。自動でスケールでき、監視や各種設定も必要ありません。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

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

React.js

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

Q&A

解決済

1回答

1124閲覧

vercel/swrのソースについて、useSWRの第一引数に何故nullを受け付けることができるのかわかりません

tanana_m

総合スコア28

Vercel

Vercelとは、フロントエンド開発向けのフレームワークです。静的サイトとサーバレス機能のためのクラウドプラットフォームで、簡単にWebサイトやWebサービスをデプロイできます。自動でスケールでき、監視や各種設定も必要ありません。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

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

React.js

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

0グッド

0クリップ

投稿2021/10/23 11:18

編集2021/10/23 12:58

理解できないのはソースの以下の箇所です。

https://github.com/vercel/swr/blob/master/src/types.ts#L6-L32

typescript

1export type Fetcher<Data = unknown, SWRKey extends Key = Key> = 2 /** 3 * () => [{ foo: string }, { bar: number }] | null 4 * () => ( [{ foo: string }, { bar: number } ] as const | null ) 5 */ 6 SWRKey extends (() => readonly [...infer Args] | null) 7 ? ((...args: [...Args]) => FetcherResponse<Data>) 8 /** 9 * [{ foo: string }, { bar: number } ] | null 10 * [{ foo: string }, { bar: number } ] as const | null 11 */ 12 : SWRKey extends (readonly [...infer Args]) 13 ? ((...args: [...Args]) => FetcherResponse<Data>) 14 /** 15 * () => string | null 16 * () => Record<any, any> | null 17 */ 18 : SWRKey extends (() => infer Arg | null) 19 ? (...args: [Arg]) => FetcherResponse<Data> 20 /** 21 * string | null | Record<any,any> 22 */ 23 : SWRKey extends null 24 ? never 25 : SWRKey extends (infer Arg) 26 ? (...args: [Arg]) => FetcherResponse<Data> 27 : never

useSWRの第一引数によって第二引数のFetcherの型が決まります。
ここで第一引数がnullだった場合、下から4行目のneverに入ってコンパイルエラーになるように見えるのですが、実際はnullが入ってもその他の分岐(どこか不明)に入って成立しています。
なぜneverの分岐に入らずこのような動作になるのでしょうか。

ご教示いただけると大変助かります。
よろしくお願いいたします。

useSWRの定義

追っていくと以下にあたります。
https://github.com/vercel/swr/blob/da33f52633ef5bb357e074de8499c76661e23c78/src/use-swr.ts#L512

withArgs自体の定義は以下です。

https://github.com/vercel/swr/blob/da33f52633ef5bb357e074de8499c76661e23c78/src/utils/resolve-args.ts#L11-L36

typescript

1export const withArgs = <SWRType>(hook: any) => { 2 return (((...args: any) => { 3 // Normalize arguments. 4 const [key, fn, _config] = normalize<any, any>(args) 5 6 // Get the default and inherited configuration. 7 const fallbackConfig = mergeObjects( 8 defaultConfig, 9 useContext(SWRConfigContext) 10 ) 11 12 // Merge configurations. 13 const config = mergeConfigs(fallbackConfig, _config) 14 15 // Apply middleware 16 let next = hook 17 const { use } = config 18 if (use) { 19 for (let i = use.length; i-- > 0; ) { 20 next = use[i](next) 21 } 22 } 23 24 return next(key, fn || config.fetcher, config) 25 }) as unknown) as SWRType 26}

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

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

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

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

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

maisumakun

2021/10/23 12:30

useSWRのほうの型定義はどのようなものでしょうか?
tanana_m

2021/10/23 12:58

質問に追記しました。
guest

回答1

0

自己解決

自己解決できました。
tsconfig.jsonでstrictがfalseになっていることが原因でした。
trueにすることでnullを渡した場合エラーになるようになりました。

投稿2021/10/23 15:54

tanana_m

総合スコア28

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問