增加ts

package.json

@@ -8,6 +8,11 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^28.1.8",
+    "@types/node": "^14.18.63",
+    "@types/react": "^17.0.83",
+    "@types/react-dom": "^17.0.25",
+    "typescript": "^4.9.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.27.0",

src/App.jsx → src/App.tsx

@@ -1,4 +1,4 @@
-import React,{Component} from "react";
+import {Component} from "react";
 import "./App.css";
 // import List from "./component/List";
 import Header from './component/hedaer';
@@ -8,7 +8,7 @@ import Content from './component/content';
 export class App extends Component{
   render(){
     return (
-        <div class="zl-365-container">
+        <div className="zl-365-container">
           <Header></Header>
           <Bar></Bar>
           <Content></Content>

src/index.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-import { FluentProvider, webLightTheme } from '@fluentui/react-components';
-import { BrowserRouter } from 'react-router-dom';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <BrowserRouter>
-    <FluentProvider theme={webLightTheme}>
-      <App />
-    </FluentProvider>
-  </BrowserRouter>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

src/index.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import { FluentProvider, webLightTheme } from "@fluentui/react-components";
+import { BrowserRouter } from "react-router-dom";
+
+ReactDOM.render(
+  <BrowserRouter>
+    <FluentProvider theme={webLightTheme}>
+      <App />
+    </FluentProvider>
+  </BrowserRouter>,
+  document.getElementById('root')
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

src/pages/listnew/index.js → src/pages/listnew/index.jsx

@@ -10,7 +10,7 @@ import {
   ChevronDown16Filled,
   TextField16Regular,
   Calendar16Regular,
-  SelectAllOn16Regular
+  SelectAllOn16Regular,
 } from "@fluentui/react-icons";
 import {
   PresenceBadgeStatus,
@@ -30,10 +30,9 @@ import {
   MenuList,
   MenuItem,
   MenuPopover,
-  Text
+  Text,
 } from "@fluentui/react-components";
 
-
 const items = [
   {
     姓名: { label: "陈丹", icon: <DocumentRegular /> },
@@ -69,13 +68,14 @@ const columns = [
     },
     renderHeaderCell: () => {
       return (
-        <TableCellLayout
-          media={<TextField16Regular />}
-        >
+        <TableCellLayout media={<TextField16Regular />}>
           姓名
           <Menu>
             <MenuTrigger disableButtonEnhancement>
-              <Button appearance="subtle" icon={<ChevronDown16Filled />}></Button>
+              <Button
+                appearance="subtle"
+                icon={<ChevronDown16Filled />}
+              ></Button>
             </MenuTrigger>
 
             <MenuPopover>
@@ -91,9 +91,7 @@ const columns = [
       );
     },
     renderCell: (item) => {
-      return (
-        item.姓名.label
-      );
+      return item.姓名.label;
     },
   }),
   createTableColumn({
@@ -103,13 +101,14 @@ const columns = [
     },
     renderHeaderCell: () => {
       return (
-        <TableCellLayout
-          media={<SelectAllOn16Regular />}
-        >
+        <TableCellLayout media={<SelectAllOn16Regular />}>
           性别
           <Menu>
             <MenuTrigger disableButtonEnhancement>
-              <Button appearance="subtle" icon={<ChevronDown16Filled />}></Button>
+              <Button
+                appearance="subtle"
+                icon={<ChevronDown16Filled />}
+              ></Button>
             </MenuTrigger>
 
             <MenuPopover>
@@ -135,13 +134,14 @@ const columns = [
     },
     renderHeaderCell: () => {
       return (
-        <TableCellLayout
-          media={<TextField16Regular />}
-        >
+        <TableCellLayout media={<TextField16Regular />}>
           年龄
           <Menu>
             <MenuTrigger disableButtonEnhancement>
-              <Button appearance="subtle" icon={<ChevronDown16Filled />}></Button>
+              <Button
+                appearance="subtle"
+                icon={<ChevronDown16Filled />}
+              ></Button>
             </MenuTrigger>
 
             <MenuPopover>
@@ -168,13 +168,14 @@ const columns = [
     },
     renderHeaderCell: () => {
       return (
-        <TableCellLayout
-          media={<Calendar16Regular />}
-        >
+        <TableCellLayout media={<Calendar16Regular />}>
           最后在线时间
           <Menu>
             <MenuTrigger disableButtonEnhancement>
-              <Button appearance="subtle" icon={<ChevronDown16Filled />}></Button>
+              <Button
+                appearance="subtle"
+                icon={<ChevronDown16Filled />}
+              ></Button>
             </MenuTrigger>
 
             <MenuPopover>
@@ -236,4 +237,4 @@ const List = () => {
   );
 };
 
-export default List;
+export default List;

src/reportWebVitals.js → src/reportWebVitals.ts

@@ -1,4 +1,6 @@
-const reportWebVitals = onPerfEntry => {
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
       getCLS(onPerfEntry);

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "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"
+  ]
+}