typescript 踩坑的开始

283 阅读1分钟

没想到typescript这么多坑,昨天到今天看了一波视频教学,学了一些基础,但用起来各种定义、传参都会报错,搞得我花了大量时间去探索,最终还是屈服了any的魔爪中

目前在配置一个路由,加上菜单项做个封装的配置文件。

import Home from '@page/Home'
import NotFound from '@page/NotFound'
import Personal from '@page/personal/Personal'
import { useRoutes } from 'react-router-dom' // 使用useRoutes包装路由,需要配置好path,element
const menuRoutes = [
  {
    path: '/',
    element: <Home/>,
    name: "首页",
    menuShow: false, // 是否在菜单项显示
  },
  {
    path: '/home',
    element: <Home/>,
    name: "首页",
    menuShow: true, // 是否在菜单项显示
    children: [
      {
        path: 'person',
        element: <Personal/>,
        name: "个人",
        menuShow: true,
      },
    ]
  },
  {
    path: '/person',
    element: <Personal/>,
    name: "个人",
    menuShow: true,
  },
  {
    path: '*',
    element: <NotFound/>,
    name: "not found",
    menuShow: false,
  },
]
const SetRoutes  = () => {
  const Routes = useRoutes(menuRoutes);
  return Routes
}
export {SetRoutes,menuRoutes} 

ts文件:

 menuPackage = (menuList:any) => {
    return menuList.reduce( ( pre: any[] , next: any ) => {
      if(!next.children){
        pre.push(
          <Menu.Item key={next.path}>
            <Link to={next.path}>{next.name}</Link>
          </Menu.Item>
        )
        return pre
      }else{
        console.log(next);
        pre.push(
          <SubMenu key={next.key} icon={<UserOutlined />} title={next.name}>
            {
              next.children.map( (item:any) => {
                return (
                  <Menu.Item key={item.path}><Link to={item.path}>{item.name}</Link></Menu.Item>
                )
              })
            }
          </SubMenu>
        )
        return pre
      }
    },[])
  }

无论是给参数定义数组还是对象,最终都会报错,说不存在某个变量或者其他问题,所以统统用了any去处理。我猜想原因是定义数组时,有些变量的定义不够完善,但目前先用any应付着。等之后学得更深入,再回来解决这个问题。

      <div className="logo" />
        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
          {
          this.menuPackage(menuRoutes)
          }
        </Menu>
    </Header>

在render的方法调用中,一开始我用的是(menuList:[]),果断报错“Target allows only 0 element(s) but source may have more” ,查了一轮也没明显的解决方法,于是改成any。只能说any就是个逃避的方法,为了先开发更多能见到的功能,这个坑暂时留着,再学一阵ts再回来改吧。