前言

濰城網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)成立于2013年到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

TS是什么

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

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

TS優(yōu)點(diǎn)

• TS 最大的優(yōu)勢(shì)是它提供了強(qiáng)大的靜態(tài)分析能力，結(jié)合 TSLint 能對(duì)代碼做到更加嚴(yán)格的檢查約束。傳統(tǒng)的 EcmaScript 由于沒(méi)有靜態(tài)類型，即使有了 ESLint 也只能做到很基本的檢查，一些 typo 問(wèn)題可能線上出了 Bug 后才被發(fā)現(xiàn)。
• TS 讓代碼更加健壯，尤其是對(duì)于大型項(xiàng)目，編譯通過(guò)幾乎就代表運(yùn)行正常，也給重構(gòu)增加了很多信心。
• TS 類型聲明提高了代碼的可讀性、結(jié)構(gòu)清晰
• IDE的提示更加智能

目標(biāo)

• 完成td的媒體模塊(基于react+umi+ant design),重構(gòu)以前的ES6代碼為TS代碼
• umi-typescript 腳手架
• 跑通代碼
• 新建媒體頁(yè)面
• 創(chuàng)建媒體model
• 媒體service
• charles
• 接入dev環(huán)境
• 接入鑒權(quán)
• 頁(yè)面列表
• 路由配置提取出來(lái)
• 結(jié)合td umi/webpack/ dva 配置
• 全局錯(cuò)誤信息從接口讀取
• 更換主題
• 深入代碼(最重要的部分)

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

安裝依賴

基本配置

tsconfig.json

這個(gè)文件指定了用來(lái)編譯這個(gè)項(xiàng)目的根文件和編譯選項(xiàng)

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

jsconfig.json

指定根文件和JavaScript語(yǔ)言服務(wù)提供的功能選項(xiàng)。

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

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

webpack配置

文件后綴改成ts或者tsx

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

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

目錄截圖

data.d.ts

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

model.ts

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

Partial 作用是將傳入的屬性變?yōu)榭蛇x項(xiàng)。

Readonly 作用是將傳入的屬性變?yōu)橹蛔x。

service.ts

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

類組件

connect

connect dva 和 react component

函數(shù)組件

在@types/react中已經(jīng)預(yù)定義一個(gè)類型type SFC，它也是類型interface StatelessComponent 的一個(gè)別名，此外，它已經(jīng)有預(yù)定義的children和其他(defaultProps、displayName等等…)，所以我們不用每次都自己編寫!

form組件

高階函數(shù)

最后

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

推薦文章

1. ts文檔 https://www.tslang.cn/docs/handbook/basic-types.html

2. ts2.8終極react組件 https://juejin.im/post/5b07caf16fb9a07aa83f2977#heading-6

3. ant design pro ts 版本 https://github.com/ant-design/ant-design-pro

4. https://zhuanlan.zhihu.com/p/57958328

【本文是專欄機(jī)構(gòu)“AiChinaTech”的原創(chuàng)文章，微信公眾號(hào)( id: tech-AI)”】

戳這里，看該作者更多好文

文章名稱：Typescript + React 新手篇
分享地址：http://uogjgqi.cn/article/dheecpd.html