TypeScript React Native入门

上一篇我们介绍了TypeScript如何跟React搭配使用，这篇我们继续介绍如何在React Native中使用TS。

关于React Native，我之前写过一本React Native电子书， 如果不熟悉RN的话可以参考一下。

本文涵盖内容如下：

TypeScript & React Native

TSLint

Jest

准备知识

本文假设读者已经知道如何用RN进行开发，至少是把开发环境搭建起来，能在模拟器或者手机上运行App了。如果不了解的话， 请参考React Native 移动开发入门与实战。

新建项目

用正常初始化一个RN项目。

项目初始结构为：

运行

在手机或者模拟器上运行起来。

引入TypeScript

目前React Native Packager是通过Babel编译文件以及打包的，暂时还没有特别好的方法直接使用。所以基本思路就是， 先用TypeScript的编译器将或文件编译成文件，再用React Native Packager编译打包即可。

首先我们安装TS依赖：

然后需要安装types：

然后需要配置，可以用如下命令生成：

生成的文件里面有具体每个参数的含义，也可以参考TS官网文档。 也可以直接参考上一篇中的文件，进行少许修改即可。

编写TS组件

上面配置好TS后， 我们就可以开始用TS写组件了。还是跟上篇一样， 写一个简单的。

然后我们执行命令，就会在目录下生成相同目录结构的文件等。

然后在中如下使用即可：

由于目录下的文件是编译生成，因此不需要放在git里面， 我们在中添加忽略之：

测试

注意， enzyme测试ReactNative需要用react-native-mock， 但是目前不支持React v16+， 因此暂时不采用enzyme吧。

RN还是用Jest做测试，为了支持TS，我们安装包。

同样，我们也添加相应的：

修改文件里面属性：

然后我们就可以写测试代码了：