在现代化的前端开发中，使用 TypeScript 已经成为了越来越普遍的趋势。它能够静态检查代码错误、提高代码可读性、减少调试时间等等。而在 React 技术栈中，Next.js 已经成为了最具代表性的服务器端渲染框架。本文将会介绍如何在 Next.js 中使用 TypeScript，并教会你如何从零开始搭建 Next.js 项目，同时还会介绍一些 TypeScript 中的高级用法。
为什么使用 TypeScript
使用 TypeScript 有以下好处：
- 代码可读性更强。TypeScript 强制规定了变量的类型，这使得代码的可读性更强，代码质量也更高。它能够提供接口定义、类定义等，这些都可以提高代码的可读性和可维护性。
- 编辑器支持更好。TypeScript 的类型检查使得编辑器的代码补全和代码提示更精准，这样能够提高开发效率。
- 更好的调试。 TypeScript 可以在编译时检查错误，从而减少了调试时间和代价。
- 安全性更高。使用 TypeScript 可以避免一些常见的 JavaScript Bug，例如不恰当的类型转换、空引用等等。
搭建 Next.js 项目
在这里，我们会介绍如何从零开始搭建一个 TypeScript 的 Next.js 项目。如果你已经有了现有的 Next.js 项目，可以直接从“将 JavaScript 项目迁移到 TypeScript”一节开始阅读。
安装依赖
首先，我们需要安装 Node.js 和 npm（或者 yarn）。安装完毕后，我们可以在终端输入 npm install -g create-next-app（或者使用 yarn）来安装 create-next-app：
npm install -g create-next-app
这个命令会在全局环境下安装 create-next-app，create-next-app 是一个官方的初始化 Next.js 项目的工具，可以帮助我们快速地搭建一个现代化的 Next.js 项目。
创建 TypeScript 的 Next.js 项目
安装完毕 create-next-app 之后，我们可以在命令行中输入 create-next-app 命令来初始化一个 Next.js 项目，例如：
create-next-app my-next-app --ts
其中 my-next-app 是项目的名称，--ts 参数告诉 create-next-app，我们需要创建一个 TypeScript 的 Next.js 项目。执行完这个命令后，create-next-app 会在当前目录下创建一个新的项目，新项目的结构如下：
-- -------------------- ---- ------- - --- --------- --- ------------ --- ------------ --- ------ - --- ----------- --- --- - --- ---------- - - --- ---------- - - --- ------- - --- ----- - - --- ------- - - --- -------- - - --- ------------- - - --- --------- - - --- ----- - - --- ---------- - - --- --------- - --- ----- - - --- ------- - --- ----- - - --- ---------- - --- -------------- - --- ------------- - --- -------------- - --- ------------- - --- --------- --- ------------- --- ---------
在这个项目结构中，我们可以看到 tsconfig.json 文件和 next-env.d.ts 文件，这些文件是 TypeScript 的配置文件。
配置 TypeScript
我们可以打开 tsconfig.json 文件，看一下默认的 TypeScript 配置：
-- -------------------- ---- -------
-
------------------ -
--------- ------
------ ------- --------------- ----------
--------- -----
------------------ -----
------------------ -----
---------- -----
--------- ---------
------------------- -------
------ -----------
--------------- -----
----------------------------------- -----
--------- ----
-
-这个默认的配置非常简单，只是定义了一些基本的 TypeScript 配置，例如：
target：约定 TypeScript 编译后的代码要符合 ES5 规范。lib：指定 TypeScript 使用的库文件。strict：打开所有严格的类型检查。allowJs：在 TypeScript 中允许引入 JavaScript 文件。moduleResolution：指定 TypeScript 的模块解析方式。
不过，我们还需要修改一些配置：
- 将
strict的值设为false，因为刚开始学习 TypeScript 时可能会有一些类型报错，这时候我们可以暂时关闭严格模式。 - 将
jsx的值设为react，因为我们使用 React 来开发应用。
修改后的配置如下：
-- -------------------- ---- -------
-
------------------ -
--------- ------
------ ------- --------------- ----------
--------- ------
------------------ -----
------------------ -----
---------- -----
--------- ---------
------------------- -------
------ --------
--------------- -----
----------------------------------- -----
--------- ----
-
-在 Next.js 中使用 TypeScript
现在我们已经完成了 TypeScript 项目的初始化和配置，接下来我们需要修改一些文件，以便 Next.js 能够正常使用 TypeScript。
修改文件扩展名
首先，我们需要将所有的 .js 文件的扩展名全部修改为 .tsx（页面组件的扩展名为 .tsx，组件内部的子组件的扩展名为 .ts），这样 Next.js 就会使用 TypeScript 编译这些文件了。
修改 _app.tsx 和 _document.tsx
Next.js 运行时需要重写 _app.js 和 _document.js，因此我们需要将它们也修改为 .tsx 的扩展名，然后修改文件内部的内容，保证其符合 TypeScript 的语法。
为 pages 下的每个页面创建类型声明
因为 Next.js 默认使用的是 JavaScript，不会对页面进行类型检查。因此我们需要为每个页面添加类型声明（即创建同名的 .tsx 文件），这些类型声明需要符合 React 和 Next.js 的 API 声明，例如：
-- -------------------- ---- ------- ------ - -------- - ---- ------- --------- ----- - ----- ------- - ----- -------- --------------- - -- ---- -- -- - ------ ---------- ------ -------- -- ------ ------- --------
这个示例定义了一个页面组件 Details，它可以接收一个 name 属性，类型为字符串。
安装 TypeScript 相关依赖
在 package.json 文件中添加以下的 TypeScript 相关依赖：
{
"devDependencies": {
"@types/node": "^16.7.11",
"@types/react": "^17.0.27",
"@types/react-dom": "^17.0.9",
"typescript": "^4.4.3"
}
}其中 typescript 是 TypeScript 的核心依赖，@types 是 TypeScript 的类型声明文件，不同的第三方库会有自己的类型声明（如 React、Node.js 等等），我们需要安装这些类型声明文件来保证 TypeScript 能够正确地解析这些库。
将 JavaScript 项目迁移到 TypeScript
如果你已经有一个现有的 JavaScript Next.js 项目，你也可以将它迁移到 TypeScript。这里提供了步骤：
安装 TypeScript：在项目中安装 TypeScript，并按照上面说明修改
tsconfig.json。修改文件扩展名：将所有的
.js文件的扩展名全部修改为.tsx。创建类型声明：为每个页面和组件创建一个类型声明文件（除了
[id].tsx这样的动态路由页面）。修改 _app.js 和 _document.js：将它们的扩展名修改为
.tsx，然后将文件内部的内容以 TypeScript 的形式重写一遍。安装 TypeScript 相关依赖：在
package.json文件中添加 TypeScript 相关的依赖，可以直接从上面的代码中复制即可。
TypeScript 的高级用法
在完成了 TypeScript 的配置后，我们可能需要使用一些高级特性来提高我们的开发效率，这里介绍一些常用的高级特性。
类型别名和接口
在 TypeScript 中，我们可以使用类型别名和接口来定义类型。
类型别名
类型别名可以帮助我们定义一个重复的复杂类型，例如：
-- -------------------- ---- ------- ---- ---- - - ----- ------- ---- ------- ------ ------- -- ---- ---- - - ------ ------- -------- ------- ------- ----- --
在这个例子中，我们定义了两个类型别名 User 和 Post。它们都是复杂的类型，由多个类型组合而成。之后，我们可以使用这些类型别名来定义变量的类型了。
-- -------------------- ---- ------- ----- ----- ---- - - ----- ------- ---- --- ------ ------------------- -- ----- ----- ---- - - ------ ------ ------- -------- ----- -- -- ----- ------- ------- ----- --
接口
接口可以用来约束一个对象的属性和方法，符合接口规范的对象被视为实现了该接口。例如：
-- -------------------- ---- -------
--------- ---- -
----- -------
---- -------
------ -------
-
--------- ---- -
------ -------
-------- -------
------- -----
---------- -----
------------- -------
-
----- ----- ---- - -
----- -------
---- ---
------ -------------------
--
----- ----- ---- - -
------ ------ -------
-------- ----- -- -- ----- -------
------- -----
---------- --- -------
------------ -
------ ------------------------- ---- - ------
--
--在这个例子中，我们定义了两个接口 User 和 Post。一个实现了 Post 接口的对象需要具有 title、content、author、createdAt、getPreview 这些属性和方法，符合这些接口，才可以被视为一个 Post 类型的对象。
枚举
枚举可以帮助我们定义一系列相关的同类项，并赋予它们一个更容易理解的名字。例如：
enum Direction {
Up,
Down,
Left,
Right,
}在这个例子中，我们定义了一个方向的枚举类型，它有四个同类项：Up、Down、Left、Right。它们都被赋予了一个索引值，从 0 开始逐个递增。
-- -------------------- ---- -------
-------- --------------- ---------- -
-- ---------- --- ------------- -
------------------- --------
- ---- -- ---------- --- --------------- -
------------------- ----------
- ---- -- ---------- --- --------------- -
------------------- ----------
- ---- -- ---------- --- ---------------- -
------------------- -----------
-
-
------------------- -- ------- ------ -----在这个例子中，我们定义了一个移动的函数 move，它接收一个方向的参数，并根据传入的参数来执行不同的操作。
泛型
泛型允许我们编写能够支持多种类型的可重用代码。它使用了类型变量，这些类型变量可以在调用函数或者使用类时传递，将来在编写泛型代码时可以为它们指定具体的类型。
function identity<T>(arg: T): T {
return arg;
}
let result = identity<string>("Hello World");
let result2 = identity<number>(42);在这个例子中，我们定义了一个泛型函数 identity，它接收一个类型变量 T，并在函数体内将输入的参数返回。这个函数可以接收任意类型的参数，并返回任意类型的结果。
结论
在现代的前端开发中，使用 TypeScript 已经成为了不可避免的趋势。在 React 技术栈中，Next.js 是最具代表性的服务器端渲染框架，它对 TypeScript 的支持也非常完善。本文介绍了如何在 Next.js 中使用 TypeScript，从零开始搭建一个 TypeScript 的 Next.js 项目，并介绍了一些 TypeScript 中的高级用法。如果你是一个前端开发者，我相信本文对你一定有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6710a499377015f5a1a1e242