摘要:很長一段時間就想把引入公司的項目,但總是因為一些原因被擱置。接下來有機會重構之前的項目,借此機會正好可以引入,為了使后期的項目架構更加完善,近期我會梳理的一些知識點和新特性。
很長一段時間就想把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-ios2.集成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
生成的文件里面有具體每個參數(shù)的含義,也可以參考TS官網文檔。
3.編寫一個TS組件還是一樣的面孔,還是那個讓我們魂牽夢繞的栗子—計數(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) => (); // 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", }, }); 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" }, ...
然后執(zhí)行
npm run tsx
由于ts默認的tsconfig.json中設置了
"outDir": "./lib"
所以在項目根目錄/lib下會生成編譯后的.js文件如
lib └── src ├── Counter.js └── Counter.js.map4.引用編譯后的Counter.js
最后一步就是在入口js中引用編譯后的文件,然后打包測試即可。
總結整體看來,ts的引入讓我們前期多了幾步操作,但這些問題都可以在自動化打包部署中用腳本幫我們完成,另外對于ts不熟悉,一些習慣了js弱類型的開發(fā)者來說這樣的寫法無疑就是沒事找事。我不反駁這種觀點,舉幾個例子
interface Props { onInc?: () => void; } ...{})} /> ...
如果我這里沒有規(guī)定onInc為可為空且無返回值的fun,并且在onPress中沒有做undefind判斷,頁面在使用這個子組件的時候一旦傳入的值是undefind就會導致奔潰。如果這些功能一個人做還好,多人協(xié)作,這樣本可以避免的問題就會被無限放大。
ts的引入可以降低項目的維護成本,作為企業(yè)級的項目這是很有必要的
可能有人會拿ts和flow做比較,首先二者我都有使用過,總體的感覺ts更強大一點,個人建議還是使用ts
文章可能有很多不足的地方,希望大家指正,同時也希望大家可以多多交流,分享出更多的技術方案,謝謝~~
技術交流群:581621024 關注小編 公眾號:LearningTech 每日更新前端技術
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/96059.html
摘要:多端統(tǒng)一開發(fā)框架優(yōu)秀學習資源匯總官方資源項目倉庫官方文檔項目倉庫官方文檔微信小程序官方文檔百度智能小程序官方文檔支付寶小程序官方文檔字節(jié)跳動小程序官方文檔文章教程不敢閱讀包源碼帶你揭秘背后的哲學從到構建適配不同端微信小程序等的應用小程序最 Awesome Taro 多端統(tǒng)一開發(fā)框架 Taro 優(yōu)秀學習資源匯總 showImg(https://segmentfault.com/img/r...
摘要:雅虎從很早就開始招聘和培養(yǎng)研究型人才,雅虎研究院就是在這個過程中應運而生的。今天我就來說一說雅虎研究院的歷史,以及過去十多年間取得的成就,聊一聊如何通過引進高級人才,迅速構建起一支世界級的研發(fā)團隊。 showImg(https://segmentfault.com/img/remote/1460000013995512); 作者:王下邀月熊 編輯:徐川 前端每周清單專注大前端領域內容,...
摘要:在,是當之無愧的王者,贏得了與之間的戰(zhàn)爭,攻陷了的城池。于月發(fā)布了版本,這一版本為了更好的表現(xiàn)加入了渲染方式。前端框架這個前端框架清單可能是年疲勞的元兇之一。的創(chuàng)建者,目前在工作為尋找構建簡單性和自主配置性之間的平衡做了很大的貢獻。 春節(jié)后的第一篇就從這個開始吧~本文已在前端早讀課公眾號上首發(fā) 原文鏈接 JavasScript社區(qū)在創(chuàng)新的道路上開足了馬力,曾經流行過的也許一個月之后就過...
摘要:在年成為最大贏家,贏得了實現(xiàn)的風暴之戰(zhàn)。和他的競爭者位列第二沒有前端開發(fā)者可以忽視和它的生態(tài)系統(tǒng)。他的殺手級特性是探測功能,通過檢查任何用戶的功能,以直觀的方式讓開發(fā)人員檢查所有端點。 2016 JavaScript 后起之秀 本文轉載自:眾成翻譯譯者:zxhycxq鏈接:http://www.zcfy.cc/article/2410原文:https://risingstars2016...
摘要:它不僅從前端移動到后端,我們也開始看到它用于機器學習和增強現(xiàn)實,簡稱。由于其高使用率,年的現(xiàn)狀調查將其稱為采用的安全技術。機器學習框架在年的開發(fā)者峰會上,宣布了他們的機器學習框架的實現(xiàn),稱為。更高級別的用于在之上構建機器學習模型。 2019,開發(fā)者應該學習的16個JavaScript框架 showImg(https://segmentfault.com/img/remote/14600...
閱讀 2117·2023-04-26 00:50
閱讀 2488·2021-10-13 09:39
閱讀 2221·2021-09-22 15:34
閱讀 1613·2021-09-04 16:41
閱讀 1343·2019-08-30 15:55
閱讀 2441·2019-08-30 15:53
閱讀 1714·2019-08-30 15:52
閱讀 754·2019-08-29 16:19