極鏈科技前端工程師茅丹丹

前言

· TS是什么

Type = Type + (標(biāo)準(zhǔn)JS)。

TS的官方網(wǎng)站：Type is a typed superset of Java that compiles to plain Java。Type是一個編譯到純JS的有類型定義的JS超集。

· TS優(yōu)點

· TS 最大的優(yōu)勢是它提供了強大的靜態(tài)分析能力，結(jié)合 TSLint 能對代碼做到更加嚴(yán)格的檢查約束。傳統(tǒng)的 Ecma 由于沒有靜態(tài)類型，即使有了 ESLint 也只能做到很基本的檢查，一些 typo 問題可能線上出了 Bug 后才被發(fā)現(xiàn)。

· TS 讓代碼更加健壯，尤其是對于大型項目，編譯通過幾乎就代表運行正常，也給重構(gòu)增加了很多信心。

· TS 類型聲明讓提高代碼的可讀性、結(jié)構(gòu)清晰

· IDE的提示更加智能

目標(biāo)

完成td的媒體模塊(基于react+umi+ant design),重構(gòu)以前的ES6代碼為TS代碼

· ?umi-type 腳手架

· ?跑通代碼

· ?新建媒體頁面

· ?創(chuàng)建媒體model

· ?媒體service

· ?charles

· ?接入dev環(huán)境

· ?接入鑒權(quán)

· ?頁面列表

· ?路由配置提取出來

· ?結(jié)合td umi/webpack/ dva 配置

· ?全局錯誤信息從接口讀取

· �更換主題

· �深入代碼(最重要的部分)

花了大概兩天時間實現(xiàn)以上勾選內(nèi)容，主要是熟悉ts的配置文件、構(gòu)建配置、ts語法、以及react、dva如何寫。

安裝依賴

基本配置

tsconfig.json

這個文件指定了用來編譯這個項目的根文件和編譯選項

JSX參數(shù)指定工作模式：preserve 模式和 react 模式以及 react-native 模式。這三個模式只影響編譯策略。preserve 模式會生成代碼中會保留 JSX ，以供后續(xù)的轉(zhuǎn)換操作使用(比如：Babel)，輸出的文件是 .jsx 格式的；而 react模式則會直接編譯成 React.，在使用前就不需要再進行 JSX 轉(zhuǎn)換了，輸出的文件是 .js 格式的；react-native模式相當(dāng)于preserve，它也保留了所有的JSX，但是輸出文件的擴展名是.js。

jsconfig.json

指定根文件和Java語言服務(wù)提供的功能選項。

提示：如果您不使用Java，則無需擔(dān)心jsconfig.json。

提示：jsconfig.json源于tsconfig.json，是Type的配置文件。jsconfig.json相當(dāng)于tsconfig.json的“allowJs”屬性設(shè)置為true。

webpack配置

文件后綴改成ts或者tsx

文件名為ts和tsx(React)后綴的代碼了，它可以和現(xiàn)有的ES6代碼共存，IDE會自動校驗這部分代碼，webpack打包也沒問題了。

業(yè)務(wù)代碼

目錄截圖

data.d.ts

定義業(yè)務(wù)對象數(shù)據(jù)結(jié)構(gòu)接口(interface)，字段類型可以是number，string，boolean，也可以是業(yè)務(wù)對象(下方的Member)，也可以是多個值中的一個(下方的status，可以設(shè)置成枚舉)，不確定類型的時候用any，數(shù)組的話用用‘類型[]’，字段不一定存在用‘？’

model.ts

處理數(shù)據(jù)和邏輯，包含同步更新 state 的 reducers，處理異步邏輯的 effects，訂閱數(shù)據(jù)源的 subions 。

Partial 作用是將傳入的屬性變?yōu)榭蛇x項.

Readonly 作用是將傳入的屬性變?yōu)樽兂芍蛔x

service.ts

定義接口請求的路徑、方法和參數(shù)，返回為Promise

類組件

connect

connect dva 和 react component

函數(shù)組件

在@types/react中已經(jīng)預(yù)定義一個類型type SFC，它也是類型interface StatelessComponent

的一個別名，此外，它已經(jīng)有預(yù)定義的children和其他(defaultProps、displayName等等…)，所以我們不用每次都自己編寫！

form組件

高階函數(shù)

最后

ts 使得代碼變得非常清晰、可讀、規(guī)范，雖然改起來有些工作量。希望后續(xù)的項目中可以應(yīng)用起來。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的react json转换_Typescript + React 新手篇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。