利用TypeScript构建优雅的React Native项目

Posted 2021-04-25 前端小词典

很长一段时间就想把ts引入公司的项目，但总是因为一些原因被搁置。接下来有机会重构之前的rn项目，借此机会正好可以引入ts，为了使后期的项目架构更加完善，近期我会梳理rn的一些知识点和新特性。

首先来介绍下TypeScript

• 始于javascript，归于JavaScript 

• 强大的工具构建 大型应用程序 

• 先进的 JavaScript 

具体看官网传送门,毕竟今天的重点在如何使用

1.新建一个react native项目

 
   
   
 

  
    
    
  
react-native init TSReactNativeDemo
 
   
   
 

项目结构

 
   
   
 

  
    
    
  
├── App.js
  
    
    
  
├── __tests__
  
    
    
  
├── android
  
    
    
  
├── app.json
  
    
    
  
├── index.js
  
    
    
  
├── ios
  
    
    
  
├── node_modules
  
    
    
  
├── package.json
  
    
    
  
└── yarn.lock
 
   
   
 

然后测试下新建的项目是否能运行

 
   
   
 

  
    
    
  
react-native run-android
  
    
    
  
react-native run-ios
 
   
   
 

2.集成TypeScript

由于React Native Packager是通过Babel编译.js文件以及打包的，所以没办法直接使用.tsx。折中本思路就是，先用TypeScript的编译器tsc将.ts或.tsx文件编译成.js文件，再用React Native Packager编译打包即可。

首先我们安装TS依赖：

 
   
   
 

  
    
    
  
yarn add -D typescript
 
   
   
 

然后需要安装types：

 
   
   
 

  
    
    
  
yarn add -D @types/react @types/react-native
 
   
   
 

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

 
   
   
 

  
    
    
  
tsc --init --pretty --sourceMap --target es2015 --outDir ./lib --rootDir ./ --module commonjs --jsx react
 
   
   
 

生成的文件里面有具体每个参数的含义，也可以参考TS官网文档。

3.编写一个TS组件

还是一样的面孔，还是那个让我们魂牵梦绕的栗子—计数器(Counter.tsx)

 
   
   
 

  
    
    
  
import * as React from 'react';
  
    
    
  
import { Button, StyleSheet, Text, View } from 'react-native';
  
    
    
  

  
    
    
  
interface Props {
  
    
    
  
  name: string;
  
    
    
  
  count?: number;
  
    
    
  
  onInc?: () => void;
  
    
    
  
  onDec?: () => void;
  
    
    
  
}
  
    
    
  

  
    
    
  
export default ({ name, count = 1, onInc, onDec }: Props) => (
  
    
    
  
  <View style={styles.root}>
  
    
    
  
    <Text>
  
    
    
  
      Counter {name}: {count}
  
    
    
  
    </Text>
  
    
    
  
    <View>
  
    
    
  
      <Button title="+" onPress={onInc || (() => {})} />
  
    
    
  
      <Button title="-" onPress={onDec || (() => {})} />
  
    
    
  
    </View>
  
    
    
  
  </View>
  
    
    
  
);
  
    
    
  

  
    
    
  
// styles
  
    
    
  
const styles = StyleSheet.create({
  
    
    
  
  root: {
  
    
    
  
    alignItems: 'center',
  
    
    
  
    alignSelf: 'center',
  
    
    
  
  },
  
    
    
  
  buttons: {
  
    
    
  
    flexDirection: 'row',
  
    
    
  
    minHeight: 70,
  
    
    
  
    alignItems: 'stretch',
  
    
    
  
    alignSelf: 'center',
  
    
    
  
    borderWidth: 5,
  
    
    
  
  },
  
    
    
  
  button: {
  
    
    
  
    flex: 1,
  
    
    
  
    paddingVertical: 0,
  
    
    
  
  },
  
    
    
  
  greeting: {
  
    
    
  
    color: '#999',
  
    
    
  
    fontWeight: 'bold',
  
    
    
  
  },
  
    
    
  
});
 
   
   
 

接下来就是利用ts编译器编译写好的.tsx个人建议在package.json中配置一下

 
   
   
 

  
    
    
  
...
  
    
    
  
"scripts": {
  
    
    
  
    "start": "node node_modules/react-native/local-cli/cli.js start",
  
    
    
  
    "tsx":"./node_modules/.bin/tsc",
  
    
    
  
    "test": "jest"
  
    
    
  
  },
  
    
    
  
...
 
   
   
 

然后执行

 
   
   
 

  
    
    
  
npm run tsx
 
   
   
 

由于ts默认的tsconfig.json中设置了

 
   
   
 

  
    
    
  
"outDir": "./lib"
 
   
   
 

所以在项目根目录/lib下会生成编译后的.js文件如

 
   
   
 

  
    
    
  
lib
  
    
    
  
└── src
  
    
    
  
        ├── Counter.js
  
    
    
  
        └── Counter.js.map
 
   
   
 

4.引用编译后的Counter.js

最后一步就是在入口js中引用编译后的文件，然后打包测试即可。

总结

整体看来，ts的引入让我们前期多了几步操作，但这些问题都可以在自动化打包部署中用脚本帮我们完成，另外对于ts不熟悉，一些习惯了js弱类型的开发者来说这样的写法无疑就是没事找事。我不反驳这种观点，举几个例子

 
   
   
 

  
    
    
  
interface Props {
  
    
    
  
  onInc?: () => void;
  
    
    
  
}
  
    
    
  
...
  
    
    
  
    <View>
  
    
    
  
      <Button title="+" onPress={onInc || (() => {})}
  
    
    
  
    />
  
    
    
  
...
 
   
   
 

如果我这里没有规定onInc为可为空且无返回值的fun，并且在onPress中没有做undefind判断，页面在使用这个子组件的时候一旦传入的值是undefind就会导致奔溃。如果这些功能一个人做还好，多人协作，这样本可以避免的问题就会被无限放大。

ts的引入可以降低项目的维护成本，作为企业级的项目这是很有必要的

可能有人会拿ts和flow做比较，首先二者我都有使用过，总体的感觉ts更强大一点，个人建议还是使用ts

文章可能有很多不足的地方，希望大家指正，同时也希望大家可以多多交流，分享出更多的技术方案，谢谢～～