使用 react-native-template-typescript 模板初始化一个 React Native 应用

如果你正在使用 TypeScript 开发你的 React Native 应用，那么使用官方提供的 react-native init 命令初始化应用可能不是最佳选择。因为它初始化的应用不包含 TypeScript 支持，需要自己配置。

而 react-native-template-typescript 模板则是针对 TypeScript 应用的一个预设模板，包含了 TypeScript 的支持和一些基础的配置，可以帮助你更快速地开始开发应用。接下来我们就来看一下如何使用这个模板来初始化一个 React Native 应用。

安装 npx

npx 是随 Node.js 一起安装的一个命令行工具，用于运行本地安装的 npm 依赖包里的二进制命令。我们可以使用它来初始化项目。

要使用 npx，你需要安装 Node.js。如果你还没有安装过，可以去 nodejs.org 下载安装包，选择合适的版本安装即可。

安装完 Node.js 之后，你就可以在终端中运行 npx 命令了。

安装 react-native-cli

在使用 react-native init 命令前，我们需要先安装 react-native-cli。在终端中执行下面的命令：

npm install -g react-native-cli

安装完成之后，你可以使用 react-native 命令来创建、运行和打包 React Native 应用。

初始化应用

有了 npx 和 react-native-cli，我们就可以使用下面的命令来初始化一个名为 MyApp 的 React Native 应用：

npx react-native init MyApp --template react-native-template-typescript

该命令会在当前目录下创建一个名为 MyApp 的文件夹，并下载、安装所有必要的依赖。

如果一切顺利，过一段时间后就会在终端上看到如下输出：

✨  Done in 123.45s.

至此，我们就成功地创建了一个使用 react-native-template-typescript 模板的 React Native 应用。我们可以进入 MyApp 目录，启动应用并查看效果：

cd MyApp
npx react-native run-ios  // 启动 iOS 版本应用
或
npx react-native run-android  // 启动 Android 版本应用

请注意，这些命令会启动模拟器或连接的硬件设备，并在其中安装、编译和启动你的应用。整个过程可能需要花费一些时间，请耐心等待。如果一切顺利，你应该能够在模拟器或设备上看到一个欢迎页面。

配置编辑器

现在我们已经成功地创建了一个使用 TypeScript 的 React Native 应用，下一步就是在编辑器中打开它，并配置支持 TypeScript 语言。

具体的编辑器配置方式因人而异，这里简要介绍 VS Code 的配置方式。

1. 安装 VS Code 插件：TypeScript 和 React Native Tools

   打开 VS Code，按下 Ctrl + Shift + X 进入插件商店，搜索并安装 TypeScript 和 React Native Tools 插件。

2. 创建 VS Code 配置文件

   在 VS Code 中打开 MyApp 文件夹，按下 Ctrl + Shift + P，输入 settings.json 并回车。

   如果你还没有创建过该文件，VS Code 会建议你创建。接受建议后，你就可以看到一个名为 settings.json 的文件已经出现在当前文件夹下，而且 VS Code 已经为你打开它。

3. 配置 TypeScript 相关选项

   将以下内容复制到 settings.json 文件中：

   {
     "typescript.validate.enable": true,
     "typescript.tsdk": "./node_modules/typescript/lib",
     "[typescript]": {
       "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
     "[typescriptreact]": {
       "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
     "editor.codeActionsOnSave": {
       "source.fixAll.tslint": true
     },
     "eslint.alwaysShowStatus": true,
     "eslint.validate": [
       "javascript",
       "javascriptreact",
       "typescript",
       "typescriptreact"
     ],
     "javascript.format.enable": false,
     "javascript.validate.enable": false
   }
   

   这些选项的含义如下：

   • typescript.validate.enable: 让 VS Code 支持检查 TypeScript 代码并定位错误。
   • typescript.tsdk: 提供 TypeScript 语言服务的路径。当你使用 VS Code 自带的 TypeScript 版本时（默认情况下），可以将该值设置为 ./node_modules/typescript/lib。
   • editor.defaultFormatter: 设置代码格式化器。这里我们选择了一个名为 Prettier 的开源代码格式化器，它可以自动格式化你的代码并遵循一些通用的格式约定。如果你还没有安装 Prettier 插件，请按下 Ctrl + Shift + X 进入插件商店，搜索并安装 Prettier - Code formatter。
   • editor.codeActionsOnSave: 自动修复一些代码问题。当你保存一个文件时，如果它包含一些语法错误或格式问题，VS Code 会试图自动地修复它们。
   • eslint.alwaysShowStatus: 让 VS Code 显示 ESLint 的错误信息。ESLint 是一个用于检查 JavaScript 代码风格和语法错误的插件。这里我们启用了它，并让 VS Code 在底部状态栏中显示错误信息。
   • eslint.validate: 配置哪些文件需要检查。这里我们让 VS Code 检查所有的 .js、.jsx、.ts 和 .tsx 文件。
   • javascript.format.enable: 禁用 VS Code 内置的 JavaScript 格式化器。我们将使用 Prettier 来格式化 JavaScript 代码。
   • javascript.validate.enable: 禁用 VS Code 内置的 JavaScript 代码检查。我们将使用 ESLint 来检查代码。

4. 创建 .eslintrc.js 文件

   将以下内容复制到 MyApp 文件夹根目录下的 .eslintrc.js 文件中：

   module.exports = {
     root: true,
     parser: '@typescript-eslint/parser',
     plugins: [
       '@typescript-eslint',
       'react',
       'react-hooks',
     ],
     extends: [
       'eslint:recommended',
       'plugin:@typescript-eslint/recommended',
       'plugin:react/recommended',
       'plugin:react-hooks/recommended',
       'prettier',
     ],
     rules: {
       'no-console': ['error', { allow: ['warn', 'error'] }],
       'react/prop-types': 'off',
       '@typescript-eslint/ban-ts-comment': 'off',
       '@typescript-eslint/explicit-module-boundary-types': 'off',
       '@typescript-eslint/no-explicit-any': 'off',
       '@typescript-eslint/no-var-requires': 'off',
       'react-hooks/exhaustive-deps': 'warn',
     },
   };
   

   这个文件用于配置 ESLint 插件。它包含了很多自定义的规则和建议，可以让你的代码更加健壮和可读。如果你想了解更多关于 ESLint 的内容，可以使用下面的链接。

到此为止，我们的 VS Code 配置就完成了。现在你可以愉快地编写 TypeScript 代码并享受自动代码检查和格式化的乐趣了。

总结

本文详细介绍了如何使用 react-native-template-typescript 模板初始化一个 React Native 应用，并介绍了如何在 VS Code 中配置 TypeScript 支持。如果你正在尝试使用 TypeScript 开发 React Native 应用，希望这篇文章能对你有所帮助。如果你有任何问题或建议，欢迎在评论区留言。