本来翻译了一篇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按钮，安装以下扩展：
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数组被完美格式化了！
🎉 一切都搞定了! 🎉
希望这个指南节省了你大量时间，不管现在还是将来都是一份很棒的参考指南。
编程快乐！😀
网友评论