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

FingerLiu 发布于2019-08-22 18:39 / 1558人阅读

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

很长一段时间就想把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) => (
  
    
      Counter {name}: {count}

接下来就是利用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;
}
...

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

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

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

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

技术交流群:581621024 关注小编公众号：LearningTech 每日更新前端技术

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96059.html

Taro 优秀学习资源汇总

摘要：多端统一开发框架优秀学习资源汇总官方资源项目仓库官方文档项目仓库官方文档微信小程序官方文档百度智能小程序官方文档支付宝小程序官方文档字节跳动小程序官方文档文章教程不敢阅读包源码带你揭秘背后的哲学从到构建适配不同端微信小程序等的应用小程序最 Awesome Taro 多端统一开发框架 Taro 优秀学习资源汇总 showImg(https://segmentfault.com/img/r...

toddmark 2019-08-23 18:02 评论0 收藏0
前端每周清单第 56 期: D3 5.0，深入 React 事件系统，SketchCode 界面生成

摘要：雅虎从很早就开始招聘和培养研究型人才，雅虎研究院就是在这个过程中应运而生的。今天我就来说一说雅虎研究院的历史，以及过去十多年间取得的成就，聊一聊如何通过引进高级人才，迅速构建起一支世界级的研发团队。 showImg(https://segmentfault.com/img/remote/1460000013995512); 作者：王下邀月熊编辑：徐川前端每周清单专注大前端领域内容，...

lavnFan 2019-08-22 15:45 评论0 收藏0
2016-JavaScript之星

摘要：在，是当之无愧的王者，赢得了与之间的战争，攻陷了的城池。于月发布了版本，这一版本为了更好的表现加入了渲染方式。前端框架这个前端框架清单可能是年疲劳的元凶之一。的创建者，目前在工作为寻找构建简单性和自主配置性之间的平衡做了很大的贡献。春节后的第一篇就从这个开始吧~本文已在前端早读课公众号上首发原文链接 JavasScript社区在创新的道路上开足了马力，曾经流行过的也许一个月之后就过...

Binguner 2019-08-20 14:04 评论0 收藏0
(译 & 转载) 2016 JavaScript 后起之秀

摘要：在年成为最大赢家，赢得了实现的风暴之战。和他的竞争者位列第二没有前端开发者可以忽视和它的生态系统。他的杀手级特性是探测功能，通过检查任何用户的功能，以直观的方式让开发人员检查所有端点。 2016 JavaScript 后起之秀本文转载自：众成翻译译者：zxhycxq链接：http://www.zcfy.cc/article/2410原文：https://risingstars2016...

darry 2019-08-20 14:04 评论0 收藏0
2019，开发者应该学习的16个JavaScript框架

摘要：它不仅从前端移动到后端，我们也开始看到它用于机器学习和增强现实，简称。由于其高使用率，年的现状调查将其称为采用的安全技术。机器学习框架在年的开发者峰会上，宣布了他们的机器学习框架的实现，称为。更高级别的用于在之上构建机器学习模型。 2019，开发者应该学习的16个JavaScript框架 showImg(https://segmentfault.com/img/remote/14600...

Harpsichord1207 2019-08-23 16:45 评论0 收藏0