React 18 + Hooks +Ts 开发中遇到的问题及解决方案！

画月的亮2023-11-14 23:56

这篇文章是用来专门记录关于React 18 + Hooks +Ts 开发中遇到的问题及解决方案

Q1

问题描述：

javascript 复制代码

TS7016: Could not find a declaration file for module 
'js-export-excel'. '/Users/zhangliangliang/WebstormProjects/daizhang-system-front/node_modules/js-export-excel/lib/index.js' 
implicitly has an 'any' type.<br/>Try `npm i --save-dev @types/js-export-excel` 
if it exists or add a new declaration (.d.ts) file containing `declare module 'js-export-excel';`

分析问题：根据控制台报错信息提示，，可能是跟项目中用的Ts 语法标准有关，
解决问题：
1. 手动声明模块类型

无法找到'js-export-excel'的类型声明文件，可以手动声明这个模块的类型。在代码中添加一个名为'js-export-excel.d.ts'的文件，并在文件中添加以下代码：

declare module 'js-export-excel';

这个代码告诉 TypeScript，'js-export-excel'模块的类型是任意的。这样，代码就可以正常编译了。

2.安装类型声明文件

通过运行以下命令来安装类型声明文件：

npm i --save-dev @types/js-export-excel

这个命令会安装一个名为'@types/js-export-excel'的包，这个包包含了'js-export-excel'模块的类型声明文件。安装完成后，代码就可以正常编译了。

总结：引用插件考虑Ts 适配问题

Q2

问题描述：

Expression statement is not assignment or call;报错代码：'主营业务收入': (v.mainBusinessIncome?/100).toFixed(2),
问题分析

错误可能是由于缺少变量声明或语法错误导致的。确保在使用变量之前先声明它们，并检查代码中是否有其他语法错误。

另外，代码中有一个问号，这可能会导致语法错误。如果想要使用条件运算符，请确保它的语法正确。
解决问题

修复代码，已经声明了变量v和mainBusinessIncome：

javascript 复制代码

'主营业务收入' :  v.mainBusinessIncome ? (mainBusinessIncome / 100).toFixed(2) : '';

总结：需要对变量类型进行明确