一、
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
二、
tsc --init
生成tsconfig.json
三、在tsconfig.json中增加JXS支持
"jsx":"react"
修改strict为false,
"strict": false
四、将index.js 重命名为index.tsx
五、使用ts编写组件,扩展名为tsx
Hi.tsx(在Components子目录下)
import * as React from 'react';
export interface Props {
name: string;
age: number;
}
function Hi({name,age}: Props){
return(
<div>
<div>{name}</div>
<div>{age}</div>
</div>
);
}
export default Hi;
六、在index.tsx中引入Hi并使用
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import Hi from './Components/Hi'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Hi name="Amadeus" age={288} />
</React.StrictMode>
);