怎么用TypeScript編寫React

本篇內容介紹了“怎么用TypeScript編寫React”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

React 和 TypeScript 如何一起使用

在開始之前，讓我們回顧一下 React 和 TypeScript 是如何一起工作的。React 是一個 “用于構建用戶界面的 JavaScript 庫” ，而 TypeScript 是一個 “可編譯為普通 JavaScript 的 JavaScript類型化超集” 。通過同時使用它們，我們實際上是使用 JavaScript 的類型化版本來構建 UI。

將它們一起使用的原因是為了獲得靜態類型化語言( TypeScript )對 UI 的好處：減少 JS 帶來的 bug，讓前端開發更安全。

TypeScript 會編譯我的 React 代碼嗎？

一個經常被提到的常見問題是 TypeScript 是否編譯你的 React 代碼。TypeScript 的工作原理類似于下面的方式：

•  TS：“嘿，這是你所有的UI代碼嗎？”

•  React：“是的！”

•  TS：“酷！我將對其進行編譯，并確保你沒有錯過任何內容。”

•  React：“聽起來對我很好！”

因此，答案是肯定的！但是稍后，當我們介紹 tsconfig.json 配置時，大多數時候你都想使用 "noEmit": true 。這是因為通常情況下，我們只是利用 TypeScript 進行類型檢查。

概括地說， TypeScript 編譯你的 React 代碼以對你的代碼進行類型檢查。在大多數情況下，它不會發出任何 JavaScript 輸出。輸出仍然類似于非 TypeScript React 項目。

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

是的， TypeScript 可以與 React 和 webpack 一起使用。幸運的是，官方 TypeScript 手冊對此提供了配置指南。

希望這能使你輕而易舉地了解兩者的工作方式。現在，進入最佳實踐！

最佳實踐

我們研究了最常見的問題，并整理了 React with TypeScript 最常用的一些寫法和配置。這樣，通過使用本文作為參考，你可以在項目中遵循最佳實踐。

配置

配置是開發中最無趣但是最重要的部分之一。我們怎樣才能在最短的時間內完成這些配置，從而提供最大的效率和生產力？我們一起來討論下面的配置

•  tsconfig.json

•  ESLint / Prettier

•  VS Code 擴展和配置

項目初始化

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

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

這可以讓你開始使用 TypeScript 編寫 React 。一些明顯的區別是：

•  .tsx：TypeScript JSX 文件擴展

•  tsconfig.json：具有一些默認配置的 TypeScript 配置文件

•  react-app-env.d.ts：TypeScript 聲明文件，可以進行允許引用 SVG 這樣的配置

tsconfig.json

幸運的是，最新的 React/TypeScript 會自動生成 tsconfig.json ，并且默認帶有一些最基本的配置。我們建議你修改成下面的內容：

{    "compilerOptions": {      "target": "es5", // 指定 ECMAScript 版本      "lib": [        "dom",        "dom.iterable",        "esnext"      ], // 要包含在編譯中的依賴庫文件列表      "allowJs": true, // 允許編譯 JavaScript 文件      "skipLibCheck": true, // 跳過所有聲明文件的類型檢查      "esModuleInterop": true, // 禁用命名空間引用 (import * as fs from "fs") 啟用 CJS/AMD/UMD 風格引用 (import fs from "fs")      "allowSyntheticDefaultImports": true, // 允許從沒有默認導出的模塊進行默認導入      "strict": true, // 啟用所有嚴格類型檢查選項      "forceConsistentCasingInFileNames": true, // 不允許對同一個文件使用不一致格式的引用      "module": "esnext", // 指定模塊代碼生成      "moduleResolution": "node", // 使用 Node.js 風格解析模塊      "resolveJsonModule": true, // 允許使用 .json 擴展名導入的模塊      "noEmit": true, // 不輸出(意思是不編譯代碼，只執行類型檢查)      "jsx": "react", // 在.tsx文件中支持JSX      "sourceMap": true, // 生成相應的.map文件      "declaration": true, // 生成相應的.d.ts文件      "noUnusedLocals": true, // 報告未使用的本地變量的錯誤      "noUnusedParameters": true, // 報告未使用參數的錯誤      "experimentalDecorators": true, // 啟用對ES裝飾器的實驗性支持      "incremental": true, // 通過從以前的編譯中讀取/寫入信息到磁盤上的文件來啟用增量編譯      "noFallthroughCasesInSwitch": true     },    "include": [      "src/**/*" // *** TypeScript文件應該進行類型檢查 ***    ],    "exclude": ["node_modules", "build"] // *** 不進行類型檢查的文件 ***  }

其他建議來自 react-typescript-cheatsheet 社區

ESLint / Prettier

為了確保你的代碼遵循項目或團隊的規則，并且樣式保持一致，建議你設置 ESLint 和 Prettier 。為了讓它們配合的很好，請按照以下步驟進行設置。

1.安裝依賴

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

2.在根目錄下創建一個eslintrc.js 文件并添加以下內容：

module.exports =  {    parser:  '@typescript-eslint/parser',  // 指定ESLint解析器    extends:  [      'plugin:react/recommended',  // 使用來自 @eslint-plugin-react 的推薦規則      'plugin:@typescript-eslint/recommended',  // 使用來自@typescript-eslint/eslint-plugin的推薦規則    ],    parserOptions:  {    ecmaVersion:  2018,  // 允許解析最新的 ECMAScript 特性    sourceType:  'module',  // 允許使用 import    ecmaFeatures:  {      jsx:  true,  // 允許對JSX進行解析    },    },    rules:  {      // 自定義規則      // e.g. "@typescript-eslint/explicit-function-return-type": "off",    },    settings:  {      react:  {        version:  'detect',  // 告訴 eslint-plugin-react 自動檢測 React 的版本      },    },  };

3.添加 Prettier 依賴

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

4.在根目錄下創建一個 .prettierrc.js 文件并添加以下內容：

module.exports =  {    semi:  true,    trailingComma:  'all',    singleQuote:  true,    printWidth:  120,    tabWidth:  4,  };

5.更新 .eslintrc.js 文件：

module.exports =  {    parser:  '@typescript-eslint/parser',  // 指定ESLint解析器    extends:  [      'plugin:react/recommended',  // 使用來自 @eslint-plugin-react 的推薦規則      'plugin:@typescript-eslint/recommended',  // 使用來自@typescript-eslint/eslint-plugin的推薦規則      'prettier/@typescript-eslint',  // 使用 ESLint -config-prettier 禁用來自@typescript-eslint/ ESLint 與 prettier 沖突的 ESLint 規則      'plugin:prettier/recommended',      ],    parserOptions:  {    ecmaVersion:  2018,  // 允許解析最新的 ECMAScript 特性    sourceType:  'module',  // 允許使用 import    ecmaFeatures:  {      jsx:  true,  // 允許對JSX進行解析    },    },    rules:  {      // 自定義規則      // e.g. "@typescript-eslint/explicit-function-return-type": "off",    },    settings:  {      react:  {        version:  'detect',  // 告訴 eslint-plugin-react 自動檢測 React 的版本      },    },  };

VSCode 擴展和設置

我們添加了 ESLint 和 Prettier ，下一步就是在保存時自動修復/美化我們的代碼。

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

接下來，通過將以下內容添加到您的中來更新工作區設置 .vscode/settings.json ：

{      "editor.formatOnSave": true  }

保存時， VS Code 會發揮它的魔力并修復您的代碼。很棒！

組件

React 的核心概念之一是組件。在這里，我們將引用 React v16.8 以后的標準組件，這意味著使用 Hook 而不是類的組件。

通常，一個基本的組件有很多需要關注的地方。讓我們看一個例子：

import React from 'react'  // 函數聲明式寫法  function Heading(): React.ReactNode {    return <h2>My Website Heading</h2>  }  // 函數擴展式寫法  const OtherHeading: React.FC = () => <h2>My Website Heading</h2>

注意這里的關鍵區別。在第一個例子中，我們使用函數聲明式寫法，我們注明了這個函數返回值是 React.ReactNode 類型。相反，第二個例子使用了一個函數表達式。因為第二個實例返回一個函數，而不是一個值或表達式，所以我們我們注明了這個函數返回值是 React.FC 類型。

記住這兩種方式可能會讓人混淆。這主要取決于設計選擇。無論您選擇在項目中使用哪個，都要始終如一地使用它。

Props

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

import React from 'react'  interface Props {    name: string;    color: string;  }  type OtherProps = {    name: string;    color: string;  }  // Notice here we're using the function declaration with the interface Props  function Heading({ name, color }: Props): React.ReactNode {    return <h2>My Website Heading</h2>  }  // Notice here we're using the function expression with the type OtherProps  const OtherHeading: React.FC<OtherProps> = ({ name, color }) =>    <h2>My Website Heading</h2>

關于 interface 或 type ，我們建議遵循 react-typescript-cheatsheet 社區提出的準則：

•  在編寫庫或第三方環境類型定義時，始終將 interface 用于公共 API 的定義。

•  考慮為你的 React 組件的 State 和 Props 使用 type ，因為它更受約束。”

讓我們再看一個示例：

import React from 'react'  type Props = {     /** color to use for the background */    color?: string;     /** standard children prop: accepts any valid React Node */   children: React.ReactNode;     /** callback function passed to the onClick handler*/    onClick: ()  => void;  }  const Button: React.FC<Props> = ({ children, color = 'tomato', onClick }) => {     return <button style={{ backgroundColor: color }} onClick={onClick}>{children}</button>  }

在此 <Button /> 組件中，我們為 Props 使用 type。每個 Props 上方都有簡短的說明，以為其他開發人員提供更多背景信息。? 表示 Props 是可選的。children props 是一個 React.ReactNode 表示它還是一個 React 組件。

通常，在 React 和 TypeScript 項目中編寫 Props 時，請記住以下幾點：

•  始終使用 TSDoc 標記為你的 Props 添加描述性注釋 /** comment */。

•  無論你為組件 Props 使用 type 還是 interfaces ，都應始終使用它們。

•  如果 props 是可選的，請適當處理或使用默認值。

Hooks

幸運的是，當使用 Hook 時， TypeScript 類型推斷工作得很好。這意味著你沒有什么好擔心的。舉個例子:

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

TypeScript 推斷出 useState 鉤子給出的值。這是一個 React 和 TypeScript 協同工作的成果。

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

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

下面是一個使用 userReducer 的例子：

type AppState = {};  type Action =    | { type: "SET_ONE"; payload: string }    | { type: "SET_TWO"; payload: number };  export function reducer(state: AppState, action: Action): AppState {    switch (action.type) {      case "SET_ONE":        return {          ...state,          one: action.payload // `payload` is string        };      case "SET_TWO":        return {          ...state,          two: action.payload // `payload` is number        };      default:        return state;    }  }

可見，Hooks 并沒有為 React 和 TypeScript 項目增加太多復雜性。

常見用例

本節將介紹人們在將 TypeScript 與 React 結合使用時一些常見的坑。我們希望通過分享這些知識，您可以避免踩坑，甚至可以與他人分享這些知識。

處理表單事件

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

import React from 'react'  const MyInput = () => {    const [value, setValue] = React.useState('')    // 事件類型是“ChangeEvent”    // 我們將 “HTMLInputElement” 傳遞給 input    function onChange(e: React.ChangeEvent<HTMLInputElement>) {      setValue(e.target.value)    }    return <input value={value} onChange={onChange} id="input-example"/>  }

擴展組件的 Props

有時，您希望獲取為一個組件聲明的 Props，并對它們進行擴展，以便在另一個組件上使用它們。但是你可能想要修改一兩個屬性。還記得我們如何看待兩種類型組件 Props、type 或 interfaces 的方法嗎?取決于你使用的組件決定了你如何擴展組件 Props 。讓我們先看看如何使用 type:

import React from 'react';  type ButtonProps = {      /** the background color of the button */      color: string;      /** the text to show inside the button */      text: string; }  type ContainerProps = ButtonProps & {      /** the height of the container (value used with 'px') */      height: number;  }  const Container: React.FC<ContainerProps> = ({ color, height, width, text }) => {    return <div style={{ backgroundColor: color, height: `${height}px` }}>{text}</div>  }

如果你使用 interface 來聲明 props，那么我們可以使用關鍵字 extends 從本質上“擴展”該接口，但要進行一些修改：

import React from 'react';  interface ButtonProps {      /** the background color of the button */      color: string;      /** the text to show inside the button */      text: string;  }  interface ContainerProps extends ButtonProps {      /** the height of the container (value used with 'px') */      height: number;  }  const Container: React.FC<ContainerProps> = ({ color, height, width, text }) => {    return <div style={{ backgroundColor: color, height: `${height}px` }}>{text}</div>  }

兩種方法都可以解決問題。由您決定使用哪個。就個人而言，擴展 interface 更具可讀性，但最終取決于你和你的團隊。

第三方庫

無論是用于諸如 Apollo 之類的 GraphQL 客戶端還是用于諸如 React Testing Library 之類的測試，我們經常會在 React 和 TypeScript 項目中使用第三方庫。發生這種情況時，你要做的第一件事就是查看這個庫是否有一個帶有 TypeScript 類型定義 @types 包。你可以通過運行：

#yarn  yarn add @types/<package-name>  #npm  npm install @types/<package-name>

例如，如果您使用的是 Jest ，則可以通過運行以下命令來實現：

#yarn  yarn add @types/jest  #npm  npm install @types/jest

這樣，每當在項目中使用 Jest 時，就可以增加類型安全性。

該 @types 命名空間被保留用于包類型定義。它們位于一個名為 DefinitelyTyped 的存儲庫中，該存儲庫由 TypeScript 團隊和社區共同維護。

“怎么用TypeScript編寫React”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！