利用TypeScript構(gòu)建優(yōu)雅的React Native項(xiàng)目

FingerLiu 發(fā)布于2019-08-22 18:39 / 1756人閱讀

摘要：很長(zhǎng)一段時(shí)間就想把引入公司的項(xiàng)目，但總是因?yàn)橐恍┰虮粩R置。接下來有機(jī)會(huì)重構(gòu)之前的項(xiàng)目，借此機(jī)會(huì)正好可以引入，為了使后期的項(xiàng)目架構(gòu)更加完善，近期我會(huì)梳理的一些知識(shí)點(diǎn)和新特性。

很長(zhǎng)一段時(shí)間就想把ts引入公司的項(xiàng)目，但總是因?yàn)橐恍┰虮粩R置。接下來有機(jī)會(huì)重構(gòu)之前的rn項(xiàng)目，借此機(jī)會(huì)正好可以引入ts，為了使后期的項(xiàng)目架構(gòu)更加完善，近期我會(huì)梳理rn的一些知識(shí)點(diǎn)和新特性。

首先來介紹下TypeScript

始于JavaScript，歸于JavaScript

強(qiáng)大的工具構(gòu)建大型應(yīng)用程序

先進(jìn)的 JavaScript

具體看官網(wǎng)傳送門,畢竟今天的重點(diǎn)在如何使用

1.新建一個(gè)react native項(xiàng)目

react-native init TSReactNativeDemo

項(xiàng)目結(jié)構(gòu)

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

然后測(cè)試下新建的項(xiàng)目是否能運(yùn)行

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

生成的文件里面有具體每個(gè)參數(shù)的含義，也可以參考TS官網(wǎng)文檔。

3.編寫一個(gè)TS組件

還是一樣的面孔，還是那個(gè)讓我們魂?duì)繅?mèng)繞的栗子—計(jì)數(shù)器(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個(gè)人建議在package.json中配置一下

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

然后執(zhí)行

npm run tsx

由于ts默認(rèn)的tsconfig.json中設(shè)置了

"outDir": "./lib"

所以在項(xiàng)目根目錄/lib下會(huì)生成編譯后的.js文件如

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

4.引用編譯后的Counter.js

最后一步就是在入口js中引用編譯后的文件，然后打包測(cè)試即可。

總結(jié)

整體看來，ts的引入讓我們前期多了幾步操作，但這些問題都可以在自動(dòng)化打包部署中用腳本幫我們完成，另外對(duì)于ts不熟悉，一些習(xí)慣了js弱類型的開發(fā)者來說這樣的寫法無疑就是沒事找事。我不反駁這種觀點(diǎn)，舉幾個(gè)例子

interface Props {
  onInc?: () => void;
}
...

如果我這里沒有規(guī)定onInc為可為空且無返回值的fun，并且在onPress中沒有做undefind判斷，頁面在使用這個(gè)子組件的時(shí)候一旦傳入的值是undefind就會(huì)導(dǎo)致奔潰。如果這些功能一個(gè)人做還好，多人協(xié)作，這樣本可以避免的問題就會(huì)被無限放大。

ts的引入可以降低項(xiàng)目的維護(hù)成本，作為企業(yè)級(jí)的項(xiàng)目這是很有必要的

可能有人會(huì)拿ts和flow做比較，首先二者我都有使用過，總體的感覺ts更強(qiáng)大一點(diǎn)，個(gè)人建議還是使用ts

文章可能有很多不足的地方，希望大家指正，同時(shí)也希望大家可以多多交流，分享出更多的技術(shù)方案，謝謝～～

技術(shù)交流群:581621024 關(guān)注小編公眾號(hào)：LearningTech 每日更新前端技術(shù)