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

2018-07-12 admin

很长一段时间就想把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

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

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

原文链接:https://segmentfault.com/a/1190000015609356

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35821.html

文章标题:利用TypeScript构建优雅的React Native项目

相关文章
深入理解JavaScript的React框架的原理
如果你在两个月前问我对React的看法,我很可能这样说: 我的模板在哪里?javascript中的HTML在做些什么疯狂的事情?JSX开起来非常奇怪!快向它开火,消灭它吧! 那是因为我没有理解它. 我发誓,React 无疑是在正确的轨道...
2017-03-26
利用VUE框架,实现列表分页功能示例代码
先来看一下效果图: 功能描述: 1. 点击页面序号跳转到相应页面; 2. 点击单左/单右,向后/向前跳转一个页面; 3. 点击双左/双右,直接跳转到最后一页/第一页; 4. 一次显示当前页面的前三个与后三个页面; 5. 始终显示最后一...
2017-03-11
如何优雅的使用vue+Dcloud(Hbuild)开发混合app
最近在做混合app,前端框架用的是vue,打包app使用的是Dcloud,不过在开发过程中有一点不爽的是,如果想使用Dcloud提供的plus这个环境变量,难倒每次都得使用npm run build先把vue打包,然后再用Hbuild打开...
2018-05-22
利用js查找数组中指定元素并返回该元素的所有索引示例
前言 这篇文章主要给大家介绍的是利用js查找数组中指定元素并返回该元素的所有索引的相关资料,文中给出了详细的示例代码,下面话不多说,来看看详细的代码示例吧。 示例代码 &#x2F;&#x2F;在数组中查找所有出现的x,并返回一个包含匹配索引...
2017-04-01
利用JavaScript脚本实现滚屏效果的方法
许多制作网页的朋友常常制作公告板、信息窗,也经常为了实现整版页面和图像的滚屏显示而烦恼,不用着急,这里有一个简单的方法来实现滚屏显示。我们没有采用Java的.class程序来实现,也不是动态DHTML语言,只是充分地利用了JavaScrip...
2017-03-27
c#程序员对TypeScript的认识过程
简介 TypeScript一直发展不错,我们公司在开发新功能时,考虑到程序的可维护性,使用了TypeScript编写浏览器上的程序,我们是从零开始使用TypeScript,甚至我连javascript也是半罐子,本文描述了一个c#程序员认识...
2017-03-25
vue项目移植tinymce踩坑
前言 最近因业务需求在项目中嵌入了tinymce这个编辑器,用于满足平台给用户编辑各类新闻内容什么的业务需求,前后也花了不少时间体验和对比了市面上各类开源编辑器。 各大WYSIWYG编辑器的简单比较 UEditor: 因为已经不再维护了,需...
2018-01-11
浅谈利用JavaScript进行的DDoS攻击原理与防御
分布式拒绝服务攻击(DDoS)攻击是一种针对网站发起的最古老最普遍的攻击。Nick Sullivan是网站加速和安全服务提供商CloudFlare的一名系统工程师。近日,他撰文介绍了攻击者如何利用恶意网站、服务器劫持和中间人攻击发起DDoS...
2017-03-24
TypeScript 中接口详解
在 TypeScript 中,接口是用作约束作用的,在编译成 JavaScript 的时候,所有的接口都会被擦除掉,因为 JavaScript 中并没有接口这一概念。 先看看一个简单的例子: function printLabel(labe...
2017-03-25
webpack入门+react环境配置
本文介绍了react.js使用webpack搭配环境的入门教程,分享给大家,也给自己做个笔记 如果你想直接上手开发,而跳过这些搭配环境的繁琐过程,推荐你使用官方的create-react-app命令 npm install -g creat...
2017-03-20
回到顶部