RN 集成 TypeScript方案和问题-觅稀奇MeXiQi.COM

这篇文章主要介绍了如何在ReactNative中如何集成TypeScript，以及我们遇到的一些问题总结。

其实关于如何集成TS，RN官方有一篇博客介绍了接入方案，但在参照接入过程中发现针对老工程部分迁移TS、以及新版本RN并不适用。

集成方案

目前RN集成TypeScript有两个方案：

方案一：借助第三方编译插件react-native-typescript-transformer

方案二：RN0.57版本之后将babel升级到了V7，Babel从V7开始支持TypeScript编译，详情介绍参考这里。

关于babel支持TypeScript编译有以下几个问题需要我们注意：

babel只负责在编译期将TS编译为JS，并没有进行类型校验，这意味着即使我们代码类型写错了也能编译通过，没有任何提示。不过目前包括VSCode、WebStorm等开发工具基本支持TS语法、类型校验，所以我们就不需要强依赖编译期类型校验。
有一些TS特性babel不支持：
namespacesbracketstyletype-assertionenums

具体操作

上面介绍了现有的两种集成方案的一些详细情况，下面我们具体说明如果根据不同RN版本已经实际的需求引入TS支持：

<0.57版本

我们在上面介绍过，对于RN版本低于0.57的，只能使用react-native-typescript-transformer,参考官方文档有很详细的步骤指导。

>0.57版本

如果是新项目直接执行下面命令

$react-nativeinitMyAwesomeProject--templatetypescript

如果是老项目迁移TS，因为新版本使用babel编译TS，babel编译并不会读取tsconfig.json中的配置，我们需要将相关配置转移到babel.config.js或.babelrc

为什么babel编译不会读取tsconfig.json？

上面有介绍过，babel只是加入了对于TS语法的支持，并没有进行类型校验。而tsconfig.json的主要作用就是描述了如何进行类型校验，所以babel并不需要读取这个问题。具体可以参考这个issues。

虽然babel编译期并不需要tsconfig.json，但因为我们还需要vscode、WebStorm等开发工具支持TS校验，项目中还是需要维护tsconfig。

具体操作步骤：

$yarnaddmetro-react-native-babel-preset@babel/plugin-transform-runtimebabel-plugin-module-resolvertypescript--dev$yarnadd--dev@types/react@types/react-native--dev

babel.config.js配置如下：

//babel.config.jsmodule.exports={"presets":["module:metro-react-native-babel-preset",],"plugins":[//解决TS中的module引用问题，下面会详细说明["module-resolver",{"root":["./src"],"extensions":[".js",".ts",".tsx",".ios.js",".android.js"]}],"@babel/plugin-transform-runtime",],}

当然我们也可以在大于0.57版本中继续使用react-native-typescript-transformer方式支持TS，具体的实现步骤参考这里。

其他方案

haul基于webpack开发的一套ReactNative编译、打包工具，用来替代Facebook官方提供的metro打包工具。

常见问题汇总ReactHook中使用TypeScript

我在另外一篇文章里有详细介绍Hook和TypeScript的结合，请移步这里参考。

TS中使用绝对路径

TS官方支持在tsconfig中使用--baseUrl、--paths等参数允许我们使用绝对路径引用其他模块，但我们按照官方配置使用会有类似如下错误：

error:bundlingfailed:Error:Unabletoresolvemodule`page/passport/component/index`from`/Users/wangcheng/work/we/rrd-react-native/src/page/passport/login/component/AccountLoginPage.tsx`:Module`page/passport/component/index`doesnotexistintheHastemodulemapThismightberelatedtohttps://github.com/facebook/react-native/issues/4968Toresolvetrythefollowing:1.Clearwatchmanwatches:`watchmanwatch-del-all`.2.Deletethe`node_modules`folder:`rm-rfnode_modules&&npminstall`.3.ResetMetroBundlercache:`rm-rf/tmp/metro-bundler-cache-*`or`npmstart----reset-cache`.4.Removehastecache:`rm-rf/tmp/haste-map-react-native-packager-*`.atModuleResolver.resolveDependency(/Users/wangcheng/work/we/rrd-react-native/node_modules/@react-native-community/cli/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:183:15)atResolutionRequest.resolveDependency(/Users/wangcheng/work/we/rrd-react-native/node_modules/@react-native-community/cli/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)atDependencyGraph.resolveDependency(/Users/wangcheng/work/we/rrd-react-native/node_modules/@react-native-community/cli/node_modules/metro/src/node-haste/DependencyGraph.js:283:16)atObject.resolve(/Users/wangcheng/work/we/rrd-react-native/node_modules/@react-native-community/cli/node_modules/metro/src/lib/transformHelpers.js:261:42)atdependencies.map.result(/Users/wangcheng/work/we/rrd-react-native/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/traverseDependencies.js:399:31)atArray.map(<anonymous>)atresolveDependencies(/Users/wangcheng/work/we/rrd-react-native/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:18)at/Users/wangcheng/work/we/rrd-react-native/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/traverseDependencies.js:269:33atGenerator.next(<anonymous>)atasyncGeneratorStep(/Users/wangcheng/work/we/rrd-react-native/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)

其实原因很简单，之前也有提到过，babel编译期间并没有读取tsconfig，我们的--baseUrl、--paths等并没有生效。在babel中我们怎么使用绝对路径引用模块呢，使用插件babel-plugin-module-resolver。

参考配置如下：

"plugins":[["module-resolver",{"root":["./src"],"extensions":[".js",".ts",".tsx",".ios.js",".android.js"],}],"@babel/plugin-transform-runtime",]

遗憾的是按照上面的配置之后，仍然有报错。然后我们在issues里面找到了相关问题，目前有一个解决方案是在需要作为绝对路径引入的目录增加一个package.json。举个例子：

//我们希望component目录作为绝对路径如下引用import{slider}from'component';//在component目录增加package.json{"name":"component"}

至此终于可以在TS中使用绝对路径引入模块了。

TS中引入ESLint关于TypeScript中defaultProps

classcomponent的defaultprops,TS3.0以后支持类的静态属性defaultProps

interfacePageProps{foo?:string;bar:string;}exportclassPageComponentextendsReact.Component<PageProps,{}>{publicstaticdefaultProps={foo:"default"};publicrender():JSX.Element{return(<span>Hello,{this.props.foo.toUpperCase()}</span>);}}

functioncomponent的defaultProps，组件需要是StatelessComponent

interfacePageProps{foo?:string;bar:number;}constPageComponent:StatelessComponent<PageProps>=(props)=>{return(<span>Hello,{props.foo},{props.bar}</span>);};PageComponent.defaultProps={foo:"default"};

metro&babel

我们在TS配置中涉及到了metro.config.js、.babelrc、tsconfig等一系列的配置文件，这里简单总结下他们之间的关系。

metro：是Facebook开发的一个专门为ReactNative提供JS的bundler，作用和前端中的webpack类似，也有人尝试使用metro作为前端的编译打包工具。

metro通过调用babel提供将ES6、JSX、TS等编译成ES5的JS代码。

metro.config.js、.babelrc则是编译期间需要使用的配置文件，tsconfig目前更多的是给VSCode、WebStorm等开发工具使用做TS校验。

参考文档

typescript-and-babel-7

react-native-typescript-transformer

needreact-native-typescript-transformeranymore

TypeScriptModuleresolution

default-property-in-typescript

metro简介

UsingMetroasawebbundler

absolute-paths-for-react-native-typescript