一周bug总结（1）：React+TS+ANTD

leecumulus

前端开发

React + TypeScript + Ant Design

浏览Ant Design 并尝试使用时出现了一些bug

解决了并记录一下

package.json
    "antd": "^4.17.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.1.1",
    "react-scripts": "5.0.0",
    "typescript": "^4.5.4",

1、 useState 里面定义类型

const [value,SetValue] = useState('' as string|number)
// 此时 value 的类型被定义成了 string｜number

2、索引签名不能使用

// 关键代码
const contentList = {
  tab1: <p>content1</p>,
  tab2: <p>content2</p>,
const [activeTabKey1, setActiveTabKey1] = useState('tab1');
// TSX
  <div> { contentList[activeTabKey1] } </div>
// TSX 报错
// Error ：元素隐式具有 "any" 类型，因为类型为 "string" 的表达式不能用于索引类型 "{ tab1: Element; tab2: Element; }"。
  在类型 "{ tab1: Element; tab2: Element; }" 上找不到具有类型为 "string" 的参数的索引签名。

解决办法：为 activeTabKey1 添加 " 显式类型断言 "

// 类型断言
const [activeTabKey1, setActiveTabKey1] = useState('tab1' as keyof typeof contentList);

3、动态绑定样式的时候出错

// 关键代码
const contentStyle = {
    textAlign:'center'
// TSX
  <h3 style={contentStyle}>1</h3>
// style 报错
// 不能将类型“{ height: string; color: string; lineHeight: string; textAlign: string; background: string; }”分配给类型“Properties<string | number, string & {}>”。
  属性“textAlign”的类型不兼容。
    不能将类型“string”分配给类型“TextAlign | undefined”。ts(2322)
index.d.ts(1847, 9): 所需类型来自属性 "style"，在此处的 "DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>" 类型上声明该属性

一看就是 textAlign 错了，将 textAlign 修改为 TextAlign 之后不报错了但是样式显示失败

解决方法：

textAlign: 'center' as 'center'

4、 react-router-dom 中 activeclassname 不能继续使用

// 错误代码
<NavLink to="start" activeclassname="active"> leemulus </NavLink>
// 推测是新版本不能被弃用了
// 解决代码
  <NavLink className={ ({isActive})=>'defaultStyle'+ (isActive ?' activeStyle':'')} to="start"  >起步</NavLink>
// 在className 里面添加