typescript 前端新项目引用 semi-ui 编译报错 about semi-design

[pointhalo]

v2.1.0-beta.3 semi相关的ts error已全部修复。
剩余两个属于上游第三方lib的问题，需要skipLibCheckt跳过一下。

node_modules/resize-observer-polyfill/src/index.d.ts:19:18 - error TS2717: Subsequent property declarations must have the same type.  Property 'contentRect' must be of type 'DOMRectReadOnly', but here has type 'DOMRectReadOnly'.

19         readonly contentRect: DOMRectReadOnly;
                    ~~~~~~~~~~~

  node_modules/typescript/lib/lib.dom.d.ts:12122:14
    12122     readonly contentRect: DOMRectReadOnly;
                       ~~~~~~~~~~~
    'contentRect' was also declared here.

[wuhw]

这是个已知问题，在semi个别组件和其依赖的个别第三方lib上存在该问题。近期我们会解决下这个问题

[helloforrestworld]

新版本还会出现类型报错问题

vite: 3.1.0
react: 17.0.2
semi-ui: 2.19.0

../../node_modules/@douyinfe/semi-ui/_portal/index.tsx:40:5 - error TS2612: Property 'context' will overwrite the base property in 'PureComponent<PortalProps, PortalState, any>'. If this is intentional, add an initializer. Otherwise, add a 'declare' modifier or remove the redundant declaration.

40     context: ContextValue;
       ~~~~~~~

../../node_modules/@douyinfe/semi-ui/_portal/index.tsx:104:5 - error TS2416: Property 'render' in type 'Portal' is not assignable to the same property in base type 'PureComponent<PortalProps, PortalState, any>'.
  Type '() => ReactPortal' is not assignable to type '() => ReactNode'.
    Type 'ReactPortal' is not assignable to type 'ReactNode'.
      Type 'React.ReactPortal' is not assignable to type 'import("/Users/lizhi/Desktop/my-workspace/node_modules/@types/react/index").ReactPortal'.
        Types of property 'children' are incompatible.
          Type 'React.ReactNode' is not assignable to type 'import("/Users/lizhi/Desktop/my-workspace/node_modules/@types/react/index").ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.

104     render() {
        ~~~~~~

../../node_modules/@douyinfe/semi-ui/tooltip/index.tsx:29:10 - error TS1205: Re-exporting a type when the '--isolatedModules' flag is provided requires using 'export type'.

29 export { TooltipTransitionProps } from './TooltipStyledTransition';
            ~~~~~~~~~~~~~~~~~~~~~~

../../node_modules/@douyinfe/semi-ui/tooltip/index.tsx:182:5 - error TS2612: Property 'foundation' will overwrite the base property in 'BaseComponent<TooltipProps, TooltipState>'. If this is intentional, add an initializer. Otherwise, add a 'declare' modifier or remove the redundant declaration.

182     foundation: TooltipFoundation;
        ~~~~~~~~~~

../../node_modules/@douyinfe/semi-ui/tooltip/index.tsx:183:5 - error TS2612: Property 'context' will overwrite the base property in 'BaseComponent<TooltipProps, TooltipState>'. If this is intentional, add an initializer. Otherwise, add a 'declare' modifier or remove the redundant declaration.

183     context: ContextValue;
        ~~~~~~~

../../node_modules/@douyinfe/semi-ui/tooltip/index.tsx:608:14 - error TS2786: 'Portal' cannot be used as a JSX component.
  Its instance type 'Portal' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'ReactPortal' is not assignable to type 'ReactNode'.

608             <Portal getPopupContainer={this.props.getPopupContainer} style={{ zIndex }}>
                 ~~~~~~

../../node_modules/@douyinfe/semi-ui/tooltip/index.tsx:738:10 - error TS1205: Re-exporting a type when the '--isolatedModules' flag is provided requires using 'export type'.

738 export { Position };
             ~~~~~~~~


Found 7 errors in 2 files.

Errors  Files
     2  ../../node_modules/@douyinfe/semi-ui/_portal/index.tsx:40
     5  ../../node_modules/@douyinfe/semi-ui/tooltip/index.tsx:29
error Command failed with exit code 1.

[pointhalo]

新版本还会出现类型报错问题

vite: 3.1.0 react: 17.0.2 semi-ui: 2.19.0

../../node_modules/@douyinfe/semi-ui/_portal/index.tsx:40:5 - error TS2612: Property 'context' will overwrite the base property in 'PureComponent<PortalProps, PortalState, any>'. If this is intentional, add an initializer. Otherwise, add a 'declare' modifier or remove the redundant declaration.

40     context: ContextValue;
       ~~~~~~~

../../node_modules/@douyinfe/semi-ui/_portal/index.tsx:104:5 - error TS2416: Property 'render' in type 'Portal' is not assignable to the same property in base type 'PureComponent<PortalProps, PortalState, any>'.
  Type '() => ReactPortal' is not assignable to type '() => ReactNode'.
    Type 'ReactPortal' is not assignable to type 'ReactNode'.
      Type 'React.ReactPortal' is not assignable to type 'import("/Users/lizhi/Desktop/my-workspace/node_modules/@types/react/index").ReactPortal'.
        Types of property 'children' are incompatible.
          Type 'React.ReactNode' is not assignable to type 'import("/Users/lizhi/Desktop/my-workspace/node_modules/@types/react/index").ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.

104     render() {
        ~~~~~~

../../node_modules/@douyinfe/semi-ui/tooltip/index.tsx:29:10 - error TS1205: Re-exporting a type when the '--isolatedModules' flag is provided requires using 'export type'.

29 export { TooltipTransitionProps } from './TooltipStyledTransition';
            ~~~~~~~~~~~~~~~~~~~~~~

../../node_modules/@douyinfe/semi-ui/tooltip/index.tsx:182:5 - error TS2612: Property 'foundation' will overwrite the base property in 'BaseComponent<TooltipProps, TooltipState>'. If this is intentional, add an initializer. Otherwise, add a 'declare' modifier or remove the redundant declaration.

182     foundation: TooltipFoundation;
        ~~~~~~~~~~

../../node_modules/@douyinfe/semi-ui/tooltip/index.tsx:183:5 - error TS2612: Property 'context' will overwrite the base property in 'BaseComponent<TooltipProps, TooltipState>'. If this is intentional, add an initializer. Otherwise, add a 'declare' modifier or remove the redundant declaration.

183     context: ContextValue;
        ~~~~~~~

../../node_modules/@douyinfe/semi-ui/tooltip/index.tsx:608:14 - error TS2786: 'Portal' cannot be used as a JSX component.
  Its instance type 'Portal' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'ReactPortal' is not assignable to type 'ReactNode'.

608             <Portal getPopupContainer={this.props.getPopupContainer} style={{ zIndex }}>
                 ~~~~~~

../../node_modules/@douyinfe/semi-ui/tooltip/index.tsx:738:10 - error TS1205: Re-exporting a type when the '--isolatedModules' flag is provided requires using 'export type'.

738 export { Position };
             ~~~~~~~~


Found 7 errors in 2 files.

Errors  Files
     2  ../../node_modules/@douyinfe/semi-ui/_portal/index.tsx:40
     5  ../../node_modules/@douyinfe/semi-ui/tooltip/index.tsx:29
error Command failed with exit code 1.

这个是因为你的项目里存在多个版本的 @types/react（@types/react v18做了breaking change）
A.ReactNode !== B.ReactNode
统一一下再试试。

[pointhalo]

#793