支持t sts

package.json

@@ -11,6 +11,10 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "@types/jest": "^27.4.1",
+    "@types/node": "^17.0.21",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.12",
     "ahooks": "^3.1.7",
     "antd": "^4.18.2",
     "axios": "^0.19.0",
@@ -35,8 +39,10 @@
     "react-virtualized": "^9.22.3",
     "redux": "^4.0.1",
     "redux-saga": "^1.0.5",
+    "rxjs": "^7.5.4",
     "showdown": "^1.9.1",
     "smooth-scroll": "^16.1.3",
+    "typescript": "^4.6.2",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

src/global.d.ts

+declare const rctable: any;
+declare module 'rc-table' {
+  export default rctable;
+}
+
+declare const nprogress: any;
+declare module 'nprogress' { 
+  export default nprogress;
+}
+
+declare module 'react-resizable' {
+  export const Resizable:any
+}
+
+declare module 'd3v3'
+
+declare module '*' // for import jsx
\ No newline at end of file

src/react-app-env.d.ts

+/// <reference types="react-scripts" />

src/view/Manage/VirtualTable/helper.ts

+/* 
+  https://stackoverflow.com/questions/13382516/getting-scroll-bar-width-using-javascript
+*/
+export function getScrollbarWidth() {
+
+  // Creating invisible container
+  const outer = document.createElement('div');
+  outer.style.visibility = 'hidden';
+  outer.style.overflow = 'scroll'; // forcing scrollbar to appear
+  (outer.style as any).msOverflowStyle = 'scrollbar'; // needed for WinJS apps
+  document.body.appendChild(outer);
+
+  // Creating inner element and placing it in the container
+  const inner = document.createElement('div');
+  outer.appendChild(inner);
+
+  // Calculating difference between container's full width and the child width
+  const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);
+
+  // Removing temporary elements from the DOM
+  outer.parentNode?.removeChild(outer);
+
+  return scrollbarWidth;
+
+}
\ No newline at end of file

src/view/Manage/VirtualTable/table.css

+.virtual-table .ant-table-container:before, .virtual-table .ant-table-container:after {
+  display: none;
+}
+
+.virtual-table-tbody>div.virtual-table-row>div {
+  display: inline-block;
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+
+  box-sizing: border-box;
+  /* padding: 16px; */
+  border-bottom: 1px solid #e8e8e8;
+  background: #FFF;
+}
+
+[data-theme="dark"]  .virtual-table-cell {
+  box-sizing: border-box;
+  /* padding: 16px; */
+  border-bottom: 1px solid #303030;
+  background: #141414;
+}
+
+.ant-table-thead > tr > th.w0::before {
+  width: 0 !important;
+}
+
+.virtual-table-tbody>div.virtual-table-row:hover>div {
+  background-color: #fafafa;
+}
+
+
+/* 
+https://github.com/ant-design/ant-design/blob/master/components/table/demo/resizable-column.md
+*/
+
+.virtual-table .react-resizable {
+  position: relative;
+  background-clip: padding-box;
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.virtual-table .react-resizable-handle {
+  position: absolute;
+  right: -5px;
+  bottom: 0;
+  z-index: 1;
+  width: 10px;
+  height: 100%;
+  cursor: col-resize;
+}
+
+
+.virtual-table .ant-table-header {
+  background-color: rgba(0, 0, 0, 0.06);
+}
+
+.virtual-table .virtual-table-tbody>div.virtual-table-row>div.virtual-table-cell {
+  padding: 10px;
+}
+
+.virtual-table .virtual-table-tbody>div.virtual-table-row:hover>div.virtual-table-cell {
+  background: #fafafa;
+}
+
+.virtual-table .footer {
+  text-align: center;
+}
+
+.virtual-table .footer {
+  text-align: center;
+  margin-top: 10px;
+}
+
+.virtual-table .footer > span {
+  background-color: #fafafa;
+  padding: 10px; 
+  border-radius: 8px;
+}
\ No newline at end of file

tsconfig.json

+{
+  "compilerOptions": {
+    "target": "es2016",
+    "module": "esnext",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}