React: 在现有create-react-app项目中增加typescript支持

一、

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>
);