已有react项目添加ts支持已有react项目添加ts支持,已有react项目添加ts支持,已有react项目添加ts

安装相关包

npm install typescript @types/jest @types/node @types/react @types/react-dom

执行如下命令生成tsconfig.json文件

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, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx" }, "include": [ "src" ] }

3.将文件中的js/jsx文件的后缀修改成ts/tsx，代码内容做相应的调整（添加类型）

下面是index.tsx文件

import React from 'react'; 
import ReactDOM from 'react-dom/client'; 
import './index.css'; 
import App from './App'; 

const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); 
   root.render( 
     <React.StrictMode> 
      <App /> 
     </React.StrictMode> 
);