react如何使用tsx文件
使用 TSX 文件在 React 中的步骤
安装 TypeScript 依赖
确保项目中已安装 TypeScript 及相关类型定义。通过以下命令安装：
npm install --save-dev typescript @types/react @types/react-dom配置 tsconfig.json
在项目根目录创建或修改 tsconfig.json，确保包含以下关键配置：
{
"compilerOptions": {
"jsx": "react-jsx",
"module": "esnext",
"target": "es6",
"strict": true,
"esModuleInterop": true
},
"include": ["src//*"]
}重命名文件为 .tsx
将原有的 .jsx 或 .js 文件后缀改为 .tsx。例如，App.js 改为 App.tsx。
编写 TSX 组件
在 .tsx 文件中定义组件时，明确类型注解。例如：
import React from 'react';
interface Props {
name: string;
}
const Greeting: React.FC<Props> = ({ name }) => {
return <h1>Hello, {name}!</h1>;
};
export default Greeting;处理类型错误
TypeScript 会检查属性类型和状态类型。若遇到类型错误，需根据提示修正。例如，为 useState 指定泛型：
const [count, setCount] = React.useState<number>(0);运行项目
使用开发命令启动项目（如 npm start），TypeScript 会进行类型检查并编译代码。
