在 react 中使用 typescript 需要安裝必要的包，然后使用類型定義、類型別名和泛型來確保數據類型的正確性、提高代碼可讀性和創建可重用組件。最佳實踐包括使用類型定義、類型別名和泛型，并遵循 react 和 typescript 社區指南。
如何使用 TypeScript 編寫 React
入門
在 React 中使用 TypeScript 非常簡單。只需安裝必要的包：
npm install --save-dev typescript @types/react @types/react-dom
登錄后復制
然后，在你的項目中創建一個 TypeScript 文件，比如 App.tsx：
import React from 'react'; const App = () => { return ( <h1>Hello, TypeScript!</h1> ); }; export default App;
登錄后復制
類型定義
TypeScript 引入了類型定義，它定義了變量、函數和其他實體的類型約束。在 React 中，你可以在 propTypes 和 defaultProps 中使用類型定義來確保組件接收和返回正確的數據類型。
例如：
import React from 'react'; import PropTypes from 'prop-types'; const MyComponent = (props: { name: string }) => { return ( <h1>{props.name}</h1> ); }; MyComponent.propTypes = { name: PropTypes.string.isRequired, }; export default MyComponent;
登錄后復制
類型別名
類型別名是一種重命名現有類型的快捷方式。這可以提高代碼的可讀性和可維護性。
例如：
type User = { name: string; age: number; }; const user: User = { name: 'John', age: 30, };
登錄后復制
泛型
泛型允許你創建可重用的組件，這些組件可以處理不同類型的數據。
例如：
import React from 'react'; const MyList = <T>(props: { items: T[] }) => { return ( <ul> {props.items.map((item) => ( <li key={item}>{item}</li> ))} </ul> ); }; export default MyList;
登錄后復制
最佳實踐
- 使用類型定義來確保代碼質量。
- 使用類型別名來提高代碼可讀性和可維護性。
- 使用泛型來創建可重用的組件。
- 遵循 React 和 TypeScript 社區的最佳實踐。
