エラーはimport文が不足していたことが原因だったという前提で回答させて頂きます。
更に回答前の前提として、TypeScript(TS)は以下のような特徴があります。
- TSは変数や関数などに型(型注釈)をつけることができる
- 型には別名(alias)を付けることができる
- 型Aliasは export できる
- 他のファイルでその型Aliasが利用できるようになります
- 型同士の構造に互換性があれば、代入などが可能
- 型が明示されていない場合、TypeScriptコンパイラにより型が推論される
// 1. 変数 value に number の型注釈をつけている
// (number型以外の値を代入しようとするとコンパイルエラーになります)
const value: number = 'any string'.length;
// 2. 型には別名を付けることができる
type EvenMonths = 2 | 4 | 6 | 8 | 10 | 12
type NumberArray = Array<number>
type ReturnBooleanFunction = () => boolean
const evenMonth: EvenMonth = 2;
// 4.
type HasOnlyA = { a: number }
const hasAlsoB = { a: 10, b: 'b' };
// HasOnlyA は `a: number` プロパティがある変数であれば代入可能
const a: HasOnlyA = hasAlsoB;
// 5. 型名が明示されていない場合は、型が推論される
// number 型に推論される
// (String.prototype.length がnumber型の為)
const numberValue = 'any string'.length;
// (any) => void 型に推論される
// - 引数の value の型を推論するために使える情報が一切ないため
// - `noImplicitAny` コンパイルオプションが指定されている場合はエラーになります
const outputConsoleLog = (value) => { console.log(value); };
どうしてTypeScriptの場合 import { GetServerSideProps } from 'next'; が必要なのでしょうか?
next.jsが提供している GetStaticPaths
型 や GetServerSideProps
型 を参照しているからです。そのため定義元からimportする必要があります。
Array<T>
やPromise<T>
のような型は、通常tsconfig.json
でTypeScriptが予め用意したものをグローバルで使用する設定になっているはずなので、これらの型を使用する際はimportする必要がありません。
https://typescript-jp.gitbook.io/deep-dive/type-system/types
https://typescript-jp.gitbook.io/deep-dive/type-system/lib.d.ts
JSのコード上には型情報が一切存在しないため、TSではJSで書かれたライブラリが型安全に利用できるように、「型定義ファイル」というものがライブラリ側やDefinitelyTypedにより提供されています。
https://github.com/DefinitelyTyped/DefinitelyTyped
この型定義(型Aliasのようなもの)に沿ってコンパイルエラーが起きないようにコーディングしていれば、ライブラリを正しく使えるようになっています。
なのでこれらの型を利用せずに : GetStaticPaths
などの型注釈自体を削除しても良いのですが、引数がany型になったり、IDE(VS Code)でコード補完が効かなくなったりして不便ですし、ライブラリの使用方法を誤る可能性があります。
(コードやコンパイラオプションによってはそもそもコンパイルが通りません)
特に const getStaticProps: GetStaticProps
の方は代入している関数の引数に型注釈が一切ありませんが、GetStaticProps
のおかげで自動的に GetStaticPropsContext
に推論されます。
(これに存在しないプロパティにはそもそもアクセスができない)
https://github.com/vercel/next.js/blob/v10.1.3/packages/next/types/index.d.ts#L93-L110
export type GetStaticProps<
P extends { [key: string]: any } = { [key: string]: any },
Q extends ParsedUrlQuery = ParsedUrlQuery
> = (context: GetStaticPropsContext<Q>) => Promise<GetStaticPropsResult<P>>
余談
GetStaticPaths
は簡単に言えば、context: GetStaticPathsContext
を引数に取り、GetStaticPathsResult<P>
型の値が返るPromiseを返す型です。
https://github.com/vercel/next.js/blob/v10.1.3/packages/next/types/index.d.ts#L125-L132
export type GetStaticPaths<P extends ParsedUrlQuery = ParsedUrlQuery> = (
context: GetStaticPathsContext
) => Promise<GetStaticPathsResult<P>>
質問文のコードでは引数無しのasync関数を代入してますが、エラーにはなりません。
TSはJSのスーパーセットとして開発されているため、JSとしてvalidなコードはTSでもvalidです。
(ただし前述の通り、コンパイラオプション設定によってエラーになります)
JSでイベントハンドラなどの引数を使用しない場合に引数がない関数が渡せるように、TSでも同じことができるようになっています。
これを実現するためにTSでは型の構造に互換性があるかどうか、で判断しています。
(詳細は「TypeScript 構造的部分型」でググってください)
export const
なので、getStaticPaths
が変数名でGetStaticPaths
が型名だと思うのですが、どのドキュメント(書籍)を参考にされているか質問文に記載しておくと良さそうに思いました(import { GetStaticPaths } from 'next';
が足りてない? TypeScript: GetStaticPathsを使う)GetStaticPaths
の型定義自体はこれですかね。 github.com/vercel/next.js/blob/v10.1.3/packages/next/types/…