fix: optimize ts type

Author: vnues

.eslintrc.json

@@ -129,6 +129,7 @@
     "no-new-wrappers": "error",
     "no-lonely-if": "off",
     "no-param-reassign": "off",
+    "no-alert": "off",
     "no-shadow": [
       "off",
       {
@@ -246,7 +247,8 @@
         "react/prop-types": "off",
         "no-underscore-dangle": "off",
         "func-names": "off",
-        "no-empty-function": "off"
+        "no-empty-function": "off",
+        "no-console": "off"
       }
     }
     // {

src/client/components/asyncBundle/index.tsx

@@ -1,4 +1,5 @@
-import React from 'react'
+import React, { ReactNode } from 'react'
+import { ILoader } from '../asyncLoader'
 import LoadingCompoent from '../loading'
 
 /**
@@ -9,8 +10,8 @@ import LoadingCompoent from '../loading'
  */
 
 interface IPops {
-  children: any
-  load: any
+  children: (mod: any) => ReactNode
+  load: ILoader
 }
 
 interface IState {

src/client/components/asyncLoader/index.tsx

@@ -2,9 +2,13 @@ import React from 'react'
 import AsyncBundle from '../asyncBundle'
 import proConfig from '../../../../config/pro-config'
 
-function AsyncLoader(loader: any) {
-  const asyncFn: any = (props: any) => (
-    <AsyncBundle load={loader}>{(Comp: any) => <Comp {...props} />}</AsyncBundle>
+interface IProps {}
+export type ILoader = () => Promise<any>
+function AsyncLoader(loader: ILoader) {
+  const asyncFn: any = (props: IProps) => (
+    <AsyncBundle load={loader}>
+      {(Comp: typeof React.Component) => <Comp {...props} />}
+    </AsyncBundle>
   )
   // 标记为异步组件
   asyncFn[proConfig.asyncComponentKey] = true

src/client/main/index.tsx

@@ -34,7 +34,7 @@ function renderDom(routeList: IRoute[], initStoreState?: Store) {
 
 function clientRender(routeList: IRoute[]) {
   let initialData: any = null
-  let initStoreState:Store|undefined
+  let initStoreState: Store | undefined
   const textDom = document.getElementById('ssrTextInitData') as HTMLTextAreaElement | null
   const storeDom = document.getElementById(
     'ssrTextInitStoreData'

src/client/main/layout.tsx

@@ -11,7 +11,7 @@ class Index extends React.PureComponent<Istate, IProps> {
     const { children } = this.props
     return (
       <div className="layout-box">
-        <h1>koa+react+ssr</h1>
+        <h1>ssr-layout</h1>
         {children}
       </div>
     )

src/client/main/route-config.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
-export interface IRoute{
-  path:string
+
+export interface IRoute {
+  path: string
   component: Function
-  exact:boolean
+  exact: boolean
 }
 
 let routes: IRoute[] = []

src/client/modules/home/routes.tsx

@@ -1,6 +1,5 @@
 import AsyncLoader from '@/components/asyncLoader'
 
-
 export default [
   {
     path: '/',

src/server/middlewares/genHtml.tsx

@@ -11,7 +11,7 @@ import { Store } from 'redux'
 
 interface IGenResult {
   html: string
-  fetchResult:any
+  fetchResult: any
 }
 export default async function genHtml(
   path: string,
@@ -27,7 +27,7 @@ export default async function genHtml(
 
   // 进行数据预取，更新 store 内的数据
   let fetchDataFn
-  let fetchResult= {}
+  let fetchResult = {}
   if (targetRoute) {
     fetchDataFn = targetRoute.component ? targetRoute.component.getInitialProps : null
     if (fetchDataFn) {
@@ -36,8 +36,8 @@ export default async function genHtml(
     }
   }
 
-  // 将预取数据在这里传递过去 组内通过props.staticContext获取 IntrinsicAttributes 
-  const context: any= {
+  // 将预取数据在这里传递过去 组内通过props.staticContext获取 IntrinsicAttributes
+  const context: any = {
     initialData: fetchResult
   }
   const html = renderToString(

src/server/middlewares/ssr.ts

@@ -9,7 +9,7 @@ import Koa from 'koa'
 
 const ejsPath = path.join(__dirname, '../../templates/server.ejs')
 const store = getStore()
-export default async (ctx:Koa.Context, next: Koa.Next): Promise<null> => {
+export default async (ctx: Koa.Context, next: Koa.Next): Promise<null> => {
   const { path } = ctx.request
 
   if (path.indexOf('.') > -1) {

tests/genHtml.spec.js

@@ -4,9 +4,13 @@ import getStore from '../src/client/store/reducers'
 describe('test genHtml Function', () => {
   it('should return the correct result when call genHtml', async () => {
     const store = getStore()
-    const insertCss = () => {}
+    const insertCss = () => {
+      console.log('insertCss')
+    }
     const { html } = await genHtml('/404', insertCss, store)
-    expect(html).toMatch(`<div class="layout-box"><h1>koa+react+ssr</h1><div><p>404页面page22</p><p>12</p></div></div>`)
+    expect(html).toMatch(
+      `<div class="layout-box"><h1>koa+react+ssr</h1><div><p>404页面page22</p><p>12</p></div></div>`
+    )
     expect(html).toMatchSnapshot() // 保存快照
   })
 })

tests/setupTests.js

@@ -1,5 +1,5 @@
 // 拓展对dom节点的断言
 import '@testing-library/jest-dom'
-import React from "react" 
+import React from 'react'
 // 处理这种情况 https://stackoverflow.com/questions/58070996/how-to-fix-the-warning-uselayouteffect-does-nothing-on-the-server
-React.useLayoutEffect = React.useEffect 
+React.useLayoutEffect = React.useEffect