chore: fix type errors

Author: zhanglin

src/sheet/ReactSheet.tsx

@@ -11,6 +11,7 @@ import { Toolbar } from './components/Toolbar/Toolbar';
 import { cssPrefix } from './configs';
 import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts';
 import { useSheetStore } from './store/useSheetStore';
+import type { SheetDataInput } from './types';
 import './sheet.less';
 import svg from './assets/sprite.svg';
 import type { Options } from './index';
@@ -146,7 +147,7 @@ export default ReactSheet;
 export const createSheet = (_container: HTMLElement, _options?: Options) => {
   // TODO: 实现 React 渲染到容器
   return {
-    loadData: (data: unknown) => useSheetStore.getState().loadData(data),
+    loadData: (data: unknown) => useSheetStore.getState().loadData(data as SheetDataInput | SheetDataInput[]),
     getData: () => useSheetStore.getState().getData(),
     on: (event: string, callback: (data: unknown) => void) => {
       if (event === 'change') {

src/sheet/canvas/cellRenderer.ts

@@ -3,6 +3,7 @@
  * 从 component/table.ts 迁移而来
  */
 
+import type { FormatMap, FormulaMap } from '../types';
 import { cellRender } from '../core/cell';
 import type DataProxy from '../core/dataProxy';
 import { getFontSizePxByPt } from '../core/font';
@@ -48,7 +49,7 @@ export function renderCell(
 
   let nrindex = rindex;
   if (sortedRowMap.has(rindex)) {
-    nrindex = sortedRowMap.get(rindex);
+    nrindex = sortedRowMap.get(rindex) || rindex;
   }
 
   const cell = data.getCell(nrindex, cindex);
@@ -61,7 +62,7 @@ export function renderCell(
 
   const style = data.getCellStyleOrDefault(nrindex, cindex);
   const dbox = getDrawBox(data, rindex, cindex, xoffset, yoffset);
-  dbox.bgcolor = style.bgcolor;
+  dbox.bgcolor = style.bgcolor || '#ffffff';
 
   if (style.border !== undefined) {
     dbox.setBorders(style.border);
@@ -71,33 +72,34 @@ export function renderCell(
   draw.rect(dbox, () => {
     // render text
     let cellText = '';
-    if (!data.settings.evalPaused) {
-      cellText = cellRender(cell.text || '', formulam, (y, x) =>
+    const settings = data.settings as typeof data.settings & { evalPaused?: boolean };
+    if (!settings.evalPaused) {
+      cellText = String(cellRender(cell.text || '', formulam as FormulaMap, (y: number, x: number) =>
         data.getCellTextOrDefault(x, y),
-      );
+      ));
     } else {
       cellText = cell.text || '';
     }
 
-    if (style.format) {
-      cellText = formatm[style.format].render(cellText);
+    if (style.format && (formatm as FormatMap)[style.format]) {
+      cellText = (formatm as FormatMap)[style.format].render(cellText);
     }
 
-    const font = Object.assign({}, style.font);
-    font.size = getFontSizePxByPt(font.size);
+    const font = Object.assign({ name: 'Arial', size: 10, bold: false, italic: false }, style.font);
+    font.size = getFontSizePxByPt(font.size || 10);
 
     draw.text(
       cellText,
       dbox,
       {
-        align: style.align,
-        valign: style.valign,
+        align: style.align || 'left',
+        valign: style.valign || 'middle',
         font,
-        color: style.color,
-        strike: style.strike,
-        underline: style.underline,
+        color: style.color || '#000000',
+        strike: style.strike || false,
+        underline: style.underline || false,
       },
-      style.textwrap,
+      style.textwrap || false,
     );
 
     // error

src/sheet/canvas/draw.ts

@@ -99,31 +99,31 @@ export class DrawBox {
     return y;
   }
 
-  topxys() {
+  topxys(): [number, number][] {
     const { x, y, width } = this;
     return [
       [x, y],
       [x + width, y],
     ];
   }
 
-  rightxys() {
+  rightxys(): [number, number][] {
     const { x, y, width, height } = this;
     return [
       [x + width, y],
       [x + width, y + height],
     ];
   }
 
-  bottomxys() {
+  bottomxys(): [number, number][] {
     const { x, y, width, height } = this;
     return [
       [x, y + height],
       [x + width, y + height],
     ];
   }
 
-  leftxys() {
+  leftxys(): [number, number][] {
     const { x, y, height } = this;
     return [
       [x, y],
@@ -182,7 +182,8 @@ export class Draw {
     }
     this.ctx = context;
     this.resize(width, height);
-    this.ctx.scale(dpr(), dpr());
+    const currentDpr = dpr();
+    this.ctx.scale(currentDpr, currentDpr);
   }
 
   resize(width: number, height: number) {
@@ -286,8 +287,8 @@ export class Draw {
     ctx.save();
     ctx.beginPath();
     this.attr({
-      textAlign: align,
-      textBaseline: valign,
+      textAlign: align as CanvasTextAlign,
+      textBaseline: valign as CanvasTextBaseline,
       font: `${font.italic ? 'italic' : ''} ${font.bold ? 'bold' : ''} ${npx(font.size)}px ${font.name}`,
       fillStyle: color,
       strokeStyle: color,
@@ -391,19 +392,23 @@ export class Draw {
     if (borderTop) {
       this.border(borderTop[0], borderTop[1]);
       // console.log('box.topxys:', box.topxys());
-      this.line(...box.topxys());
+      const topPoints = box.topxys();
+      this.line(...(topPoints as [number, number][]));
     }
     if (borderRight) {
       this.border(borderRight[0], borderRight[1]);
-      this.line(...box.rightxys());
+      const rightPoints = box.rightxys();
+      this.line(...(rightPoints as [number, number][]));
     }
     if (borderBottom) {
       this.border(borderBottom[0], borderBottom[1]);
-      this.line(...box.bottomxys());
+      const bottomPoints = box.bottomxys();
+      this.line(...(bottomPoints as [number, number][]));
     }
     if (borderLeft) {
       this.border(borderLeft[0], borderLeft[1]);
-      this.line(...box.leftxys());
+      const leftPoints = box.leftxys();
+      this.line(...(leftPoints as [number, number][]));
     }
     ctx.restore();
   }

src/sheet/components/BottomBar/Bottombar.tsx

@@ -136,7 +136,7 @@ export const Bottombar: React.FC = () => {
                     onKeyDown={(e) => {
                       if (e.key === 'Enter' || e.key === ' ') {
                         e.preventDefault();
-                        handleDeleteSheet(index, e);
+                        handleDeleteSheet(index, e as unknown as React.MouseEvent<Element, MouseEvent>);
                       }
                     }}
                     role="button"

src/sheet/components/Toolbar/Toolbar.tsx

@@ -26,7 +26,7 @@ export const Toolbar: React.FC = () => {
 
   // 获取当前选中单元格的样式
   const cellStyle = useMemo(() => {
-    if (!data) return null;
+    if (!data) return { font: { bold: false, italic: false, size: 10 } };
     return data.getSelectedCellStyle();
   }, [data]);
 
@@ -156,7 +156,7 @@ export const Toolbar: React.FC = () => {
           </div>
         </Dropdown>
 
-        <Dropdown title={cellStyle?.font?.size || '10'} width={80}>
+        <Dropdown title={String(cellStyle?.font?.size || '10')} width={80}>
           {[8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32].map((size) => (
             <div
               key={size}
@@ -214,7 +214,7 @@ export const Toolbar: React.FC = () => {
           <div style={{ padding: '10px' }}>
             <input
               type="color"
-              value={cellStyle?.color || '#000000'}
+              value={String(cellStyle?.color || '#000000')}
               onChange={(e) => setCellStyle('color', e.target.value)}
               style={{ width: '100%', height: '30px' }}
             />
@@ -236,7 +236,7 @@ export const Toolbar: React.FC = () => {
           <div style={{ padding: '10px' }}>
             <input
               type="color"
-              value={cellStyle?.bgcolor || '#ffffff'}
+              value={String(cellStyle?.bgcolor || '#ffffff')}
               onChange={(e) => setCellStyle('bgcolor', e.target.value)}
               style={{ width: '100%', height: '30px' }}
             />

src/sheet/core/cell.ts

@@ -1,10 +1,11 @@
+import type { CellRenderFn, FormulaMap } from '../types';
 import { expr2xy, xy2expr } from './alphabet';
 import { numberCalc } from './helper';
 
 // Converting infix expression to a suffix expression
 // src: AVERAGE(SUM(A1,A2), B1) + 50 + B20
 // return: [A1, A2], SUM[, B1],AVERAGE,50,+,B20,+
-export const infixExprToSuffixExpr = (src) => {
+export const infixExprToSuffixExpr = (src: string): (string | [string, number])[] => {
   const operatorStack = [];
   const stack = [];
   let subStrs = []; // SUM, A1, B2, 50 ...
@@ -47,20 +48,24 @@ export const infixExprToSuffixExpr = (src) => {
               const [sx, sy] = expr2xy(stack.pop());
               // console.log('::', sx, sy, ex, ey);
               let rangelen = 0;
-              for (let x = sx; x <= ex; x += 1) {
-                for (let y = sy; y <= ey; y += 1) {
-                  stack.push(xy2expr(x, y));
-                  rangelen += 1;
-                }
+            for (let x = sx; x <= ex; x += 1) {
+              for (let y = sy; y <= ey; y += 1) {
+                stack.push(xy2expr(x, y));
+                rangelen += 1;
               }
+            }
+            if (typeof c1 === 'string') {
               stack.push([c1, rangelen]);
+            }
             } catch {
               // console.log(e);
             }
           } else if (fnArgType === 1 || fnArgType === 3) {
             if (fnArgType === 3) stack.push(fnArgOperator);
             // fn argument => A1,A2,B5
-            stack.push([c1, fnArgsLen]);
+            if (typeof c1 === 'string') {
+              stack.push([c1, fnArgsLen]);
+            }
             fnArgsLen = 1;
           } else {
             // console.log('c1:', c1, fnArgType, stack, operatorStack);
@@ -123,7 +128,7 @@ export const infixExprToSuffixExpr = (src) => {
   return stack;
 };
 
-const evalSubExpr = (subExpr, cellRender) => {
+const evalSubExpr = (subExpr: string, cellRender: CellRenderFn): string | number => {
   const [fl] = subExpr;
   let expr = subExpr;
   if (fl === '"') {
@@ -137,16 +142,25 @@ const evalSubExpr = (subExpr, cellRender) => {
   if (expr[0] >= '0' && expr[0] <= '9') {
     return ret * Number(expr);
   }
-  const [x, y] = expr2xy(expr);
-  return ret * cellRender(x, y);
+      try {
+        const [x, y] = expr2xy(expr);
+        return ret * Number(cellRender(x, y));
+      } catch {
+        return 0;
+      }
 };
 
 // evaluate the suffix expression
 // srcStack: <= infixExprToSufixExpr
 // formulaMap: {'SUM': {}, ...}
 // cellRender: (x, y) => {}
-const evalSuffixExpr = (srcStack, formulaMap, cellRender, cellList) => {
-  const stack = [];
+const evalSuffixExpr = (
+  srcStack: (string | [string, number])[],
+  formulaMap: FormulaMap,
+  cellRender: CellRenderFn,
+  cellList: string[],
+): unknown => {
+  const stack: unknown[] = [];
   // console.log(':::::formulaMap:', formulaMap);
   for (let i = 0; i < srcStack.length; i += 1) {
     // console.log(':::>>>', srcStack[i]);
@@ -172,18 +186,19 @@ const evalSuffixExpr = (srcStack, formulaMap, cellRender, cellList) => {
       let top = stack.pop();
       if (!Number.isNaN(top)) top = Number(top);
       let left = stack.pop();
-      if (!Number.isNaN(left)) left = Number(left);
+      if (typeof left === 'number' && !Number.isNaN(left)) left = Number(left);
+      if (typeof top === 'number' && !Number.isNaN(top)) top = Number(top);
       let ret = false;
       if (fc === '=') {
         ret = left === top;
       } else if (expr === '>') {
-        ret = left > top;
+        ret = (left as number) > (top as number);
       } else if (expr === '>=') {
-        ret = left >= top;
+        ret = (left as number) >= (top as number);
       } else if (expr === '<') {
-        ret = left < top;
+        ret = (left as number) < (top as number);
       } else if (expr === '<=') {
-        ret = left <= top;
+        ret = (left as number) <= (top as number);
       }
       stack.push(ret);
     } else if (Array.isArray(expr)) {
@@ -208,15 +223,22 @@ const evalSuffixExpr = (srcStack, formulaMap, cellRender, cellList) => {
   return stack[0];
 };
 
-export const cellRender = (src, formulaMap, getCellText, cellList = []) => {
+export const cellRender = (
+  src: string,
+  formulaMap: FormulaMap,
+  getCellText: CellRenderFn,
+  cellList: string[] = [],
+): unknown => {
   if (src[0] === '=') {
     const stack = infixExprToSuffixExpr(src.substring(1));
     if (stack.length <= 0) return src;
     return evalSuffixExpr(
       stack,
       formulaMap,
-      (x, y) =>
-        cellRender(getCellText(x, y), formulaMap, getCellText, cellList),
+      (x: number, y: number): string | number => {
+        const text = getCellText(x, y);
+        return cellRender(String(text), formulaMap, getCellText, cellList) as string | number;
+      },
       cellList,
     );
   }