很長一段時間就想把ts引入公司的項目，但總是因為一些原因被擱置。接下來有機會重構(gòu)之前的rn項目，借此機會正好可以引入ts，為了使后期的項目架構(gòu)更加完善，近期我會梳理rn的一些知識點和新特性。
首先來介紹下TypeScript
始于JavaScript，歸于JavaScript
強大的工具構(gòu)建 大型應用程序
先進的 JavaScript
具體看官網(wǎng)傳送門,畢竟今天的重點在如何使用
1.新建一個react native項目
react-nativeinit TSReactNativeDemo
項目結(jié)構(gòu)
├──App.js├── __tests__├──android├──app.json├──index.js├──ios├──node_modules├──package.json└──yarn.lock
然后測試下新建的項目是否能運行
react-nativerun-androidreact-nativerun-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 ./ --modulecommonjs--jsxreact
生成的文件里面有具體每個參數(shù)的含義，也可以參考TS官網(wǎng)文檔。
3.編寫一個TS組件
還是一樣的面孔，還是那個讓我們魂牽夢繞的栗子—計數(shù)器(Counter.tsx)
import *asReact from'react';import { Button, StyleSheet, Text, View } from'react-native';interfaceProps{? name: string;? count?: number;? onInc?: () => void;? onDec?: () => void;}exportdefault({ name, count =1, onInc, onDec }: Props) => (? ? ? ? ? ? Counter {name}: {count}? ? ? ? ? ? ? {})} />? ? ? {})} />? ? ? );// stylesconststyles = 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"},...
然后執(zhí)行
npm run tsx
由于ts默認的tsconfig.json中設置了
"outDir":"./lib"
所以在項目根目錄/lib下會生成編譯后的.js文件如
lib└──src├──Counter.js└──Counter.js.map
4.引用編譯后的Counter.js
最后一步就是在入口js中引用編譯后的文件，然后打包測試即可。
總結(jié)
整體看來，ts的引入讓我們前期多了幾步操作，但這些問題都可以在自動化打包部署中用腳本幫我們完成，另外對于ts不熟悉，一些習慣了js弱類型的開發(fā)者來說這樣的寫法無疑就是沒事找事。我不反駁這種觀點，舉幾個例子
interface Props {? onInc?:()=>void;}...? ? {})}? ? />...
如果我這里沒有規(guī)定onInc為可為空且無返回值的fun，并且在onPress中沒有做undefind判斷，頁面在使用這個子組件的時候一旦傳入的值是undefind就會導致奔潰。如果這些功能一個人做還好，多人協(xié)作，這樣本可以避免的問題就會被無限放大。
ts的引入可以降低項目的維護成本，作為企業(yè)級的項目這是很有必要的
可能有人會拿ts和flow做比較，首先二者我都有使用過，總體的感覺ts更強大一點，個人建議還是使用ts
文章可能有很多不足的地方，希望大家指正，同時也希望大家可以多多交流，分享出更多的技術方案，謝謝～～
