自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

用TypeScript編寫(xiě)React的優(yōu)秀實(shí)踐

作者：ConardLi 譯
開(kāi)發(fā) 前端
如今， React 和 TypeScript 是許多開(kāi)發(fā)人員正在使用的兩種很棒的技術(shù)。但是把他們結(jié)合起來(lái)使用就變得很棘手了，有時(shí)很難找到正確的答案。不要擔(dān)心，本文我們來(lái)總結(jié)一下兩者結(jié)合使用的優(yōu)秀實(shí)踐。

 如今， React 和 TypeScript 是許多開(kāi)發(fā)人員正在使用的兩種很棒的技術(shù)。但是把他們結(jié)合起來(lái)使用就變得很棘手了，有時(shí)很難找到正確的答案。不要擔(dān)心，本文我們來(lái)總結(jié)一下兩者結(jié)合使用的優(yōu)秀實(shí)踐。

[[328323]]

React 和 TypeScript 如何一起使用

在開(kāi)始之前，讓我們回顧一下 React 和 TypeScript 是如何一起工作的。React 是一個(gè) “用于構(gòu)建用戶(hù)界面的 JavaScript 庫(kù)” ，而 TypeScript 是一個(gè) “可編譯為普通 JavaScript 的 JavaScript類(lèi)型化超集” 。通過(guò)同時(shí)使用它們，我們實(shí)際上是使用 JavaScript 的類(lèi)型化版本來(lái)構(gòu)建 UI。

將它們一起使用的原因是為了獲得靜態(tài)類(lèi)型化語(yǔ)言( TypeScript )對(duì) UI 的好處：減少 JS 帶來(lái)的 bug，讓前端開(kāi)發(fā)更安全。

TypeScript 會(huì)編譯我的 React 代碼嗎?

一個(gè)經(jīng)常被提到的常見(jiàn)問(wèn)題是 TypeScript 是否編譯你的 React 代碼。TypeScript 的工作原理類(lèi)似于下面的方式：

  • TS：“嘿，這是你所有的UI代碼嗎?”
  • React：“是的!”
  • TS：“酷!我將對(duì)其進(jìn)行編譯，并確保你沒(méi)有錯(cuò)過(guò)任何內(nèi)容。”
  • React：“聽(tīng)起來(lái)對(duì)我很好!”

因此，答案是肯定的!但是稍后，當(dāng)我們介紹 tsconfig.json 配置時(shí)，大多數(shù)時(shí)候你都想使用 "noEmit": true 。這是因?yàn)橥ǔＧ闆r下，我們只是利用 TypeScript 進(jìn)行類(lèi)型檢查。

概括地說(shuō)， TypeScript 編譯你的 React 代碼以對(duì)你的代碼進(jìn)行類(lèi)型檢查。在大多數(shù)情況下，它不會(huì)發(fā)出任何 JavaScript 輸出。輸出仍然類(lèi)似于非 TypeScript React 項(xiàng)目。

TypeScript 可以與 React 和 Webpack 一起使用嗎?

是的， TypeScript 可以與 React 和 webpack 一起使用。幸運(yùn)的是，官方 TypeScript 手冊(cè)對(duì)此提供了配置指南。

希望這能使你輕而易舉地了解兩者的工作方式。現(xiàn)在，進(jìn)入最佳實(shí)踐!

最佳實(shí)踐

我們研究了最常見(jiàn)的問(wèn)題，并整理了 React with TypeScript 最常用的一些寫(xiě)法和配置。這樣，通過(guò)使用本文作為參考，你可以在項(xiàng)目中遵循最佳實(shí)踐。

配置

配置是開(kāi)發(fā)中最無(wú)趣但是最重要的部分之一。我們?cè)鯓硬拍茉谧疃痰臅r(shí)間內(nèi)完成這些配置，從而提供比較大的效率和生產(chǎn)力?我們一起來(lái)討論下面的配置

  • tsconfig.json
    1. npx create-react-app my-app --template typescript 
  • ESLint / Prettier
  • VS Code 擴(kuò)展和配置

項(xiàng)目初始化

初始化一個(gè) React/TypeScript 應(yīng)用程序的最快方法是 create-react-app 與 TypeScript 模板一起使用。你可以運(yùn)行以下面的命令：

npx create-react-app my-app --template typescript

這可以讓你開(kāi)始使用 TypeScript 編寫(xiě) React 。一些明顯的區(qū)別是：

  • .tsx：TypeScript JSX 文件擴(kuò)展
  • tsconfig.json：具有一些默認(rèn)配置的 TypeScript 配置文件
  • react-app-env.d.ts：TypeScript 聲明文件，可以進(jìn)行允許引用 SVG 這樣的配置

tsconfig.json

幸運(yùn)的是，最新的 React/TypeScript 會(huì)自動(dòng)生成 tsconfig.json ，并且默認(rèn)帶有一些最基本的配置。我們建議你修改成下面的內(nèi)容：

 

  1. { 
  2.   "compilerOptions": { 
  3.     "target": "es5", // 指定 ECMAScript 版本 
  4.     "lib": [ 
  5.       "dom", 
  6.       "dom.iterable", 
  7.       "esnext" 
  8.     ], // 要包含在編譯中的依賴(lài)庫(kù)文件列表 
  9.     "allowJs": true, // 允許編譯 JavaScript 文件 
  10.     "skipLibCheck": true, // 跳過(guò)所有聲明文件的類(lèi)型檢查 
  11.     "esModuleInterop": true, // 禁用命名空間引用 (import * as fs from "fs") 啟用 CJS/AMD/UMD 風(fēng)格引用 (import fs from "fs") 
  12.     "allowSyntheticDefaultImports": true, // 允許從沒(méi)有默認(rèn)導(dǎo)出的模塊進(jìn)行默認(rèn)導(dǎo)入 
  13.     "strict": true, // 啟用所有嚴(yán)格類(lèi)型檢查選項(xiàng) 
  14.     "forceConsistentCasingInFileNames": true, // 不允許對(duì)同一個(gè)文件使用不一致格式的引用 
  15.     "module": "esnext", // 指定模塊代碼生成 
  16.     "moduleResolution": "node", // 使用 Node.js 風(fēng)格解析模塊 
  17.     "resolveJsonModule": true, // 允許使用 .json 擴(kuò)展名導(dǎo)入的模塊 
  18.     "noEmit": true, // 不輸出(意思是不編譯代碼，只執(zhí)行類(lèi)型檢查) 
  19.     "jsx": "react", // 在.tsx文件中支持JSX 
  20.     "sourceMap": true, // 生成相應(yīng)的.map文件 
  21.     "declaration": true, // 生成相應(yīng)的.d.ts文件 
  22.     "noUnusedLocals": true, // 報(bào)告未使用的本地變量的錯(cuò)誤 
  23.     "noUnusedParameters": true, // 報(bào)告未使用參數(shù)的錯(cuò)誤 
  24.     "experimentalDecorators": true, // 啟用對(duì)ES裝飾器的實(shí)驗(yàn)性支持 
  25.     "incremental": true, // 通過(guò)從以前的編譯中讀取/寫(xiě)入信息到磁盤(pán)上的文件來(lái)啟用增量編譯 
  26.     "noFallthroughCasesInSwitch": true  
  27.   }, 
  28.   "include": [ 
  29.     "src/**/*" // *** TypeScript文件應(yīng)該進(jìn)行類(lèi)型檢查 *** 
  30.   ], 
  31.   "exclude": ["node_modules", "build"] // *** 不進(jìn)行類(lèi)型檢查的文件 *** 
  32. } 

其他建議來(lái)自 react-typescript-cheatsheet 社區(qū)

ESLint / Prettier

為了確保你的代碼遵循項(xiàng)目或團(tuán)隊(duì)的規(guī)則，并且樣式保持一致，建議你設(shè)置 ESLint 和 Prettier 。為了讓它們配合的很好，請(qǐng)按照以下步驟進(jìn)行設(shè)置。

1.安裝依賴(lài)

 

  1. yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react --dev 

2.在根目錄下創(chuàng)建一個(gè)eslintrc.js 文件并添加以下內(nèi)容：

 

  1. module.exports =  { 
  2.   parser:  '@typescript-eslint/parser',  // 指定ESLint解析器 
  3.   extends:  [ 
  4.     'plugin:react/recommended',  // 使用來(lái)自 @eslint-plugin-react 的推薦規(guī)則 
  5.     'plugin:@typescript-eslint/recommended',  // 使用來(lái)自@typescript-eslint/eslint-plugin的推薦規(guī)則 
  6.   ], 
  7.   parserOptions:  { 
  8.   ecmaVersion:  2018,  // 允許解析最新的 ECMAScript 特性 
  9.   sourceType:  'module',  // 允許使用 import 
  10.   ecmaFeatures:  { 
  11.     jsx:  true,  // 允許對(duì)JSX進(jìn)行解析 
  12.   }, 
  13.   }, 
  14.   rules:  { 
  15.     // 自定義規(guī)則 
  16.     // e.g. "@typescript-eslint/explicit-function-return-type": "off", 
  17.   }, 
  18.   settings:  { 
  19.     react:  { 
  20.       version:  'detect',  // 告訴 eslint-plugin-react 自動(dòng)檢測(cè) React 的版本 
  21.     }, 
  22.   }, 
  23. }; 

3.添加 Prettier 依賴(lài)

 

  1. yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev 

4.在根目錄下創(chuàng)建一個(gè) .prettierrc.js 文件并添加以下內(nèi)容：

 

  1. module.exports =  { 
  2.   semi:  true, 
  3.   trailingComma:  'all', 
  4.   singleQuote:  true, 
  5.   printWidth:  120, 
  6.   tabWidth:  4, 
  7. }; 

更新 .eslintrc.js 文件：

 

  1. module.exports =  { 
  2.   parser:  '@typescript-eslint/parser',  // 指定ESLint解析器 
  3.   extends:  [ 
  4.     'plugin:react/recommended',  // 使用來(lái)自 @eslint-plugin-react 的推薦規(guī)則 
  5.     'plugin:@typescript-eslint/recommended',  // 使用來(lái)自@typescript-eslint/eslint-plugin的推薦規(guī)則 
  6.     'prettier/@typescript-eslint',  // 使用 ESLint -config-prettier 禁用來(lái)自@typescript-eslint/ ESLint 與 prettier 沖突的 ESLint 規(guī)則 
  7.     'plugin:prettier/recommended',   
  8.   ], 
  9.   parserOptions:  { 
  10.   ecmaVersion:  2018,  // 允許解析最新的 ECMAScript 特性 
  11.   sourceType:  'module',  // 允許使用 import 
  12.   ecmaFeatures:  { 
  13.     jsx:  true,  // 允許對(duì)JSX進(jìn)行解析 
  14.   }, 
  15.   }, 
  16.   rules:  { 
  17.     // 自定義規(guī)則 
  18.     // e.g. "@typescript-eslint/explicit-function-return-type": "off", 
  19.   }, 
  20.   settings:  { 
  21.     react:  { 
  22.       version:  'detect',  // 告訴 eslint-plugin-react 自動(dòng)檢測(cè) React 的版本 
  23.     }, 
  24.   }, 
  25. }; 

VSCode 擴(kuò)展和設(shè)置

我們添加了 ESLint 和 Prettier ，下一步就是在保存時(shí)自動(dòng)修復(fù)/美化我們的代碼。

首先，安裝 VSCode 的 ESLint extension 和 Prettier extension 。這將使 ESLint 與您的編輯器無(wú)縫集成。

接下來(lái)，通過(guò)將以下內(nèi)容添加到您的中來(lái)更新工作區(qū)設(shè)置 .vscode/settings.json ：

 

  1. { 
  2.     "editor.formatOnSave": true 
  3. } 

保存時(shí)， VS Code 會(huì)發(fā)揮它的魔力并修復(fù)您的代碼。很棒!

組件

React 的核心概念之一是組件。在這里，我們將引用 React v16.8 以后的標(biāo)準(zhǔn)組件，這意味著使用 Hook 而不是類(lèi)的組件。

通常，一個(gè)基本的組件有很多需要關(guān)注的地方。讓我們看一個(gè)例子：

 

  1. import React from 'react' 
  2.  
  3. // 函數(shù)聲明式寫(xiě)法 
  4. function Heading(): React.ReactNode { 
  5.   return <h1>My Website Heading</h1> 
  6. } 
  7.  
  8. // 函數(shù)擴(kuò)展式寫(xiě)法 
  9. const OtherHeading: React.FC = () => <h1>My Website Heading</h1> 

注意這里的關(guān)鍵區(qū)別。在第一個(gè)例子中，我們使用函數(shù)聲明式寫(xiě)法，我們注明了這個(gè)函數(shù)返回值是 React.ReactNode 類(lèi)型。相反，第二個(gè)例子使用了一個(gè)函數(shù)表達(dá)式。因?yàn)榈诙€(gè)實(shí)例返回一個(gè)函數(shù)，而不是一個(gè)值或表達(dá)式，所以我們我們注明了這個(gè)函數(shù)返回值是 React.FC 類(lèi)型。

記住這兩種方式可能會(huì)讓人混淆。這主要取決于設(shè)計(jì)選擇。無(wú)論您選擇在項(xiàng)目中使用哪個(gè)，都要始終如一地使用它。

Props

我們將介紹的下一個(gè)核心概念是 Props。你可以使用 interface 或 type 來(lái)定義 Props 。讓我們看另一個(gè)例子：

 

  1. import React from 'react' 
  2.  
  3. interface Props { 
  4.   name: string; 
  5.   color: string; 
  6. } 
  7.  
  8. type OtherProps = { 
  9.   name: string; 
  10.   color: string; 
  11. } 
  12.  
  13. // Notice here we're using the function declaration with the interface Props 
  14. function Heading({ name, color }: Props): React.ReactNode { 
  15.   return <h1>My Website Heading</h1> 
  16. } 
  17.  
  18. // Notice here we're using the function expression with the type OtherProps 
  19. const OtherHeading: React.FC<OtherProps> = ({ name, color }) => 
  20.   <h1>My Website Heading</h1> 

 

關(guān)于 interface 或 type ，我們建議遵循 react-typescript-cheatsheet 社區(qū)提出的準(zhǔn)則：

  • 在編寫(xiě)庫(kù)或第三方環(huán)境類(lèi)型定義時(shí)，始終將 interface 用于公共 API 的定義。
  • 考慮為你的 React 組件的 State 和 Props 使用 type ，因?yàn)樗芗s束。”

讓我們?cè)倏匆粋€(gè)示例：

 

  1. import React from 'react' 
  2.  
  3. type Props = { 
  4.    /** color to use for the background */ 
  5.   color?: string; 
  6.    /** standard children prop: accepts any valid React Node */ 
  7.   children: React.ReactNode; 
  8.    /** callback function passed to the onClick handler*/ 
  9.   onClick: ()  => void; 
  10. } 
  11.  
  12. const Button: React.FC<Props> = ({ children, color = 'tomato', onClick }) => { 
  13.    return <button style={{ backgroundColor: color }} onClick={onClick}>{children}</button> 
  14. } 

在此 <Button /> 組件中，我們?yōu)?Props 使用 type。每個(gè) Props 上方都有簡(jiǎn)短的說(shuō)明，以為其他開(kāi)發(fā)人員提供更多背景信息。? 表示 Props 是可選的。children props 是一個(gè) React.ReactNode 表示它還是一個(gè) React 組件

通常，在 React 和 TypeScript 項(xiàng)目中編寫(xiě) Props 時(shí)，請(qǐng)記住以下幾點(diǎn)：

  • 始終使用 TSDoc 標(biāo)記為你的 Props 添加描述性注釋 /** comment */。
  • 無(wú)論你為組件 Props 使用 type 還是 interfaces ，都應(yīng)始終使用它們。
  • 如果 props 是可選的，請(qǐng)適當(dāng)處理或使用默認(rèn)值。

Hooks

幸運(yùn)的是，當(dāng)使用 Hook 時(shí)， TypeScript 類(lèi)型推斷工作得很好。這意味著你沒(méi)有什么好擔(dān)心的。舉個(gè)例子:

 

  1. // `value` is inferred as a string 
  2. // `setValue` is inferred as (newValue: string) => void 
  3. const [value, setValue] = useState('') 

TypeScript 推斷出 useState 鉤子給出的值。這是一個(gè) React 和 TypeScript 協(xié)同工作的成果。

在極少數(shù)情況下，你需要使用一個(gè)空值初始化 Hook ，可以使用泛型并傳遞聯(lián)合以正確鍵入 Hook 。查看此實(shí)例：

 

  1. type User = { 
  2.   email: string; 
  3.   id: string; 
  4. } 
  5.  
  6. // the generic is the < > 
  7. // the union is the User | null 
  8. // together, TypeScript knows, "Ah, user can be User or null". 
  9. const [user, setUser] = useState<User | null>(null); 

下面是一個(gè)使用 userReducer 的例子：

 

  1. type AppState = {}; 
  2. type Action = 
  3.   | { type: "SET_ONE"; payload: string } 
  4.   | { type: "SET_TWO"; payload: number }; 
  5.  
  6. export function reducer(state: AppState, action: Action): AppState { 
  7.   switch (action.type) { 
  8.     case "SET_ONE": 
  9.       return { 
  10.         ...state, 
  11.         one: action.payload // `payload` is string 
  12.       }; 
  13.     case "SET_TWO": 
  14.       return { 
  15.         ...state, 
  16.         two: action.payload // `payload` is number 
  17.       }; 
  18.     default: 
  19.       return state; 
  20.   } 
  21. } 

可見(jiàn)，Hooks 并沒(méi)有為 React 和 TypeScript 項(xiàng)目增加太多復(fù)雜性。

常見(jiàn)用例

本節(jié)將介紹人們?cè)趯?TypeScript 與 React 結(jié)合使用時(shí)一些常見(jiàn)的坑。我們希望通過(guò)分享這些知識(shí)，您可以避免踩坑，甚至可以與他人分享這些知識(shí)。

處理表單事件

最常見(jiàn)的情況之一是 onChange 在表單的輸入字段上正確鍵入使用的。這是一個(gè)例子：

  1. import React from 'react' 
  2.  
  3. const MyInput = () => { 
  4.   const [value, setValue] = React.useState('') 
  5.  
  6.   // 事件類(lèi)型是“ChangeEvent” 
  7.   // 我們將 “HTMLInputElement” 傳遞給 input 
  8.   function onChange(e: React.ChangeEvent<HTMLInputElement>) { 
  9.     setValue(e.target.value) 
  10.   } 
  11.  
  12.   return <input value={value} onChange={onChange} id="input-example"/> 
  13. } 

擴(kuò)展組件的 Props

有時(shí)，您希望獲取為一個(gè)組件聲明的 Props，并對(duì)它們進(jìn)行擴(kuò)展，以便在另一個(gè)組件上使用它們。但是你可能想要修改一兩個(gè)屬性。還記得我們?nèi)绾慰创齼煞N類(lèi)型組件 Props、type 或 interfaces 的方法嗎?取決于你使用的組件決定了你如何擴(kuò)展組件 Props 。讓我們先看看如何使用 type:

 

  1. import React from 'react' 
  2.  
  3. const MyInput = () => { 
  4.   const [value, setValue] = React.useState('') 
  5.  
  6.   // 事件類(lèi)型是“ChangeEvent” 
  7.   // 我們將 “HTMLInputElement” 傳遞給 input 
  8.   function onChange(e: React.ChangeEvent<HTMLInputElement>) { 
  9.     setValue(e.target.value) 
  10.   } 
  11.  
  12.   return <input value={value} onChange={onChange} id="input-example"/> 
  13. } 

 

如果你使用 interface 來(lái)聲明 props，那么我們可以使用關(guān)鍵字 extends 從本質(zhì)上“擴(kuò)展”該接口，但要進(jìn)行一些修改：

  1. import React from 'react'; 
  2.  
  3. interface ButtonProps { 
  4.     /** the background color of the button */ 
  5.     color: string; 
  6.     /** the text to show inside the button */ 
  7.     text: string; 
  8. } 
  9.  
  10. interface ContainerProps extends ButtonProps { 
  11.     /** the height of the container (value used with 'px') */ 
  12.     height: number; 
  13. } 
  14.  
  15. const Container: React.FC<ContainerProps> = ({ color, height, width, text }) => { 
  16.   return <div style={{ backgroundColor: color, height: `${height}px` }}>{text}</div> 
  17. } 

 

兩種方法都可以解決問(wèn)題。由您決定使用哪個(gè)。就個(gè)人而言，擴(kuò)展 interface 更具可讀性，但最終取決于你和你的團(tuán)隊(duì)。

第三方庫(kù)

無(wú)論是用于諸如 Apollo 之類(lèi)的 GraphQL 客戶(hù)端還是用于諸如 React Testing Library 之類(lèi)的測(cè)試，我們經(jīng)常會(huì)在 React 和 TypeScript 項(xiàng)目中使用第三方庫(kù)。發(fā)生這種情況時(shí)，你要做的第一件事就是查看這個(gè)庫(kù)是否有一個(gè)帶有 TypeScript 類(lèi)型定義 @types 包。你可以通過(guò)運(yùn)行：

 

  1. #yarn 
  2. yarn add @types/<package-name> 
  3.  
  4. #npm 
  5. npm install @types/<package-name> 

例如，如果您使用的是 Jest ，則可以通過(guò)運(yùn)行以下命令來(lái)實(shí)現(xiàn)：

 

  1. #yarn 
  2. yarn add @types/jest 
  3.  
  4. #npm 
  5. npm install @types/jest 

這樣，每當(dāng)在項(xiàng)目中使用 Jest 時(shí)，就可以增加類(lèi)型安全性。

該 @types 命名空間被保留用于包類(lèi)型定義。它們位于一個(gè)名為 DefinitelyTyped 的存儲(chǔ)庫(kù)中，該存儲(chǔ)庫(kù)由 TypeScript 團(tuán)隊(duì)和社區(qū)共同維護(hù)。

總結(jié)

由于信息量大，以?xún)?yōu)秀方式一起使用 React 和 TypeScript 需要一些學(xué)習(xí)時(shí)間，但是從長(zhǎng)遠(yuǎn)來(lái)看，其收益是巨大的。在本文中，我們介紹了配置，組件，Props，Hook，常見(jiàn)用例和第三方庫(kù)。盡管我們可以更深入地研究各個(gè)領(lǐng)域，但這應(yīng)涵蓋幫助您遵循最佳實(shí)踐所需的 80% 。

如果您希望看到它的實(shí)際效果，可以在GitHub上看到這個(gè)示例。

https://github.com/jsjoeio/react-ts-example

 

責(zé)任編輯：華軒 來(lái)源： code秘密花園
開(kāi)發(fā)ReactTypeScript
相關(guān)推薦

2022-08-19 09:01:59

ReactTS類(lèi)型

2020-06-03 16:50:24

TypeScriptReact前端

2019-09-17 09:44:45

DockerHTMLPython

2023-07-04 15:56:08

DevOps開(kāi)發(fā)測(cè)試

2017-02-28 21:57:05

React組件

2022-02-25 08:00:00

編程ReactTypescript

2017-05-17 15:50:34

開(kāi)發(fā)前端react

2024-05-17 08:25:06

數(shù)據(jù)驅(qū)動(dòng)React語(yǔ)言包

2024-01-15 08:00:00

開(kāi)發(fā)API文檔集成

2022-08-02 09:55:04

React前端

2023-01-27 14:53:03

2023-03-30 08:00:00

ReactJavaScript前端

2021-12-04 23:10:02

Java代碼開(kāi)發(fā)

2020-02-25 20:55:20

JavaScript開(kāi)發(fā) 技巧

2023-04-14 08:10:59

asyncawait

2024-06-20 12:30:34

2024-04-15 12:54:00

ReactVue列表邏輯

2024-01-22 12:46:00

KubernetesAPI接口

2019-11-25 15:44:13

TS數(shù)據(jù)JavaScrip

2020-09-16 14:39:13

ReactJavaScript框架
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)