2020-09-02

本来翻译了一篇Using TypeScript with React Native的文章，讲述了如何在RN项目中集成Typescript。最近我在使用npx react-native init Proj --template react-native-template-typesript创建RN项目时,发现它并不是使用这种方式来实现的，虽然都是RN官方文档提供的方案。而是用的ESLint和Typescript结合的方式，再集成到RN项目中。这里我推荐这篇文章做参考：在Typescript项目中，如何优雅的使用ESLint和Prettier

以下是之前的旧文，也就是Using TypeScript with React Native的翻译。

原文链接

本文翻译自：Configure TypeScript, TSLint, and Prettier in VS Code for React Native Development

前言

我本身是做Android和iOS开发的，一直想做混合开发，但是一旦工作，再加上自己喜欢偷懒，这事就总是搁浅了。有幸进入了新公司，老大给了不少时间和机会学习。特别感谢！

翻译这篇文章的目的很简单，因为在学习React Native的这两个月里，爬了不少坑，走了不少弯路，这篇文章一步步详细的写了出来。

之前用的是Flow，主要看是Facebook自己维护的，应该是不二之选。但是Flow这玩意儿刚用的时候感觉挺好的，几乎没有学习成本，但是用到后面总是会出现莫名奇妙的问题，Flow也不会给出详细的解决方案，再者很多类型莫名其妙的变成了any，慌的一匹。更被提自动导入、代码补全提示了。当然以上吐槽未必准确，很大的可能性是自己的能力不足。翻了『TypeScript VS Flow』之类的文章，最终选择TypeScript。

对着VSCode大把的插件，一时会泪流满面，此等神器，我以前为什么没发现？！惊喜之后就成了，卧槽，用哪个？卧槽，怎么用？卧槽，啥时候用？自己糊糊涂涂配置下来貌似也能行呀，就撸代码吧。问题是，代码在别人VScode打开之后，就全线爆红。好在现在是单打独斗，但是后面肯定会有新同事的，这绝对不行！

正如该文章讲的『提供一致、可重用的开发工作流程』，哈哈哈，一级棒！

简介

这篇简短的文章为新创建或已有的React Native项目提供一致、可重用的开发工作流程。你在代码质量上付出越多的努力，在调试上花费的时间就越少。你能够通过统一的开发流程来提高代码质量，减少调试时间。在这篇文章中，我将会向你展示怎样设置VSCode，处理代码格式化、分析以及类型检测。

Testing不在该篇文章讲述范围之内，但是强烈推荐。

怎样使用TypeScript也不在该文章的讲述范围之内。

开始

我们从创建新项目开始。如果你正在处理已有项目，可以直接跳到TypeScript设置。一起来初始化项目吧！这篇文章我们使用的是React Native CLI.

$ react-native init SweetApp && cd SweetApp

使用VS Code打开SweetApp工程。

$ code .

打开VSCode之后在Activity Bar中点击Extensions按钮，安装以下扩展：

• Prettier Code Formatter
  
• TSLint

TypeScript设置

受限在终端中键入以下命令为React Native APP安装和设置TypeScript。（我使用Yarn包管理器）

yarn add --dev typescript react-native-typescript-transformer @types/react @types/react-native

$ yarn tsc --init --pretty --jsx react

$ touch rn-cli.config.js

我们做了一下工作：

• TypeScript作为开发依赖库添加到我们的项目中
• React Native TypeScript Transformer作为开发依赖库安装到我们的项目中，使TypeScript和React Native无缝链接；
• 创建了一个空的TypeScript配置文件，我们接下来配置它。
• 创建了一个空的TypeScript Transformer配置文件，我们马上会配置它。
• 为React和React Native安装了typings，允许TypeScript对React Native进行类型检查。

配置TypeScript

以下是我设置允许的/不允许的，在起始的时候，我建议你和我一样的做法。当你熟悉了TypeScript，有了更多经验后，你可以根据自己的喜好修改这个文件（tsconfig.json）。

你想要允许或者不允许某选项，简单的不注释或者注释对应该行的代码即可。

在『Module Resolution Options』分组中我启用了下面三个选项：

"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"resolveJsonModule": true

在『Module Resolution Options』分组中修改必要的设置，和下面的代码一致：

"noImplicitAny": true,
"strictFunctionTypes": true,
"noImplicitThis": true,
"alwaysStrict": true

注意: 我更喜欢把『target』属性设置为"ES2015",目的是在没有Promise声明的情况下使用async / await。

配置React Native TypeScript Transformer

打开我们之前创建的『rn-cli.config.js』文件，粘贴以下代码，保存、关闭。

module.exports = {
  getTransformModulePath() {
    return require.resolve('react-native-typescript-transformer')
  },
  getSourceExts() {
    return ['ts', 'tsx']
  },
}

TypeScript迁移

把工程中的『App.js』文件名修改为『 App.tsx』。

注意： index.js文件需要使用.js后缀

所有包含JSX的新文件需要使用 .tsx 后缀，纯js文件使用 .ts 后缀。

现在是浏览现有.tsx和.ts文件并修复任何TypeScript错误的好时机。

TSLint安装设置

首先，安装TSLint以及我个人在React Native development喜欢的TSLint扩展。

$ yarn add --dev tslint tslint-config-prettier tslint-config-standard tslint-react

安装tslint-config-prettier后， TSLint 和 prettier在代码格式化规则上就不会有冲突了。

现在项目中，你应该能看到一个tslint.json的文件。（我没看到，哈哈哈，自己创建了一个）。

打开ts.json文件，像下面一样配置：

{
  "defaultSeverity": "error",
  "extends": [
    "tslint:recommended",
    "tslint-config-standard",
    "tslint-react",
    "tslint-config-prettier"
  ],
  "jsRules": {},
  "rules": {
    "ordered-imports": false,
    "object-literal-sort-keys": false,
    "member-ordering": false,
    "jsx-no-lambda": false,
    "jsx-boolean-value": false
  },
  "rulesDirectory": []
}

rules分组是我的偏好，你可以随意地使用自己的规则。

Lint你的代码

打开项目根目录中的package.json文件，在scripts分组中添加下面的lint脚本。

现在你就可以从终端执行yarn lint命令。你喜欢修复linter错误，你懂的！

$ yarn lint

Prettier设置

Prettier在它自己的规则基础上自动格式化代码。
Prettier很赞.如果你从未使用过，就像在HDTV上看了TV之后再回来在non-HDTV上看TV一样。一旦用了Prettier，你再也不会回过来再格式化自己的代码。

安装Prettier。

$ yarn add --dev prettier

接下来我们想在保存文件后让『VSCOde』使用Prettier扩展格式化代码。

如果在Mac上，按快捷键CMD+,打开VS Code Workspace Settings,添加以下内容：

"editor.formatOnSave": true,
"javascript.format.enable": false

现在来创建一个prettier配置文件，该文件包含了你的prettier代码格式化偏好。

$ touch .prettierrc

使用我的prettier规则或者依据个人偏好规则。这里是我的Prettier偏好。没错，我所在的团队不使用分号。

"semi": false,
"singleQuote": true,
"trailingComma": "es5"

Prettier代码格式化

不管何时你保存了文件，Prettier根据你的喜好自动格式化你的代码。

打开app.js文件添加一个数值数组。把这个数组赋值给一个test变量。把数组中的数值格式化打乱。

现在保存文件并查看Prettier的神器效果。

现在test数组被完美格式化了！

🎉 一切都搞定了! 🎉

希望这个指南节省了你大量时间，不管现在还是将来都是一份很棒的参考指南。

编程快乐！😀