本文譯自 https://www.sitepoint.com/react-with-typescript-best-practices/前端
現在， React 和 TypeScript 是許多開發人員正在使用的兩種很棒的技術。可是把他們結合起來使用就變得很棘手了，有時很難找到正確的答案。不要擔憂，本文咱們來總結一下二者結合使用的最佳實踐。
node
React 和 TypeScript 如何一塊兒使用
在開始以前，讓咱們回顧一下 React 和 TypeScript 是如何一塊兒工做的。React 是一個 「用於構建用戶界面的 JavaScript 庫」 ，而 TypeScript 是一個 「可編譯爲普通 JavaScript 的 JavaScript類型化超集」 。經過同時使用它們，咱們其實是使用 JavaScript 的類型化版原本構建 UI。react
將它們一塊兒使用的緣由是爲了得到靜態類型化語言( TypeScript )對 UI 的好處：減小 JS 帶來的 bug，讓前端開發更安全。webpack
TypeScript 會編譯個人 React 代碼嗎？
一個常常被提到的常見問題是 TypeScript 是否編譯你的 React 代碼。TypeScript 的工做原理相似於下面的方式：git
-
TS：「嘿，這是你全部的UI代碼嗎？」 -
React：「是的！」 -
TS：「酷！我將對其進行編譯，並確保你沒有錯過任何內容。」 -
React：「聽起來對我很好！」
所以，答案是確定的！可是稍後，當咱們介紹 tsconfig.json 配置時，大多數時候你都想使用 "noEmit": true 。這是由於一般狀況下，咱們只是利用 TypeScript 進行類型檢查。github
歸納地說， TypeScript 編譯你的 React 代碼以對你的代碼進行類型檢查。在大多數狀況下，它不會發出任何 JavaScript 輸出。輸出仍然相似於非 TypeScript React 項目。web
TypeScript 能夠與 React 和 Webpack 一塊兒使用嗎？
是的， TypeScript 能夠與 React 和 webpack 一塊兒使用。幸運的是，官方 TypeScript 手冊對此提供了配置指南。typescript
但願這能使你垂手可得地瞭解二者的工做方式。如今，進入最佳實踐！express
最佳實踐
咱們研究了最多見的問題，並整理了 React with TypeScript 最經常使用的一些寫法和配置。這樣，經過使用本文做爲參考，你能夠在項目中遵循最佳實踐。npm
配置
配置是開發中最無趣可是最重要的部分之一。咱們怎樣才能在最短的時間內完成這些配置，從而提供最大的效率和生產力？咱們一塊兒來討論下面的配置
-
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,
};
-
更新 .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 <h1>My Website Heading</h1>
}
// 函數擴展式寫法
const OtherHeading: React.FC = () => <h1>My Website Heading</h1>
注意這裏的關鍵區別。在第一個例子中，咱們使用函數聲明式寫法，咱們註明了這個函數返回值是 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 <h1>My Website Heading</h1>
}
// Notice here we're using the function expression with the type OtherProps
const OtherHeading: React.FC<OtherProps> = ({ name, color }) =>
<h1>My Website Heading</h1>
關於 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 團隊和社區共同維護。
總結
因爲信息量大，以最佳方式一塊兒使用 React 和 TypeScript 須要一些學習時間，可是從長遠來看，其收益是巨大的。在本文中，咱們介紹了配置，組件，Props，Hook，常見用例和第三方庫。儘管咱們能夠更深刻地研究各個領域，但這應涵蓋幫助您遵循最佳實踐所需的 80％ 。
若是您但願看到它的實際效果，能夠在GitHub上看到這個示例。
https://github.com/jsjoeio/react-ts-example
本文分享自微信公衆號 - 前端試煉（code-photo）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。