在React項目中引入TypeScript(TS)涉及到一系列配置步驟。以下是一個完整的配置過程,從創建React項目到配置TypeScript:
首先,你可以使用create-react-app工具來創建一個React結合TypeScript的項目。Create React App 內置了對 TypeScript 的支持。在命令行中運行以下命令:
npx create-react-app my-app --template typescript
這將創建一個名為my-react-app的React項目,并安裝默認的配置。
cd my-react-app
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
將項目目錄下的src/App.js文件重命名為src/App.tsx,這樣React就能識別它是一個TypeScript文件。
將src/index.js文件中的內容改為:
import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root'));
沒有配置項,編譯器提供不了任何幫助。在 TypeScript 里,這些配置項都在一個名為 tsconfig.json 的特殊文件中定義。可以通過執行以下命令生成該文件:使用 Yarn,執行:
yarn run tsc --init
使用 npm,執行:
npx tsc --init
在 tsconfig.json 文件里面添加以下基本配置:
{ "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx" }, "include": ["src/**/*.ts", "src/**/*.tsx"], "exclude": ["node_modules"]}
這個 tsconfig.json 文件包含了基本的TypeScript配置。你可以根據項目的需求進行調整。更多配置請參考文檔
在 src/App.tsx 文件中,可以使用 TypeScript 的語法,例如聲明組件的 props 類型和狀態類型:
import React, { useState } from 'react';interface AppProps { message: string;}const App: React.FC<AppProps> = ({ message }) => { const [count, setCount] = useState<number>(0); return ( <div> <h1>{message}</h1> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> );}export default App;
這里使用了 TypeScript 的 interface 來定義 App 組件的 props 類型,以及使用 useState 聲明了 count 的狀態類型。
8.文件擴展名在 React 中,組件文件大多數使用 .js 作為擴展名。在 TypeScript 中,提供兩種文件擴展名:
.ts 是默認的文件擴展名,而 .tsx 是一個用于包含 JSX 代碼的特殊擴展名。
9.類型定義如果你想要顯示來自其他包(libraries)的錯誤和提示,通常你需要安裝相應庫的 TypeScript 類型聲明。TypeScript 類型聲明文件的后綴為 .d.ts,它包含了有關庫的類型信息,使得 TypeScript 編譯器能夠理解和驗證你對庫的使用。
以下是一些常見情況下可能需要安裝的 TypeScript 類型聲明的例子:
React 類型聲明:
npm install --save @types/react @types/react-dom
如果你使用了 React,這個命令將安裝 React 和 ReactDOM 的類型聲明文件。
其他 npm 包的類型聲明:
對于其他可能使用的庫,你可以查看它們的 npm 包是否有相應的 @types 包。例如,如果你使用了 axios,可以運行:
npm install --save @types/axios
聲明文件不可用的情況:
有時,某些包可能沒有官方的 TypeScript 類型聲明文件,或者它們可能不是最新的。在這種情況下,你可能需要使用類型聲明文件生成工具,例如 tsc(TypeScript 編譯器)的 --allowJs 和 --declaration 選項,以從 JavaScript 代碼生成類型聲明文件。但請注意,這可能不如官方的類型聲明文件準確和全面。
確保你的項目中包含了所需的類型聲明文件后,TypeScript 編譯器就能夠正確地檢查和驗證你對這些庫的使用,以及在開發過程中顯示相關的錯誤和提示信息。
本文鏈接:http://www.www897cc.com/showinfo-26-70465-0.html在 Create React App 中使用 TypeScript,你學會了嗎?
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com