chore: 尝试修复一些 ts 报错 (#6442)

package.json

@@ -67,6 +67,7 @@
     "marked": "^4.2.1",
     "monaco-editor": "0.30.1",
     "plugin-react-i18n": "^0.0.20",
+    "postcss-scss": "^4.0.6",
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -117,4 +118,4 @@
       "printBasicPrototype": false
     }
   }
-}
+}

packages/amis-core/src/RootRenderer.tsx

@@ -106,7 +106,7 @@ export class RootRenderer extends React.Component<RootRendererProps> {
       return;
     }
 
-    const scoped = delegate || this.context;
+    const scoped = delegate || (this.context as IScopedContext);
     if (action.actionType === 'reload') {
       action.target && scoped.reload(action.target, ctx);
     } else if (action.target) {
@@ -200,7 +200,7 @@ export class RootRenderer extends React.Component<RootRendererProps> {
           redirect && env.jumpTo(redirect, action);
           action.reload &&
             this.reloadTarget(
-              delegate || this.context,
+              delegate || (this.context as IScopedContext),
               filter(action.reload, ctx),
               store.data
             );
@@ -254,7 +254,7 @@ export class RootRenderer extends React.Component<RootRendererProps> {
 
     const dialogAction = store.action as ActionObject;
     const reload = action.reload ?? dialogAction.reload;
-    const scoped = store.getDialogScoped() || this.context;
+    const scoped = store.getDialogScoped() || (this.context as IScopedContext);
 
     store.closeDialog(true);
 

packages/amis-core/src/SchemaRenderer.tsx

@@ -11,7 +11,7 @@ import {
   resolveRenderer
 } from './factory';
 import {asFormItem} from './renderers/Item';
-import {ScopedContext} from './Scoped';
+import {IScopedContext, ScopedContext} from './Scoped';
 import {Schema, SchemaNode} from './types';
 import {DebugWrapper} from './utils/debug';
 import getExprProperties from './utils/filter-schema';
@@ -207,7 +207,12 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
     data: any,
     renderer?: React.Component<RendererProps> // for didmount
   ): Promise<RendererEvent<any> | void> {
-    return await dispatchEvent(e, this.cRef || renderer, this.context, data);
+    return await dispatchEvent(
+      e,
+      this.cRef || renderer,
+      this.context as IScopedContext,
+      data
+    );
   }
 
   renderChild(

packages/amis-core/src/WithRootStore.tsx

@@ -27,7 +27,7 @@ export function withRootStore<
       static ComposedComponent = ComposedComponent as React.ComponentType<T>;
 
       render() {
-        const rootStore = this.context;
+        const rootStore: IRendererStore = this.context as any;
         const injectedProps: {
           rootStore: IRendererStore;
         } = {

packages/amis-core/src/components/LazyComponent.tsx

@@ -8,8 +8,8 @@ import React from 'react';
 import VisibilitySensor from 'react-visibility-sensor';
 
 export interface LazyComponentProps {
-  component?: React.ReactType;
-  getComponent?: () => Promise<React.ReactType>;
+  component?: React.ElementType;
+  getComponent?: () => Promise<React.ElementType>;
   placeholder?: React.ReactNode;
   unMountOnHidden?: boolean;
   childProps?: object;
@@ -19,7 +19,7 @@ export interface LazyComponentProps {
 
 export interface LazyComponentState {
   visible: boolean;
-  component?: React.ReactType;
+  component?: React.ElementType;
 }
 
 export default class LazyComponent extends React.Component<
@@ -41,7 +41,7 @@ export default class LazyComponent extends React.Component<
 
     this.state = {
       visible: false,
-      component: props.component as React.ReactType
+      component: props.component as React.ElementType
     };
   }
 

packages/amis-core/src/env.tsx

@@ -72,7 +72,7 @@ export interface RendererEnv {
     schema: Schema,
     path: string,
     reRender: Function
-  ) => Promise<React.ReactType> | React.ReactType | JSX.Element | void;
+  ) => Promise<React.ElementType> | React.ElementType | JSX.Element | void;
   loadChartExtends?: () => void | Promise<void>;
   useMobileUI?: boolean;
   /**
@@ -153,7 +153,7 @@ export function withRendererEnv<
         const injectedProps: {
           env: RendererEnv;
         } = {
-          env: this.props.env || this.context
+          env: this.props.env! || this.context
         };
 
         if (!injectedProps.env) {

packages/amis-core/src/locale.tsx

@@ -133,7 +133,7 @@ export function localeable<
 
       render() {
         const locale: string =
-          this.props.locale || this.context || defaultLocale;
+          this.props.locale || (this.context as string) || defaultLocale;
         const translate = this.props.translate || makeTranslator(locale);
         const injectedProps: {
           locale: string;

packages/amis-core/src/theme.tsx

@@ -184,7 +184,8 @@ export function themeable<
       }
 
       render() {
-        const theme: string = this.props.theme || this.context || defaultTheme;
+        const theme: string =
+          this.props.theme || (this.context as string) || defaultTheme;
         const config = hasTheme(theme)
           ? getTheme(theme)
           : getTheme(defaultTheme);

packages/amis-core/src/types.ts

@@ -507,7 +507,7 @@ interface LinkItemProps {
   children?: Array<LinkItem>;
   path?: string;
   icon?: string;
-  component?: React.ReactType;
+  component?: React.ElementType;
 }
 
 export interface NavigationObject {

packages/amis-editor-core/src/component/IFramePreview.tsx

@@ -3,14 +3,13 @@ import {EditorManager} from '../manager';
 import {EditorStoreType} from '../store/editor';
 import {render, toast, resolveRenderer, resizeSensor} from 'amis';
 import {autobind} from '../util';
-import {RenderOptions} from 'amis-core';
+import {RendererConfig, RenderOptions} from 'amis-core';
 import {Schema} from 'amis';
 import {ErrorRenderer} from './base/ErrorRenderer';
 import cx from 'classnames';
 import {findDOMNode} from 'react-dom';
 import {isAlive} from 'mobx-state-tree';
 import {findTree} from 'amis-core';
-import {RendererConfig} from 'amis-core/lib/factory';
 
 export interface IFramePreviewProps {
   className: string;

packages/amis-ui/src/components/Alert.tsx

@@ -19,6 +19,7 @@ export interface AlertProps extends ThemeProps, LocaleProps {
   confirmBtnLevel?: string;
   alertBtnLevel?: string;
   isolate?: boolean;
+  children?: JSX.Element;
 }
 
 export interface AlertState {

packages/amis-ui/src/components/Alert2.tsx

@@ -21,6 +21,7 @@ export interface AlertProps {
   onClose?: () => void;
   classnames: ClassNamesFn;
   classPrefix: string;
+  children?: JSX.Element;
 }
 
 export interface AlertState {
@@ -80,7 +81,7 @@ export class Alert extends React.Component<AlertProps, AlertState> {
     const iconNode = icon ? (
       ['string', 'object'].includes(typeof icon) ? (
         typeof icon === 'object' ? (
-          generateIcon(cx, icon as IconCheckedSchema, 'icon')
+          generateIcon(cx, icon as any as IconCheckedSchema, 'icon')
         ) : (
           getIcon(icon as string) && <Icon icon={icon} className={cx(`icon`)} />
         )

packages/amis-ui/src/components/AsideNav.tsx

@@ -19,7 +19,7 @@ interface LinkItemProps {
   children?: Array<LinkItem>;
   path?: string;
   icon?: string;
-  component?: React.ReactType;
+  component?: React.ElementType;
 }
 
 export interface Navigation {

packages/amis-ui/src/components/Button.tsx

@@ -31,7 +31,7 @@ interface ButtonProps
   disabledTip?: string | TooltipObject;
   classPrefix: string;
   classnames: ClassNamesFn;
-  componentClass: React.ReactType;
+  componentClass: React.ElementType;
   overrideClassName?: boolean;
   loading?: boolean;
   loadingClassName?: string;

packages/amis-ui/src/components/Modal.tsx

@@ -33,6 +33,7 @@ export interface ModalProps extends ThemeProps, LocaleProps {
   disabled?: boolean;
   onExited?: () => void;
   onEntered?: () => void;
+  children?: JSX.Element;
 }
 export interface ModalState {}
 const fadeStyles: {

packages/amis-ui/src/components/PopUp.tsx

@@ -32,6 +32,7 @@ export interface PopUpPorps extends ThemeProps, LocaleProps {
   showClose?: boolean;
   placement?: 'left' | 'center' | 'right';
   header?: JSX.Element;
+  children?: JSX.Element;
 }
 
 const fadeStyles: {

packages/amis-ui/src/components/PullRefresh.tsx

@@ -24,6 +24,7 @@ export interface PullRefreshProps {
   loading?: boolean;
   successDuration?: number;
   loadingDuration?: number;
+  children?: JSX.Element;
 }
 
 type statusText = 'normal' | 'pulling' | 'loosing' | 'success' | 'loading';

packages/amis-ui/src/components/TooltipWrapper.tsx

@@ -99,6 +99,7 @@ export interface TooltipWrapperProps {
    * 显示&隐藏时触发
    */
   onVisibleChange?: (visible: boolean) => void;
+  children?: JSX.Element;
 }
 
 interface TooltipWrapperState {

packages/amis-ui/src/components/icons.tsx

@@ -115,7 +115,7 @@ export const pauseIcon = <PauseIcon />;
 export const leftArrowIcon = <LeftArrowIcon />;
 export const rightArrowIcon = <RightArrowIcon />;
 const iconFactory: {
-  [propName: string]: React.ReactType<{}>;
+  [propName: string]: React.ElementType<{}>;
 } = {};
 
 export function getIcon(key: string) {
@@ -126,7 +126,7 @@ export function hasIcon(iconName: string) {
   return !!getIcon(iconName);
 }
 
-export function registerIcon(key: string, component: React.ReactType<{}>) {
+export function registerIcon(key: string, component: React.ElementType<{}>) {
   iconFactory[key] = component;
 }
 

packages/amis/src/renderers/Action.tsx

@@ -585,7 +585,7 @@ export interface ActionProps
     | string
     | Function
     | null;
-  componentClass: React.ReactType;
+  componentClass: React.ElementType;
   tooltipContainer?: any;
   data?: any;
   isMenuItem?: boolean;
@@ -603,7 +603,7 @@ interface ActionState {
 export class Action extends React.Component<ActionProps, ActionState> {
   static defaultProps = {
     type: 'button' as 'button',
-    componentClass: 'button' as React.ReactType,
+    componentClass: 'button' as React.ElementType,
     tooltipPlacement: 'bottom' as 'bottom',
     activeClassName: 'is-active',
     countDownTpl: 'Action.countDown',

packages/amis/src/renderers/Nav.tsx

@@ -674,14 +674,16 @@ export class Navigation extends React.Component<
       } = overflow;
       overflowedIndicator = (
         <span className={cx(overflowClassName)}>
-          {getIcon(overflowIndicator!) ? (
-            <Icon icon={overflowIndicator} className="icon" />
-          ) : (
-            generateIcon(cx, overflowIndicator, 'Nav-itemIcon')
-          )}
-          {overflowLabel && isObject(overflowLabel)
-            ? render('nav-overflow-label', overflowLabel)
-            : overflowLabel}
+          <>
+            {getIcon(overflowIndicator!) ? (
+              <Icon icon={overflowIndicator} className="icon" />
+            ) : (
+              generateIcon(cx, overflowIndicator, 'Nav-itemIcon')
+            )}
+            {overflowLabel && isObject(overflowLabel)
+              ? render('nav-overflow-label', overflowLabel)
+              : overflowLabel}
+          </>
         </span>
       );
     }

packages/amis/src/renderers/Table/TableCell.tsx

@@ -11,7 +11,7 @@ import {ColorScale} from 'amis-core';
 import {isPureVariable, resolveVariableAndFilter} from 'amis-core';
 
 export interface TableCellProps extends RendererProps {
-  wrapperComponent?: React.ReactType;
+  wrapperComponent?: React.ElementType;
   column: any;
   contentsOnly?: boolean;
 }