很长一段时间就想把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
文章可能有很多不足的地方,希望大家指正,同时也希望大家可以多多交流,分享出更多的技术方案,谢谢~~
作者:百叶
链接:https://juejin.im/post/5b45bd9d51882519a62f4fe5
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。