TypeScript

示例

Next.js 提供了一种开箱即用的集成 TypeScript 体验,类似于 IDE。

首先,在项目的根目录中创建一个空的 tsconfig.json 文件:

touch tsconfig.json

Next.js 将使用默认值自动配置此文件。还支持使用自定义编译器选项提供自己的 tsconfig.json

Next.js 使用 Babel 来处理 TypeScript,它有一些警告,一些编译器选项的处理方式也不同

然后,运行 next(正常情况下 npm run dev)和 Next.js 将指导您安装所需的包,以完成安装工作:

npm run dev

# You'll see instructions like these:
#
# Please install typescript, @types/react, and @types/node by running:
#
#         yarn add --dev typescript @types/react @types/node
#
# ...

现在可以开始将文件从 .js 转换为 .tsx 并利用 TypeScript 的好处!。

将自动在您的项目的根目录中创建 next-env.d.ts 文件。这个文件确保 TypeScript 编译器检测到 Next.js 类型。 你不能删除它,但是,你可以编辑它 (但你不需要这么做)。

默认情况下 Next.js strict 模式是关闭的。当你对 TypeScript 足够熟悉,建议你在 tsconfig.json 中打开它。

默认情况下,next build 时 Next.js 将执行类型检查。我们建议在开发过程中使用代码编辑器类型检查。

如果您想让错误报告沉默,请参考文档中的忽略 TypeScript 错误

静态生成与服务器端渲染

关于 getStaticPropsgetStaticPathsgetServerSideProps,你可以分别使用这些类型 GetStaticPropsGetStaticPathsGetServerSideProps:

import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next'

export const getStaticProps: GetStaticProps = async (context) => {
  // ...
}

export const getStaticPaths: GetStaticPaths = async () => {
  // ...
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  // ...
}

如果您使用的是 getInitialProps,您可以按照本页的说明

API Routes

以下是如何将内置类型用于 API routes的示例:

import { NextApiRequest, NextApiResponse } from 'next'

export default (req: NextApiRequest, res: NextApiResponse) => {
  res.status(200).json({ name: 'John Doe' })
}

您还可以定义响应数据类型:

import { NextApiRequest, NextApiResponse } from 'next'

type Data = {
  name: string
}

export default (req: NextApiRequest, res: NextApiResponse<Data>) => {
  res.status(200).json({ name: 'John Doe' })
}

自定义 App

如果您使用自定义 App,您可以在 ./pages/_app.tsx 中像这样使用内置类型 AppProps :

// import App from "next/app";
import type { AppProps /*, AppContext */ } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

// Only uncomment this method if you have blocking data requirements for
// every single page in your application. This disables the ability to
// perform automatic static optimization, causing every page in your app to
// be server-side rendered.
//
// MyApp.getInitialProps = async (appContext: AppContext) => {
//   // calls page's `getInitialProps` and fills `appProps.pageProps`
//   const appProps = await App.getInitialProps(appContext);

//   return { ...appProps }
// }

export default MyApp

路径别名和 baseUrl

Next.js 自动支持 tsconfig.json "paths""baseUrl" 选项。

您可以在模块路径别名文档中了解更多有关此功能的信息。