利用TypeScript構建優雅的React Native專案

百葉發表於2019-03-02
TypeScriptReact Native

很長一段時間就想把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

相關文章